使用CSS3+JQuery打造自定义视频播放器

2024-04-27 14:32:41

字体：大中小

来源：转载

供稿：网友

简介HTML5的<video>标签已经被目前大多数主流浏览器所支持，包括还未正式发布的IE9也声明将支持<video>标签，利用浏览器原生特性嵌入视频有很多好处，所以很多开发者想尽快用上，但是真正使用前还有些问题要考虑，尤其是 Opera/Firefox 和IE/Safari浏览器所支持的视频编码不同的问题，Google几个月前发布的开源视频编码VP8有望能解决这一问题，另外Google还发布了开放网络媒体项目WebM，旨在帮助开发者为开放网络制作出世界级媒体格式，Opera, Firefox,Chrome和IE9都将支持VP8，而且Flash Player也将可以播放VP8，这就意味着我们很快就可以只制作一个版本的视频然后在所有主流浏览器上播放了。另外一个主要的问题就是如何构建自定义的HTML5<video>播放器，这是目前Flash Player的优势所在，利用Flash的IDE所提供的接口可以很方便的构建一个个性化的视频播放器，那HTML5的<video>标签要怎样才能实现呢？这个问题就是本文所要解决的！我们将开发一个HTML5<video>视频播放器的jQuery插件，并且可以很方便的进行自定义，将分为以下几个部分：1.视频控制工具条2.视频控制按钮3.打包成jQuery插件4.外观和体验5.自定义皮肤视频控制工具条做为一个专业的web开发人员，我们创建一个视频播放器时一定希望它的外观在各个浏览器中看起来一致(consistent)，但是通过下面的图可以看到目前各个浏览器提供的视频控制工具条外观各不相同：那就没办法了，我们得自己从头来创建这个控制工具条，利用HTML和CSS再加上一些图片实现起来并不算很难，另外通过HTML5多媒体元素提供的API我们可以很方便将创建的任何按钮与播放/暂停等事件进行绑定。视频控制按钮基本的视频控制工具条要包含一个播放/暂停按钮，一个进度条，一个计时器和一个音量控制按钮，我们将这些按钮放在<video>元素下面，并用一个div作为父容器：

<divclass="ghinda-video-controls">
<a class="ghinda-video-play" title="Play/Pause"></a>
<divclass="ghinda-video-seek"></div>
<divclass="ghinda-video-timer">00:00</div>
<div class="ghinda-volume-box">
<divclass="ghinda-volume-slider"></div>
<aclass="ghinda-volume-button"title="Mute/Unmute"></a>
</div>
</div>

复制代码

注意，我们使用元素的class属性来代替ID属性是为了方便在一个页面上使用多个播放器。打包成jQuery插件创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的，正如前面提到的一样我们将我们的播放器打包成jQuery插件，这样可以很好的实现复用，代码如下：

$.fn.gVideo =function(options) {
// build main options before element iteration
var defaults = {
theme: 'simpledark',
childtheme: ''
};
var options = $.extend(defaults, options);
// iterate and reformat each matched element
return this.each(function() {
10. var $gVideo =$(this);
11.
12. //create htmlstructure
13. //main wrapper
14. var $video_wrap =$('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);
15. //controls wraper
16. var $video_controls= $('<div class="ghinda-video-controls"><aclass="ghinda-video-play"title="Play/Pause"></a><divclass="ghinda-video-seek"></div><divclass="ghinda-video-timer">00:00</div><divclass="ghinda-volume-box"><divclass="ghinda-volume-slider"></div><aclass="ghinda-volume-button"title="Mute/Unmute"></a></div></div>');
17. $gVideo.wrap($video_wrap);
18. $gVideo.after($video_controls);

复制代码

这里先假设您了解jQuery并知道如何创建一个jQuery插件，因为这个不在本文的讨论范围之内，在上面这段脚本中我们使用jQuery动态创建视频控制工具条的元素，接下来为了绑定事件我们需要获取对应的元素：

//get newlycreated elements
var $video_container= $gVideo.parent('.ghinda-video-player');
var$video_controls = $('.ghinda-video-controls', $video_container);
var$ghinda_play_btn = $('.ghinda-video-play', $video_container);
var$ghinda_video_seek = $('.ghinda-video-seek', $video_container);
var$ghinda_video_timer = $('.ghinda-video-timer', $video_container);
var$ghinda_volume = $('.ghinda-volume-slider', $video_container);
var$ghinda_volume_btn = $('.ghinda-volume-button', $video_container);

10. $video_controls.hide();// keep the controls hidden

复制代码

这里我们通过className方式获取，先让工具条隐藏直到所有资源加载完成，现在来实现播放/暂停按钮：

var gPlay =function() {
if($gVideo.attr('paused') == false) {
$gVideo[0].pause();
} else {
$gVideo[0].play();
}
};
$ghinda_play_btn.click(gPlay);

10. $gVideo.click(gPlay);

12. $gVideo.bind('play',function() {

13. $ghinda_play_btn.addClass('ghinda-paused-button');

14. });

16. $gVideo.bind('pause',function() {

17. $ghinda_play_btn.removeClass('ghinda-paused-button');

18. });

20. $gVideo.bind('ended',function() {

21. $ghinda_play_btn.removeClass('ghinda-paused-button');

22. });

复制代码

大多数浏览器在右键点击视频时会提供一个独立的菜单，它也提供了视频控制功能，如果用户通过这个右键菜单控制视频那就会跟我们的自定义控件冲突，所以为了避免这一点我们需要绑定视频播放器自身的“播放”，“暂停”和“结束”事件，在事件处理函数中处理播放/暂停按钮，控制按钮的样式。为了创建进度条的拖动块，我们使用了jQuery UI的Slider组件：

var createSeek =function() {
if($gVideo.attr('readyState')) {
var video_duration =$gVideo.attr('duration');
$ghinda_video_seek.slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: video_duration,
10. animate: true,
11. slide: function(){
12. seeksliding = true;
13. },
14. stop:function(e,ui){
15. seeksliding =false;
16. $gVideo.attr("currentTime",ui.value);
17. }
18. });
19. $video_controls.show();
20. } else {
21. setTimeout(createSeek, 150);
22. }

23. };

25. createSeek();

复制代码

正如你所看到的，这里我们写了一个递归函数，通过循环比较video的readyState属性来判断视频是否已经准备好，否则我们就不能获得视频的时长也无法创建滑动块，当视频准备好后我们初始化滑动块并显示控制工具条，下一步我们通过绑定video元素的timeupdate事件实现计时器功能：

vargTimeFormat=function(seconds){
varm=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
vars=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
return m+":"+s;
};
var seekUpdate =function() {
var currenttime = $gVideo.attr('currentTime');
if(!seeksliding)$ghinda_video_seek.slider('value', currenttime);
10. $ghinda_video_timer.text(gTimeFormat(currenttime));

11. };

13. $gVideo.bind('timeupdate',seekUpdate);

复制代码

这里我们用seekUpdate函数获取video的currentTime属性值然后调用gTimeFormat函数进行格式化后得到当前播放的时间点。至于音量控制控件我们还是利用jQuery UI的Slider组件然后利用自定义函数实现静音和取消静音的功能：