h5 的video視頻控件

h5 的video視頻控件

      因爲html5的流行，其中的video視頻的使用很流行，使得可恨的IE9也能與時俱進了。

video所支持的格式有mp四、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; });

 

好了！終於給整的差很少了！！！