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

来源：http://www.html5china.com/HTML5features/video/201109206_1994.html

简介
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作为父容器：

XML/HTML Code复制内容到剪贴板

  1. <div class="ghinda-video-controls">
  2. <a class="ghinda-video-play" title="Play/Pause"></a>
  3. <div class="ghinda-video-seek"></div>
  4. <div class="ghinda-video-timer">00:00</div>
  5. <div class="ghinda-volume-box">
  6. <div class="ghinda-volume-slider"></div>
  7. <a class="ghinda-volume-button" title="Mute/Unmute"></a>
  8. </div>
  9. </div>

复制代码

注意，我们使用元素的class属性来代替ID属性是为了方便在一个页面上使用多个播放器。

打包成jQuery插件
创建好控制按钮后我们需要配合多媒体元素的API来实现视频控制的目的，正如前面提到的一样我们将我们的播放器打包成jQuery插件，这样可以很好的实现复用，代码如下：

XML/HTML Code复制内容到剪贴板

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

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

JavaScript Code复制内容到剪贴板

  1. //get newly created elements
  2. var $video_container = $gVideo.parent(‘.ghinda-video-player‘);
  3. var $video_controls = $(‘.ghinda-video-controls‘, $video_container);
  4. var $ghinda_play_btn = $(‘.ghinda-video-play‘, $video_container);
  5. var $ghinda_video_seek = $(‘.ghinda-video-seek‘, $video_container);
  6. var $ghinda_video_timer = $(‘.ghinda-video-timer‘, $video_container);
  7. var $ghinda_volume = $(‘.ghinda-volume-slider‘, $video_container);
  8. var $ghinda_volume_btn = $(‘.ghinda-volume-button‘, $video_container);
  9. $video_controls.hide(); // keep the controls hidden

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

JavaScript Code复制内容到剪贴板

  1. var gPlay = function() {
  2. if($gVideo.attr(‘paused‘) == false) {
  3. $gVideo[0].pause();
  4. } else {
  5. $gVideo[0].play();
  6. }
  7. };
  8. $ghinda_play_btn.click(gPlay);
  9. $gVideo.click(gPlay);
  10. $gVideo.bind(‘play‘, function() {
  11. $ghinda_play_btn.addClass(‘ghinda-paused-button‘);
  12. });
  13. $gVideo.bind(‘pause‘, function() {
  14. $ghinda_play_btn.removeClass(‘ghinda-paused-button‘);
  15. });
  16. $gVideo.bind(‘ended‘, function() {
  17. $ghinda_play_btn.removeClass(‘ghinda-paused-button‘);
  18. });

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

为了创建进度条的拖动块，我们使用了jQuery UI的Slider组件：

JavaScript Code复制内容到剪贴板

  1. var createSeek = function() {
  2. if($gVideo.attr(‘readyState‘)) {
  3. var video_duration = $gVideo.attr(‘duration‘);
  4. $ghinda_video_seek.slider({
  5. value: 0,
  6. step: 0.01,
  7. orientation: "horizontal",
  8. range: "min",
  9. 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. };
  24. createSeek();

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

JavaScript Code复制内容到剪贴板

  1. var gTimeFormat=function(seconds){
  2. var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
  3. var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
  4. return m+":"+s;
  5. };
  6. var seekUpdate = function() {
  7. var currenttime = $gVideo.attr(‘currentTime‘);
  8. if(!seeksliding) $ghinda_video_seek.slider(‘value‘, currenttime);
  9. $ghinda_video_timer.text(gTimeFormat(currenttime));
  10. };
  11. $gVideo.bind(‘timeupdate‘, seekUpdate);

这里我们用seekUpdate函数获取video的currentTime属性值然后调用gTimeFormat函数进行格式化后得到当前播放的时间点。

至于音量控制控件我们还是利用jQuery UI的Slider组件然后利用自定义函数实现静音和取消静音的功能：

JavaScript Code复制内容到剪贴板

  1. $ghinda_volume.slider({
  2. value: 1,
  3. orientation: "vertical",
  4. range: "min",
  5. max: 1,
  6. step: 0.05,
  7. animate: true,
  8. slide:function(e,ui){
  9. $gVideo.attr(‘muted‘,false);
  10. video_volume = ui.value;
  11. $gVideo.attr(‘volume‘,ui.value);
  12. }
  13. });
  14. var muteVolume = function() {
  15. if($gVideo.attr(‘muted‘)==true) {
  16. $gVideo.attr(‘muted‘, false);
  17. $ghinda_volume.slider(‘value‘, video_volume);
  18. $ghinda_volume_btn.removeClass(‘ghinda-volume-mute‘);
  19. } else {
  20. $gVideo.attr(‘muted‘, true);
  21. $ghinda_volume.slider(‘value‘, ‘0‘);
  22. $ghinda_volume_btn.addClass(‘ghinda-volume-mute‘);
  23. };
  24. };
  25. $ghinda_volume_btn.click(muteVolume);

最后当我们自己的自定义视频控制工具条构造完成后需要移除<video>标签的controls属性，这样浏览器默认的工具条就被去掉了。

好了，我们的插件功能已经全部完成了，调用方法：

JavaScript Code复制内容到剪贴板

  1. $(‘video‘).gVideo();

这会将我们的插件应用到页面上每一个video元素上。

外观和体验
好的，现在到了比较有意思的部分，也就是播放器的外观和体验了。当插件功能已经完成后利用一点CSS就可以很容易地自定义样式了，我们将全部使用CSS3来实现。
首先，我们给播放器主容器加一些样式：

CSS Code复制内容到剪贴板

  1. .ghinda-video-player {
  2. float: left;
  3. padding: 10px;
  4. border: 5px solid #61625d;
  5. -moz-border-radius: 5px; /* FF1+ */
  6. -ms-border-radius: 5px; /* IE future proofing */
  7. -webkit-border-radius: 5px; /* Saf3+, Chrome */
  8. border-radius: 5px; /* Opera 10.5, IE 9 */
  9. background: #000000;
  10. background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */
  11. background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */
  12. box-shadow: inset 0 15px 35px #535353;
  13. }

下一步，我们设置视频控制工具条左边浮动使它们水平对齐，利用CSS3的opacity和transitions我们给播放/暂停和静音/取消静音按钮添加了非常不错的悬浮效果：

CSS Code复制内容到剪贴板

  1. .ghinda-video-play {
  2. display: block;
  3. width: 22px;
  4. height: 22px;
  5. margin-right: 15px;
  6. background: url(../images/play-icon.png) no-repeat;
  7. opacity: 0.7;
  8. -moz-transition: all 0.2s ease-in-out; /* Firefox */
  9. -ms-transition: all 0.2s ease-in-out; /* IE future proofing */
  10. -o-transition: all 0.2s ease-in-out;  /* Opera */
  11. -webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
  12. transition: all 0.2s ease-in-out;
  13. }
  14. .ghinda-paused-button {
  15. background: url(../images/pause-icon.png) no-repeat;
  16. }
  17. .ghinda-video-play:hover {
  18. opacity: 1;
  19. }

如果您仔细看了前面那段根据视频播放状态(Playing/Paused)添加和移除播放/暂停按钮样式的JavaScript代码，就会明白为什么.ghinda-paused-button为什么要重写.ghinda-video-play的背景属性了。

现在轮到滑动块了，我们进度条和音量控制的滑动块的实现都是利用了jQuery UI的Slider组件，这个组件它本身自带了样式，定义在jQuery UI对应的css文件中，但是为了使滑动块和播放器其他控件外观保持一致我们全部重写了它的样式：

CSS Code复制内容到剪贴板

  1. .ghinda-video-seek .ui-slider-handle {
  2. width: 15px;
  3. height: 15px;
  4. border: 1px solid #333;
  5. top: -4px;
  6. -moz-border-radius:10px;
  7. -ms-border-radius:10px;
  8. -webkit-border-radius:10px;
  9. border-radius:10px;
  10. background: #e6e6e6;
  11. background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
  12. background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
  13. box-shadow: inset 0 -3px 3px #d5d5d5;
  14. }
  15. .ghinda-video-seek .ui-slider-handle.ui-state-hover {
  16. background: #fff;
  17. }
  18. .ghinda-video-seek .ui-slider-range {
  19. -moz-border-radius:15px;
  20. -ms-border-radius:15px;
  21. -webkit-border-radius:15px;
  22. border-radius:15px;
  23. background: #4cbae8;
  24. background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
  25. background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
  26. box-shadow: inset 0 -3px 3px #39a2ce;
  27. }

这时候音量控制的滑动块一直显示在音量按钮旁边，我们需要将它改成默认隐藏，当鼠标悬浮在音量按钮上再动态显示出来，使用transitions来实现这个效果会是个不错的的选择：

CSS Code复制内容到剪贴板

  1. .ghinda-volume-box {
  2. height: 30px;
  3. -moz-transition: all 0.1s ease-in-out; /* Firefox */
  4. -ms-transition: all 0.1s ease-in-out; /* IE future proofing */
  5. -o-transition: all 0.2s ease-in-out;  /* Opera */
  6. -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
  7. transition: all 0.1s ease-in-out;
  8. }
  9. .ghinda-volume-box:hover {
  10. height: 135px;
  11. padding-top: 5px;
  12. }
  13. .ghinda-volume-slider {
  14. visibility: hidden;
  15. opacity: 0;
  16. -moz-transition: all 0.1s ease-in-out; /* Firefox */
  17. -ms-transition: all 0.1s ease-in-out;  /* IE future proofing */
  18. -o-transition: all 0.1s ease-in-out;  /* Opera */
  19. -webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
  20. transition: all 0.1s ease-in-out;
  21. }
  22. .ghinda-volume-box:hover .ghinda-volume-slider {
  23. position: relative;
  24. visibility: visible;
  25. opacity: 1;
  26. }

利用一些基础的CSS属性以及CSS3提供的新属性我们打造了一个全新的播放器外观，它看起来是这个样子：

自定义皮肤
可能您已经注意到，我们在编写插件的时候已经定义了一些默认选项，它们是theme和childtheme，可以在调用插件的时候根据需要方便的应用自定义皮肤。
这里解释下theme就是所有控件的一整套样式定义，childtheme就是在theme基础上重写某些样式，我们在调用插件的时候可以同时指定这两个选项或者其中的一个：

JavaScript Code复制内容到剪贴板

  1. $(‘video‘).gVideo({
  2. childtheme:‘smalldark‘
  3. });

我们写了一个示例的皮肤smalldark，它只重写了部分的样式，显示效果是这样的：

总结
利用HTML5 video，JavaScript和CSS3打造自定义的视频播放器真的非常容易，t实现工具条功能用JavaScrip，外观和体验交给CSS3，我们得到了一个功能强大并且易于定制的解决方案！
enjoy！

转自：http://phperwuhan.blog.163.com/blog/static/41142602201201753739540/

时间： 2024-10-14 00:55:21

HTML5+CSS3+JQuery打造自定义视频播放器的相关文章

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

简介 HTML5的<video>标签已经被目前大多数主流浏览器所支持,包括还未正式发布的IE9也声明将支持<video>标签,利用浏览器原生特性嵌入视频有很多好处,所以很多开发者想尽快用上,但是真正使用前还有些问题要考虑,尤其是 Opera/Firefox 和IE/Safari浏览器所支持的视频编码不同的问题,Google几个月前发布的开源视频编码VP8有望能解决这一问题,另外Google还发布了开放网络媒体项目WebM,旨在帮助开发者为开放网络制作出世界级媒体格式,Opera,

HTML5,CSS3 与 Javascript 制作视频播放器

早一段时间,有一直研究 HTML5 和 CSS3 ,自己也做了不少 Demo ,只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器,因此特别想做一个自己喜欢的设计,考虑到会比较花时间,所以一直没有做出完整的 Demo . 刚好最近有灵感了,就下定决心做一个完整的视频播放器.首先放出成品: 做完这个播放器之后,感觉 HTML5 Video 提供的 API 已经很完善,考虑到一个播放器所需要的各个方面了,只是有些 API 还不被现代浏览器支持,但已被现代浏览器广泛支持

HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的,可以称之为增强版吧! 兼容性 Firefox.chrome.360急速.360安全浏览器.IE8,其他的没测试,不过IE上的兼容有些问题. 效果预览 操作演示 实现过程 我是做后端的,所以,页面设计的并不是很好看来着.大家可以自己修改页面. 1.布局 页面布局不多说了,就是纯DIV+CSS实现的,

html5 + css3 + jQuery + 响应式布局设计

1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN"><head><meta charset="utf-8" /><title>html5 - 新增属性与技术总结 - by sole</title><meta name="keywords" content="html

Css3+jQuery打造的一款带动画效果的数字时钟

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Css3+jQuery打造的一款带动画效果的数字时钟丨任E行F9行车记录仪|gopro官网|电影院座椅|</title> <style type="text/css&quo

Android进阶：自定义视频播放器开发（下）

上一篇文章我们主要讲了视频播放器开发之前需要准备的一个知识,TextureView,用于对图像流的处理.这篇文章开始构建一个基础的视频播放器. 一.准备工作 在之前的文章已经说过了,播放器也是一个view,我们要在这个view上播放视频流.所以我们要自定义一个简单的viewgroup,比如继承FrameLayout.还出就是布局简单,其他控件可以往上面添加.大家见过的视频播放器的控制器都是放在视频的上方的.这样就是用FrameLayout布局是最好的. class SmallVideoPlaye

自定义视频播放器（功能包括：播放/暂停，全屏，跳播）

最终效果: 1.demo结构 fontawesome字体下载:http://fontawesome.dashgame.com/ loading.gif:百度loading.gif选择一张下载 2.index.html 功能包括:播放/暂停,全屏,跳播 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义视频播放器</title> <li

HTML5和jQuery轻量级音频播放器

Light-AudioPlayer是一款基于jQuery,HTML5和CSS3的轻量级音频播放器插件.该音乐播放器采用CSS3制作界面,具有体积小,自适应各种屏幕等特点.可以在桌面和移动设备中正常工作.该音乐播放器的特点有: 轻量级:整个插件在JS.CSS压缩后最小只有4KB 快速响应:采用CSS3特性,自适应各种屏幕,使Light AudioPlayer在手机和平板上也能良好的运作 触摸支持:你可以用光标,也可以用你的手指.每一个动作都有它的触摸事件的定义和功能 JavaScript被禁用?不

Bootstrap+Html5制作强大的网页视频播放器

在做视频管理系统时,我们的定位是做到类似土豆视频的功能.视频管理,当然播放是必不可少的.在做这个播 放页面的时候,也研究了一下土豆的播放器,土豆用的是自己做的.但由于我们目前的技术有限,于是想着从网上找 一个现成的插件,于是开始了播放器的技术选型. 我发现了一个好的插件叫Video.js,研究了一下.基本的播放没问题,但当需要动态传参播放视频的时候,该款 播放器却很难跟着我的思路走,参数动态传不进去.如果现在去研究内部的js,改动内部代码,时间不允许.于是迫 不得已,只能另换解决方案. 搜索一番