jQuery和CSS3定制HTML5视频播放器
|
目前，随着越来越多的浏览器开始支持更多的HTML5新特性，开发者也逐渐关注HTML5的开发。在众多HTML5的新特性中，视频方面的新特性是很值得开发者和用户关注的。现在，只需要有支持HTML5的浏览器，不需要FLASH或其他插件，都可以轻松的观看视频了。然而，由于各浏览器在对HTML5的支持上，会有少许的差异，因此为了有更好的兼容性，需要进行定制开发，这样才能更兼顾各类的浏览器。在本文中，将介绍如何使用jQuery 和CSS3定制一个适合各浏览器观看的视频播放器。 本文的DEMO可以在这个地址观看到(http://www.inwebson.com/demo/html5-video/demo1/)，相关代码在(http://demo.inwebson.com/download/html5-video.zip)可以下载。 HTML5 Video标签基础 先来学习下HTML 5 Video标签的基本用法，先看如下的例子代码：
<videoid="myVideo"controls poster="video.jpg"width="600"height="400">
<sourcesrc="video.mp4"type="video/mp4"/> <sourcesrc="video.webm"type="video/webM"/> <sourcesrc="video.ogv"type="video/ogg"/> <p>Your browser does not support the video tag.p> video> 在HTML5中，视频标签只需要添加 此外，在HTML5标签中，也可以写一些文字，比如上面的“你的浏览器不支持视频标签”。 另外要注意的是，假如在ipad上使用video标签，由于目前的bug，必须把mp4格式的文件放在video标签的第一位，否则会出错。 开始定制HTML 5 Video播放器插件 有了以上的基础知识后，我们可以开始着手进行html 5 video播放器插件了。首先，很幸运的是HTML 5在视频和音频方面都有相关的API可以供调用操作(详细见W3C的标准：http://www.w3.org/TR/html5/the-iframe-element.html#media-elements)。首先，我们看下如果通过jQuery获得标准的html5 video标签对象，注意这里我们使用的是DOM对象，否则不能通过API获得video的各种属性和方法。
//获得video标签，这里是DOM对象
var video = document.getElementById('videoID'); 也可以通过jQuery的方法，如下： var video = $('#videoID').get(0); 接下来是设计PLAY和PAUSE(暂停按钮)，代码如下：
<divclass="control">
<ahref="#"class="btnPlay">Play/Pausea> div> 这里播放和暂停的按钮的jQuery事件代码如下：
$('.btnPlay').on('click', function() {
if(video[0].paused) { video[0].play(); } else { video[0].pause(); } return false; }; 可以看到，这里可以通过video标签的paused方法判断视频是否已经暂停了，而用play方法则可以直接播放视频，这里判断的逻辑很简单，如果视频已经暂停，当再次按的时候则播放，反之亦然。 接下来，看下如何能显示当前的播放进度以及进行回放。HTML5中，也提供了回放的功能。我们先设计如何显示当前的播放进度，以及视频的总的时间长度，代码设计如下：
<divclass="progressTime">
Current play time: <spanclass="current">span> Video duration: <spanclass="duration">span> div> 而现在相关的jQuery事件中，必须判断通过loadedmetadata事件，去判断HTML5 Video的metadata元数据是否已经加载进来，然后就可以调用当前视频的时间和总长度了，代码如下：
//获得视频的时间总长度
video.on('loadedmetadata', function() { $('.duration').text(video[0].duration)); }); // 更新当前HTML5视频播放时间 video.on('timeupdate', function() { $('.current').text(video[0].currentTime); }); 接下来，我们设计一个视频播放的进度条，设计进度条的样式如下：
<style>
.progressBar { position:relative; width:100%; height:height:10px; backgroud-color:#000; } .timeBar { position:absolute; top:0; left:0; width:0; height:100%; background-color:#ccc; } style> 在如下的界面中，应用上面的样式
<divclass="progressBar">
<divclass="timeBar">div> div> 现在，我们把上面学到的知识整合一下，完善一下进度条，通过当前视频的播放时间除以视频的总时间，得出播放的进度百分比，然后通过进度条显示出来，如下代码：
video.on('loadedmetadata', function() {
$('.duration').text(video[0].duration)); }); video.on('timeupdate', function() { var currentPos = video[0].currentTime; //获得当前播放时间 var maxduration = video[0].duration; //获得影片播放时间 var percentage = 100 * currentPos / maxduration; //百分比 $('.timeBar').css('width', percentage+'%'); }); 但这样显然还不足够，我们还要让进度条能够拖动，我们可以监听mousedown,mouseup和mousemove这几个事件完成相关的功能，代码如下：
var timeDrag = false; /* 初始默认的拖动状态为false/
$('.progressBar').mousedown(function(e) { timeDrag = true; updatebar(e.pageX); }); $(document).mouseup(function(e) { if(timeDrag) { timeDrag = false; //停止拖动，设置timeDrag为false updatebar(e.pageX); } }); $(document).mousemove(function(e) { if(timeDrag) { updatebar(e.pageX); } }); var updatebar = function(x) { var progress = $('.progressBar'); var maxduration = video[0].duration; var position = x - progress.offset().left; var percentage = 100 * position //检查拖动进度条的范围是否合法 if(percentage > 100) { percentage = 100; } if(percentage <0) { percentage= 0; } //Update progress bar and video currenttime $('.timeBar').css('width', percentage+'%'); video[0].currentTime= maxduration* percentage / 100; }; |
jQuery和CSS3定制HTML5视频播放器相关推荐
- HTML5视频播放器jQuery插件
HTML5 Video player jQuery plugin As you know – HTML5 <video> element is already supported by m ...
- 在线html5视频播放器,分享10款最棒的免费HTML5视频播放器
最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题.HTML5可以在没有flash的情况下播放视频.现在有很 ...
- 15个最佳HTML5视频播放器
随着YouTube最近的一项政策变化,即要求创作者在获得广告收入之前必须达到10,000次观看,因此我们看到了YouTube黄金时代的落日. 现在,比以往任何时候都更需要推动创意者开发自己的视频平台并 ...
- 在线html5视频播放器,打造自己的html5视频播放器
推荐这篇文章: 前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓"打造自己的&qu ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...
- html五编写视屏_打造自己的html5视频播放器
前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓"打造自己的",就是要自 ...
- html5视频播放器代码实例(含倍速、清晰度切换、续播)
本文将对视频播放相关的功能进行说明(基于云平台),包括初始化播放器.播放器尺寸设置.视频切换.倍速切换.视频预览.自定义视频播放的开始/结束时间.禁止拖拽进度.播放器皮肤.控件按钮以及播放控制等. ...
- html5播放器 迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
- HTML5 视频播放器 WordPress插件
HTML5 视频播放器 WordPress插件. 插件特点:3个类型的播放列表效果,5个皮肤可选,支持 .MP4 和.WEBM ,自动隐藏控制条,海报图像,播放列表图像,支持音量控制,可以添加视频描述 ...
最新文章
- 青稞大义 -RISV-V
- 关于SVN Server自助修改密码详细教程
- 你还在Java8中使用循环语句吗？
- 泽泽计算机科技,《计算机与信息技术》大学技能学习丛书.pdf
- c语言程序设计移动字母,C语言程序设计模拟试题二(含答案)
- java占位符填充_程序员：深入理解Java虚拟机，对象的内存布局
- c mysql查询年月日_mysql查询指定日期时间内的sql语句及原理
- python可以嵌在vba中吗_Jupyter Notebooks嵌入Excel并使用Python替代VBA宏
- 程序员的浪漫：教你如何用MATLAB向女生表白
- btrfs文件系统学习总结
- 【水果识别】基于matlab GUI灰度+二值化+腐蚀+膨胀算法水果识别【含Matlab源码 671期】
- vb教材笔记_vb学习笔记
- 计算机导论黄国兴百度云,计算机导论黄国兴
- 社会工程学利用的人性_社会互程学利用的人性“弱点”
- 关于web站点的欢迎界面
- python填写问卷星_使用Python自动填写问卷星(pyppeteer反爬虫版)
- 经典小游戏（密室逃脱全集+答案）
- Linux 磁盘划分 LVM 逻辑分区管理步骤
- 用什么擦地最干净脑筋急转弯_27个有意思的脑筋急转弯（含答案）
- 网络安全与渗透：xss 跨站脚本攻击（十二）此生无悔入华夏，男儿何不带吴钩