使用jQuery和CSS自定義HTML5 Video 控件 簡單適用

Html5 Video是現在html5最流行的功能之一,得到了大多數最新版本的瀏覽器支持.包括IE9,也是如此.不同的瀏覽器提供了不同的原生態瀏覽器視頻空間.我們制作自定義視頻控件為了在所有的瀏覽器中有一個相同的Html5視頻控件而不受默認視頻控件的控制.

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

video標簽最好包含mp4、webM和ogg這三種源視頻文件-可以跨瀏覽器。如果瀏覽器不支持html5，你可以使用flash作為后備！　　

　開始制作 HTML5 Video Controls

　　幸運的是HTML5 Video 的Api可以用JavaScript訪問,並使用他們來作為控制視頻的媒介.

　　在編碼之前讓我簡單的介紹一下jQuery是如何獲取video標簽的.

　　在JavaScript中我們使用getElementById('videoID')來獲取Video標簽,作為結果,我們會獲取到一個Dom對象.但是這不是等價的jQuery對象.$("videoID")會返回一個jQuery對象.不是Dom對象.這就是為什么在將其轉換為Dom對象之前我們不能直接使用jQuery選擇器調用/使用Html5 Video的Dom屬性和功能.　

//return a DOM object
var video = document.getElementById('videoID'); //or
var video = $('#videoID').get(0); //or
var video = $('#videoID')[0];
 
//return a jQuery object
var video = $('#videoID');

Video Play/Pause Controls 播放/暫停 按鈕

　　好的,這是所有的介紹.現在讓我們來編碼.首先,我們要創建一個簡單的播放/暫停按鈕.　

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

我們可以輕松的控制Html5 Video的播放與暫停狀態.

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

顯示視頻播放時間和持續時間

 　　Html5 Video支持視頻回放.這里我們要顯示視頻的當前播放時間和總時間.

<div class="progressTime">
   Current play time: <span class="current"></span>
   Video duration: <span class="duration"></span>
</div>

為了得到視頻的總時間,我們要確保視頻元數據已經加載.這個時候我們要用到Html5 Video的loadedmetadata事件.

　　對於當前的視頻播放時間.我們可以用Html5 Video timeupdate事件來保證他的更新.

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

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

完成!

　進階-顯示緩沖欄

　　我們需要給視頻制作一個緩沖欄讓用戶知道視頻加載了多少.

<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, 500);
   }
};
setTimeout(startBuffer, 500);

音量控制

　　現在,我們要增加聲音控制.有兩種不同的音量控制方法.靜音按鈕/音量欄

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

js

//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;
});

其他

　　除了主要的控制插件.還可以做一些額外的控制.例如全屏播放

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

開燈關燈控制

$('.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;
});