定制HTML 5Video播放器

开发 前端
由于各浏览器在对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标签的基本用法,先看如下的例子代码:

  1. <video id="myVideo" controls poster="video.jpg" width="600" height="400" > 
  2.   <source src="video.mp4" type="video/mp4" /> 
  3.   <source src="video.webm" type="video/webM" /> 
  4.   <source src="video.ogv" type="video/ogg" /> 
  5.   <p>Your browser does not support the video tag.p> 
  6. deo> 

在HTML5中,视频标签只需要添加标签即可,在上面的代码标签中,其中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的各种属性和方法。

  1.   //获得video标签,这里是DOM对象  
  2.  
  3.   var video = document.getElementById('videoID');  
  4.  
  5.   也可以通过jQuery的方法,如下:  
  6.  
  7.   var video = $('#videoID').get(0);  

接下来是设计PLAY和PAUSE(暂停按钮),代码如下:

  1. <div class="control"> 
  2.     <a href="#" class="btnPlay">Play/Pausea> 
  3. div> 

这里播放和暂停的按钮的jQuery事件代码如下:

  1. $('.btnPlay').on('click', function() {  
  2.  
  3.   if(video[0].paused) {  
  4.  
  5.   video[0].play();  
  6.  
  7.   }  
  8.  
  9.   else {  
  10.  
  11.   video[0].pause();  
  12.  
  13.   }  
  14.  
  15.   return false;  
  16.  
  17.   }; 

可以看到,这里可以通过video标签的paused方法判断视频是否已经暂停了,而用play方法则可以直接播放视频,这里判断的逻辑很简单,如果视频已经暂停,当再次按的时候则播放,反之亦然。

接下来,看下如何能显示当前的播放进度以及进行回放。HTML5中,也提供了回放的功能。我们先设计如何显示当前的播放进度,以及视频的总的时间长度,代码设计如下:

  1. <div class="progressTime"> 
  2.     Current play time: <span class="current">span> 
  3.     Video duration: <span class="duration">span> 
  4. div> 

而现在相关的jQuery事件中,必须判断通过loadedmetadata事件,去判断HTML5 Video的metadata元数据是否已经加载进来,然后就可以调用当前视频的时间和总长度了,代码如下:

  1.  //获得视频的时间总长度  
  2.  
  3.   video.on('loadedmetadata', function() {  
  4.  
  5.   $('.duration').text(video[0].duration));  
  6.  
  7.   });  
  8.  
  9.   // 更新当前HTML5视频播放时间  
  10.  
  11.   video.on('timeupdate', function() {  
  12.  
  13.   $('.current').text(video[0].currentTime);  
  14.  
  15.   });  

接下来,我们设计一个视频播放的进度条,设计进度条的样式如下:

  1. <style> 
  2. .progressBar  
  3. {  
  4.     position: relative;  
  5.     width: 100%;  
  6.     height: height:10px;  
  7.     backgroud-color: #000;  
  8. }  
  9. .timeBar  
  10. {  
  11.     position: absolute;  
  12.     top: 0;  
  13.     left: 0;  
  14.     width: 0;  
  15.     height: 100%;  
  16.     background-color: #ccc;  
  17. }  
  18. style> 

在如下的界面中,应用上面的样式

  1. <div class="progressBar"> 
  2.     <div class="timeBar">div> 
  3. div> 

现在,我们把上面学到的知识整合一下,完善一下进度条,通过当前视频的播放时间除以视频的总时间,得出播放的进度百分比,然后通过进度条显示出来,如下代码:

  1.   video.on('loadedmetadata', function() {  
  2.  
  3.   $('.duration').text(video[0].duration));  
  4.  
  5.   });  
  6.  
  7.   video.on('timeupdate', function() {  
  8.  
  9.   var currentPos = video[0].currentTime; //获得当前播放时间  
  10.  
  11.   var maxduration = video[0].duration; //获得影片播放时间  
  12.  
  13.   var percentage = 100 * currentPos / maxduration; //百分比  
  14.  
  15.   $('.timeBar').css('width', percentage+'%');  
  16.  
  17.   });  

但这样显然还不足够,我们还要让进度条能够拖动,我们可以监听mousedown,mouseup和mousemove这几个事件完成相关的功能,代码如下:

  1. var timeDrag = false; /* 初始默认的拖动状态为false/  
  2.  
  3.   $('.progressBar').mousedown(function(e) {  
  4.  
  5.   timeDrag = true;  
  6.  
  7.   updatebar(e.pageX);  
  8.  
  9.   });  
  10.  
  11.   $(document).mouseup(function(e) {  
  12.  
  13.   if(timeDrag) {  
  14.  
  15.   timeDrag = false; //停止拖动,设置timeDrag为false  
  16.  
  17.   updatebar(e.pageX);  
  18.  
  19.   }  
  20.  
  21.   });  
  22.  
  23.   $(document).mousemove(function(e) {  
  24.  
  25.   if(timeDrag) {  
  26.  
  27.   updatebar(e.pageX);  
  28.  
  29.   }  
  30.  
  31.   });  
  32.  
  33.   var updatebar = function(x) {  
  34.  
  35.   var progress = $('.progressBar');  
  36.  
  37.   var maxduration = video[0].duration;  
  38.  
  39.   var position = x - progress.offset().left;  
  40.  
  41.   var percentage = 100 * position  
  42.  
  43.   //检查拖动进度条的范围是否合法  
  44.  
  45.   if(percentage > 100) {  
  46.  
  47.   percentage = 100;  
  48.  
  49.   }  
  50.  
  51.   if(percentage < 0) {  
  52.  
  53.   percentage = 0;  
  54.  
  55.   }  
  56.  
  57.   //Update progress bar and video currenttime  
  58.  
  59.   $('.timeBar').css('width', percentage+'%');  
  60.  
  61.   video[0].currentTime = maxduration * percentage / 100;  
  62.  
  63.   };  
  64.  

 原文链接:http://www.html5cn.org/article-2543-1.html

责任编辑:张伟 来源: HTML5中国
相关推荐

2012-06-04 13:44:08

2015-10-08 16:02:28

HTML5Video

2010-01-22 14:23:54

HTML 5

2012-05-25 10:31:44

HTML5

2012-04-05 13:19:06

WEBHTML5

2023-07-24 13:22:35

VideoHTML5Web

2011-11-22 09:32:28

HTML 5

2017-01-11 10:57:29

video使用JS库

2011-06-13 09:33:04

2022-08-16 17:37:06

视频播放器鸿蒙

2023-07-10 18:44:18

开源播放器

2017-02-20 09:15:34

Linux播放器Qmmp

2011-06-27 11:23:21

Qt 音乐播放器

2010-07-30 09:35:47

Flex播放器

2011-07-20 16:21:20

iPhone 视频 播放器

2021-01-19 13:30:52

Linux播放器互联网

2011-09-09 11:28:35

Android Mus

2011-09-05 18:08:01

MTK音频播放器

2015-05-21 15:25:42

VLC播放器

2014-12-31 16:52:53

音乐播放器源码
点赞
收藏

51CTO技术栈公众号