jQ效果：jQuery和css自定義video播放控件

下面介紹一下經過jquery和css自定義video播放控件。

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

 

實際上,自定義視頻控件並不困難.本文將告訴你如何用jQuery自定義視頻控件,但願對你有用!

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>

幸運的是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>

下面的js就是經過視頻的總時間與當前時間的計算，得到播放進度條。

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

　快進/快退 倒帶控制

Html5 Video支持播放速度的改變.咱們可使用playbackrate屬性來控制.

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

不幸的是FireFox不支持playbackrate屬性.以及有些版本的chrome瀏覽器不支持負值(倒帶).到目前爲止,只有Safri瀏覽器徹底支持.

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

其餘

　　除了主要的控制插件.還能夠作一些額外的控制.例如全屏播放

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

 

原文地址:http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/#comment-form