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

好了！終於給整的差不多了！！！

h5 的video視頻控件