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 time video.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 duration video.on('loadedmetadata', function() { $('.duration').text(video[0].duration)); }); //update HTML5 video current play time video.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 control var 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 data 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, 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; });

 

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