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标签的基本用法,先看如下的例子代码:

  <video id="myVideo" controls poster="video.jpg" width="600" height="400">     <source src="video.mp4" type="video/mp4"/>     <source src="video.webm" type="video/webM"/>     <source src="video.ogv" type="video/ogg"/>     <p>Your browser does not support the video tag.</p></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的各种属性和方法。

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

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

<div class="control">     <a href="#" class="btnPlay">Play/Pause</a></div>

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

$(‘.btnPlay‘).on(‘click‘, function() {
  if(video[0].paused) {
  video[0].play();
  }
  else {
  video[0].pause();
  }
  return false;
  };

 

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

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

<div class="progressTime">     Current play time: <span class="current"></span>     Video duration: <span class="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>

 

 

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

<div class="progressBar">     <div class="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;
  };

 

  完成影片加载的缓冲进度条

   在视频加载完成前,我们希望能完成一个加载影片进度的缓冲进度条,以告诉用户,当前视频已经加载了多少,还有多少时间就可以播放,HTML5 视频标签中,其实已经有progress事件可以进行监听,但看上去在chrome上有小BUG,所以我们改用传统的setimeout方法进行判断,增 加的加载进度缓冲的CSS代码如下:

<style> .progressBar { position: relative; width: 100%; height: height:10px; backgroud-color: #000; } .bufferBar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #ccc; } </style><div class="progressBar"><div class="bufferBar"></div></div> jQuery事件代码如下:
var startBuffer
=function() { var maxduration = video[0].duration; var currentBuffer = video[0].buffered.end(0); var percentage =100* currentBuffer / maxduration; $(.bufferBar‘).css(‘width‘, percentage+‘%‘);if(currentBuffer < maxduration) { setTimeout(startBuffer, 500); } }; setTimeout(startBuffer, 500);

  jQuery事件代码如下:

var startBuffer = function() { var maxduration = video[0].duration; var currentBuffer = video[0].buffered.end(0); var percentage = 100 * currentBuffer / maxduration; $(‘.bufferBar‘).css(‘width‘, percentage+‘%‘); if(currentBuffer < maxduration) { setTimeout(startBuffer, 500); } }; setTimeout(startBuffer, 500);

  在上面的代码中,通过video[0].buffered.end(0);,使用HTML 5 Video标签的buffered属性,能读出视频已加载的部分,最后通过setimeout方法每隔0.5秒继续加载视频。

  声音按钮的制作

  除了视频外,声音是必不可少的,在这里我们要设计两种声音按钮,一个是静音/打开的,一个是控制音量大小的。界面设计如下:

<a href="#" class="muted">Mute/Unmute</a><div class="volumeBar"><div class="volume"></div></div>

  相关的jQuery控制代码如下:

//静音(打开音量)的按钮设计 $(‘.muted‘).click(function() { video[0].muted = !video[0].muted; return false; }); //控制音量大小 $(‘.volumeBar‘).on(‘mousedown‘, function(e) { var position = e.pageX - volume.offset().left; var percentage = 100 * position / volume.width(); $(‘.volumeBar‘).css(‘width‘, percentage+‘%‘); video[0].volume = percentage / 100; });

  其中,通过使用HTML 5 Video标签中的muted方法,来去控制声音是否打开和关闭,而控制音量大小的原理,其实跟之前的控制进度条的原理大致一样,通过判断mousedown事件进行判断。

  快进,快退功能的实现

  HTML 5 Video标准中,提供了快进,快退等功能的API,但可惜目前Fire Fox没能实现,全部支持功能的是Safri浏览器,我们还是来看下相关的代码,首先是设计这些按钮的界面:

//静音(打开音量)的按钮设计 $(.muted‘).click(function() {video[0].muted = !video[0].muted; return false; }); //控制音量大小 $(.volumeBar‘).on(‘mousedown‘, function(e) {var position = e.pageX - volume.offset().left; var percentage =100* position / volume.width(); $(.volumeBar‘).css(‘width‘, percentage+‘%‘);video[0].volume = percentage /100; });

 

  可以看到,其中调用的是video标签中的playbackrate方法,设定一个数值,来表示播放的速度,如果是负数则表示回退。

  此外,HTML 5 Video标签中还有不少相关的事件,这些事件对我们设计上是很有帮助的,下面列举一些:

HTML5 video ended Event

  -当视频结束后,触发该事件.

HTML5 video canplay Event

  如果视频能播放,则触发该事件,即使视频还在加载缓冲中。

 HTML5 video canplaythrough Event

  - 当整个视频加载完毕能完整播放时,触发该事件

HTML5 video seeking Event

  - 当视频中进行片段寻找时触发该事件

HTML5 video waiting Event

  - 当视频中等待进行数据加载时,触发该事件

  全屏及灯光效果

  现在的视频观看,还需要有全屏及关灯的效果(即减暗屏幕的对比度,突出显示视频),这些在HTML 5中都可以实现,首先看的是全屏的效果:

$(‘.fullscreen‘).on(‘click‘, function() {
  //对Webkit内核的浏览器
  video[0].webkitEnterFullscreen();
  //对于 FireFox浏览器
  video[0].mozRequestFullScreen();
  return false;
  });

 

  而对于关灯的效果,其实也就是一个CSS的应用,对透明度等进行设置:

$(‘.btnLight‘).click(function() {
  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视频播放器。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。