jQuery和CSS 3定制HTML 5视频播放器
目前,随着越来越多的浏览器开始支持更多的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标签的基本用法,先看如下的例子代码:
在HTML5中,视频标签只需要添加<video>标签即可,在上面的代码标签中,其中Src指定了视频来源的格式,目前支持有MP4,webm和ogy格式,如果有其他视频格式的话,可以通过一些视频工具进行转换(比如http://www.mirovideoconverter.com/上的软件)。
此外,在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的各种属性和方法。
var video = document.getElementById('videoID');
也可以通过jQuery的方法,如下:
var video = $('#videoID').get(0);
接下来是设计PLAY和PAUSE(暂停按钮),代码如下:
这里播放和暂停的按钮的jQuery事件代码如下:
if(video[0].paused) {
video[0].play();
}
else {
video[0].pause();
}
return false;
};
可以看到,这里可以通过video标签的paused方法判断视频是否已经暂停了,而用play方法则可以直接播放视频,这里判断的逻辑很简单,如果视频已经暂停,当再次按的时候则播放,反之亦然。
接下来,看下如何能显示当前的播放进度以及进行回放。HTML5中,也提供了回放的功能。我们先设计如何显示当前的播放进度,以及视频的总的时间长度,代码设计如下:
而现在相关的jQuery事件中,必须判断通过loadedmetadata事件,去判断HTML5 Video的metadata元数据是否已经加载进来,然后就可以调用当前视频的时间和总长度了,代码如下:
video.on('loadedmetadata', function() {
$('.duration').text(video[0].duration));
});
// 更新当前HTML5视频播放时间
video.on('timeupdate', function() {
$('.current').text(video[0].currentTime);
});
接下来,我们设计一个视频播放的进度条,设计进度条的样式如下:
在如下的界面中,应用上面的样式
现在,我们把上面学到的知识整合一下,完善一下进度条,通过当前视频的播放时间除以视频的总时间,得出播放的进度百分比,然后通过进度条显示出来,如下代码:
$('.timeBar').css('width', percentage+'%'); });
但这样显然还不足够,我们还要让进度条能够拖动,我们可以监听mousedown,mouseup和mousemove这几个事件完成相关的功能,代码如下:
percentage = 0;
}
//Update progress bar and video currenttime
$('.timeBar').css('width', percentage+'%');
video[0].currentTime = maxduration * percentage / 100;
};
完成影片加载的缓冲进度条
在视频加载完成前,我们希望能完成一个加载影片进度的缓冲进度条,以告诉用户,当前视频已经加载了多少,还有多少时间就可以播放,HTML5 视频标签中,其实已经有progress事件可以进行监听,但看上去在chrome上有小BUG,所以我们改用传统的setimeout方法进行判断,增 加的加载进度缓冲的CSS代码如下:
jQuery事件代码如下:
在上面的代码中,通过video[0].buffered.end(0);,使用HTML 5 Video标签的buffered属性,能读出视频已加载的部分,最后通过setimeout方法每隔0.5秒继续加载视频。
声音按钮的制作
除了视频外,声音是必不可少的,在这里我们要设计两种声音按钮,一个是静音/打开的,一个是控制音量大小的。界面设计如下:
相关的jQuery控制代码如下:
其中,通过使用HTML 5 Video标签中的muted方法,来去控制声音是否打开和关闭,而控制音量大小的原理,其实跟之前的控制进度条的原理大致一样,通过判断mousedown事件进行判断。
快进,快退功能的实现
HTML 5 Video标准中,提供了快进,快退等功能的API,但可惜目前Fire Fox没能实现,全部支持功能的是Safri浏览器,我们还是来看下相关的代码,首先是设计这些按钮的界面:
可以看到,其中调用的是video标签中的playbackrate方法,设定一个数值,来表示播放的速度,如果是负数则表示回退。
此外,HTML 5 Video标签中还有不少相关的事件,这些事件对我们设计上是很有帮助的,下面列举一些:
-当视频结束后,触发该事件.
如果视频能播放,则触发该事件,即使视频还在加载缓冲中。
- 当整个视频加载完毕能完整播放时,触发该事件
- 当视频中进行片段寻找时触发该事件
- 当视频中等待进行数据加载时,触发该事件
全屏及灯光效果
现在的视频观看,还需要有全屏及关灯的效果(即减暗屏幕的对比度,突出显示视频),这些在HTML 5中都可以实现,首先看的是全屏的效果:
//对Webkit内核的浏览器
video[0].webkitEnterFullscreen();
//对于 FireFox浏览器
video[0].mozRequestFullScreen();
return false;
});
而对于关灯的效果,其实也就是一个CSS的应用,对透明度等进行设置:
if($(this).hasClass('on')) {
$(this).removeClass('on');
$('body').append('
');
$('.overlay').css({
'position':'absolute',
'width':100+'%',
'height':$(document).height(),
'background':'#000',
'opacity':0.9,
'top':0,
'left':0,
'z-index':999
});
$('#myVideo').css({
'z-index':1000
});
}
else {
$(this).addClass('on');
$('.overlay').remove();
}
return false;
});
小结
本文介绍了HTML 5 Video标签的基础知识,然后结合jQuery和CSS 3,充分利用HTML 5 Video标签提供的API,进行了一些个性化的定制工作开发,读者可以在此基础上丰富这个应用,打造更绚丽的HTML 5 Video视频播放器。
jQuery和CSS 3定制HTML 5视频播放器的更多相关文章
- HTML5+CSS3+JQuery打造自定义视频播放器
来源:http://www.html5china.com/HTML5features/video/201109206_1994.html 简介HTML5的<video>标签已经被目前大多数 ...
- 使用CSS3+JQuery打造自定义视频播放器
简介 HTML5的<video>标签已经被目前大多数主流浏览器所支持,包括还未正式发布的IE9也声明将支持<video>标签,利用浏览器原生特性嵌入视频有很多好处,所以很多开发 ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- jQ效果:jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
- jQuery属性/CSS使用例子
jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...
- jquery的css详解(二)
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- jquery的css详解(一)
通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...
- jquery修改css样式,样式带!important
由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...
随机推荐
- 【poj1061-青蛙的约会】拓展欧几里得-不定方程
http://poj.org/problem?id=1061 题意:裸题.注意负数. //poj1061 #include<cstdio> #include<cstdlib> ...
- 2016网易实习生编程题:n个骰子的和等于m
题目 骰子的点数是1 到 6,当有n个骰子的时候,其点数和等于m的数量 如当n = 4 m = 23时候 有下面四种: 5666656666566665 解题 深度优先,开始第一感觉很复杂,然后就没有 ...
- SSDP 简单服务发现协议
http://blog.csdn.net/lilypp/article/details/6631951
- Tomcat打印运行时日志(控制台),访问日志,启动日志
1.sh catlina.sh run以控制台形式输出 2.sever.xml.配置acesslog,设置访问日志输出 Tomcat的访问日志是靠org.apache.catalina.valves. ...
- 看完这些,你就算得上既了解围棋又了解alphago了
首先,我们要祝贺小李下出第78手的“神之一手”,这一手堪称前无古人后无来者,尤其是结合了阿尔法狗自暴自弃的表现.小李说过他的失败并不是人类的失败,同样,小李的胜利也只是属于他一人的胜利. 然而人类在围 ...
- 图解TCP/IP读书笔记(四)
第四章.IP协议 IP(Internet Protocol,网际协议),作为整个TCP/IP中至关重要的协议,主要负责将数据包发送给最终的目标计算机.因此,IP能够让世界上任何两台计算机之间进行通信. ...
- JBOSS集群技术升级版解决方案分享(图示篇)
JBOSS集群技术升级版解决方案分享(实现篇) 前段时间,由于阿堂一直较忙,没有写点什么了,有空时一直在关注"web架构和性能,高并发,Cache层"技术领域的 ...
- linux之应用开发杂记(一)
1.Shell 当前目录 $(pwd) 2.Samba的配置 sudo apt-get install samba Samba的配置文件是/etc/samba/smb.conf [global] se ...
- ubuntu下如何查看用户登录及系统授权相关信息【转】
转自:http://www.tuicool.com/articles/ia67Bj 如何在ubuntu下查看相关用户登录历史,进行系统的日志跟踪和分析,以便发现系统登录问题,进行安全策略防护呢?ubu ...
- 标准类型内建函数 type()介绍
我们现在来正式介绍一下 type().在Python2.2 以前, type() 是内建函数.不过从那时起,它变成了一个“工厂函数”.在本章的后面部分我们会讨论工厂函数, 现在你仍然可以将type() ...