h5 的video视频控件

      由于html5的流行，其中的video视频的使用很流行，使得可恨的IE9也能与时俱进了。

video所支持的格式有mp4、ogg和wav三种。

例：

HTML5 Video基础标签

`

<video id="myVideo" controls    poster="video.jpg" width="640" height="320" >  <source src="video.mp4" type="video/mp4" />   <source src="video.wav" type="video/wav" />   <source src="video.ogv" type="video/ogg" />   <p>Your browser does not support the video tag.</p> </video>`

下面制作Video的控件controls

本人是通过jQuery来进行获取标签及相应的控件使用操作的

Video Play/Pause Controls 播放/暂停 按钮

通过jQuery来控制video的播放、暂停

jQuery代码

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

html代码

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

显示视频播放时间和持续时间

看视频肯定最好要有个时间的概念啦！！！

jQuery代码

video.on('loadedmetadata', function() {   $('.duration').text(video[0].duration);});//update HTML5 video current play timevideo.on('timeupdate', function() {   $('.current').text(video[0].currentTime);});

html代码

<div class="progressTime">   当前播放时间: <span class="current"></span>   总时间: <span class="duration"></span></div>

视频进度条

动态模拟时间

css样式

.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;}

jQuery代码

//get HTML5 video time durationvideo.on('loadedmetadata', function() {   $('.duration').text(video[0].duration));});//update HTML5 video current play timevideo.on('timeupdate', function() {   var currentPos = video[0].currentTime; //Get currenttime   var maxduration = video[0].duration; //Get video duration   var percentage = 100 * currentPos / maxduration; //in %   $('.timeBar').css('width', percentage+'%');});var timeDrag = false;   /* Drag status */$('.progressBar').mousedown(function(e) {   timeDrag = true;   updatebar(e.pageX);});$(document).mouseup(function(e) {   if(timeDrag) {      timeDrag = false;      updatebar(e.pageX);   }});$(document).mousemove(function(e) {   if(timeDrag) {      updatebar(e.pageX);   }});//update Progress Bar controlvar updatebar = function(x) {   var progress = $('.progressBar');   var maxduration = video[0].duration; //Video duraiton   var position = x - progress.offset().left; //Click pos   var percentage = 100 * position / progress.width();   //Check within range   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;};

html代码

<div class="progressBar">   <div class="timeBar"></div></div>

缓冲栏

看视频时缓冲加载了多少

样式

<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>

Html5 Video缓冲属性将返回一个对象的缓存范围.因此,我们将使用缓存数据的最后一个值.

//loop to get HTML5 video buffered datavar 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, 1000);   }};setTimeout(startBuffer, 1000);

音量控制

当然啦！看视频肯定得调个音量哦！！！

html代码

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

jQuery代码

//Mute/Unmute control clicked$('.muted').click(function() {   video[0].muted = !video[0].muted;   return false;});//Volume control clicked$('.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代码

<div class="control">   <a href="#" class="ff">Fast Forward</a>   <a href="#" class="rw">Rewind</a>   <a href="#" class="sl">Slow Motion</a></div>

jQuery代码

//Fast forward control$('.ff').on('click', function() {   video[0].playbackrate = 3;   return false;});//Rewind control$('.rw').on('click', function() {   video[0].playbackrate = -3;   return false;});//Slow motion control$('.sl').on('click', function() {   video[0].playbackrate = 0.5;   return false;});

然而很不幸的是：FireFox不支持playbackrate属性.以及有些版本的chrome浏览器不支持负值(倒带).到目前为止,只有Safri浏览器完全支持.所以请大家注意啦！

全屏播放

jQuery代码

$('.fullscreen').on('click', function() {   //For Webkit   video[0].webkitEnterFullscreen();   //For Firefox   video[0].mozRequestFullScreen();   return false;});

开灯关灯控制

jQuery代码

$('.btnLight').click(function() {   if($(this).hasClass('on')) {      $(this).removeClass('on');      $('body').append('<div class="overlay"></div>');      $('.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;});

好了！终于给整的差不多了！！！

借鉴地址：:http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/#comment-form