推薦這篇文章:javascript
http://www.inwebson.com/html5...css
前段時間從新學習了一下html5的video部分,之前只是停留在標籤的使用上,這一次決定深刻了解相關的API,並運用這些API打造一個簡單的視頻播放器。所謂「打造本身的」,就是要本身重寫video標籤的控制欄部分,實現包括播放、暫停、進度和音量控制、全屏等功能,並自定義控制欄的樣式。html
這是該播放器的代碼地址,也能夠下載下來後查看:
https://github.com/animabear/... html5
下面我將逐步講解打造本身的html5視頻播放器的過程:java
一、video播放相關API jquery
只讀屬性:
video.duration:整個媒體文件的播放時長,單位s
video.paused :若是媒體文件被暫停,則返回true;若是還沒開始播放,默認返回true
video.ended :若是媒體文件播放完畢,則返回true css3
可寫屬性:
video.currentTime:以s爲單位返回從開始播放到如今所用的時間。在播放過程當中,設置currentTime來進行搜索,並定位到媒體文件的特定位置
video.volume :在0.0到1.0之間設置音頻音量的相對值,或者查詢當前音量相對值
video.muted :檢測當前是否爲靜音,是則爲true;爲文件設置靜音或消除靜音 git
控制函數:
video.play() :播放視頻文件
video.pause() :暫停處於播放狀態的視頻文件
video.canPlayType() :測試video元素是否支持給定MIME類型的文件 github
監聽事件:
ontimeupdate :當video.currentTime發生改變時觸發該事件 web
二、全屏控制API
說明:這裏只給出webkit的全屏API,本代碼沒有作兼容性處理,主要應用了webkit的一些高級API和chrome的僞元素,因此前面請你們用chrome打開演示地址。
video.webkitRequestFullScreen():全屏顯示
document.webkitCancelFullScreen():退出全屏
document.webkitIsFullScreen:若是當前處於全屏狀態,則返回true,不然返回false
document.addEventListener('webkitfullscreenchange', handler):當在全屏和非全屏狀態切換時,觸發該事件
三、本地文件讀取API
說明:個人這個視頻播放器支持從本地添加視頻文件播放,支持的格式在webkit瀏覽器支持的html5視頻播放標準範圍內。本地文件讀取API是html5的新標準。
window.URL.createObjectURL(file):file爲文件對象,該函數返回指向文件的對象URL,經過該URL能夠訪問文件。
video.src = window.URL.createObjectURL(file);
爲了圖方便,佈局上我使用 pure 來幫忙,一個很簡潔的css框架,其實也沒用到它多少。至於那些控制按鈕,藉助css3的@font-face,我使用icon-font來實現。
icon-font其實就是所謂的圖標字體,將設計好的svg格式圖片導入相關平臺,生成字體文件或者base64的編碼字符串,而後在頁面中引用這些自定義的字體文件或者插入base64編碼字符串。
這裏給你們推薦一個不錯的平臺,IcoMoon,藉助該平臺的IcoMoon App,能夠方面的完成上述操做。並且該平臺還提供了很多優秀的字體庫,我使用的就是現有的。對於不怎麼會作設計又不想花時間找圖片的童鞋來講,這是個不錯的選擇。其實icon-font主要仍是用來減少請求文件大小的。
video元素的html結構:
<video id="player" width="600" height="450">您的瀏覽器不支持HTML5 <source src="./videos/echo-hereweare.mp4"></source> <!-- 提供默認的播放視頻 --> </video>
video元素的js初始化:
var $player = $('#player'); var player = $player[0]; //方便使用dom原生的api
一、播放、暫停和中止
html:
<span id="play" class="icon icon-play"></span> <span id="stop" class="icon icon-stop"></span>
javascript:
$play .on('click', function() { if (player.paused) { player.play(); //播放 $(this).removeClass('icon-play').addClass('icon-pause'); } else { player.pause(); //暫停 $(this).removeClass('icon-pause').addClass('icon-play'); } }); $stop .on('click', function() { player.currentTime = 0; //中止播放 $innerBar.css('width', 0 + 'px'); });
二、播放進度控制條和播放時間顯示
1)播放進度控制條:
這一部分要實現兩個功能,一個是點擊控制條上的某一點,視頻能跳轉到對應的時間點;另外一個是點擊後控制條要有相應的顯示(反饋),代表當前位置。
html:
<div id="progressBar" class="controlBar"> <div id="innerBar" class="controlInner"></div> </div>
javascript:
$progressBar .on('click', function(e) { var w = $(this).width(), x = e.offsetX; window.per = (x / w).toFixed(3); //全局變量 var duration = player.duration; player.currentTime = (duration * window.per).toFixed(0); $innerBar.css('width', x + 'px'); //反饋 });
進度控制條的實現部分,要用到一個很關鍵的屬性:e.offsetX,在firefox裏無此屬性,但有一個相似的e.layerX,具體能夠查閱MDN。e.offsetX表示鼠標指針的位置相對於觸發事件的對象的X座標,知道了這個值和進度條的寬度,就能夠計算出當前點擊位置的百分比了,而後就能夠根據百分比來從新設置video的currentTime,實現進度控制。
注意:這裏之因此要引入一個全局變量window.per來記錄當前播放的進度百分比,是由於在切換到全屏後,控制條的長度會變長,退出全屏後,控制條的長度又會變短,因此對應的內層進度條(用於顯示進度的)的長度也要隨之變化,在以後講實現全屏/非全屏切換時會具體說明。此外,由於在播放過程當中這個百分比是變化的,因此也要不斷更新window.per這個全局變量:
javascript:
$player .on('timeupdate', function() { // ... (表示省略的代碼) var w = $progressBar.width(); if (player.duration) { var per = (player.currentTime / player.duration).toFixed(3); window.per = per; } else { per = 0; } $innerBar.css('width', (w * per).toFixed(0) + 'px'); // ... });
2)播放時間顯示
這個就比較簡單了,主要是一個時間換算,仍是利用上面的timeupdate事件
html:
<span id="timer">0:00</span>
javascript:
$player .on('timeupdate', function() { //秒數轉換 var time = player.currentTime.toFixed(1), minutes = Math.floor((time / 60) % 60), seconds = Math.floor(time % 60); if (seconds < 10) { seconds = '0' + seconds; } $timer.text(minutes + ':' + seconds); // ... (更新控制條部分) if (player.ended) { //播放完畢 $play.removeClass('icon-pause').addClass('icon-play'); } });
注意:播放完畢後,記得將播放按鈕的圖標重置爲播放狀態
三、音量控制
1)靜音與取消靜音
html:
<span id="volume" class="icon icon-volume"></span>
javascript:
$volume .on('click', function() { if (player.muted) { player.muted = false; $(this).removeClass('icon-volume-mute').addClass('icon-volume'); $volumeInner.css('width', 100 + '%'); //音量控制條回滿血 } else { player.muted = true; $(this).removeClass('icon-volume').addClass('icon-volume-mute'); $volumeInner.css('width', 0); } });
2)音量控制條
音量控制條和播放進度控制條實際上是同樣的,惟一不一樣的是這裏咱們改變的是video.volume的值。
html:
<div id="volume-control" class="controlBar"> <div id="volume-inner" class="controlInner"></div> </div>
javascript:
$volumeControl .on('click', function(e) { var w = $(this).width(), x = e.offsetX; window.vol = (x / w).toFixed(1); //全局變量 player.volume = window.vol; $volumeInner.css('width', x + 'px'); });
這裏設置全局變量的理由同上。
四、文件上傳按鈕
這裏要作兩件事,一件是上傳文件並生成對象URL,另外一件是在上傳前判斷瀏覽器是否能播放該格式的文件。因爲瀏覽器支持的播放格式比較少,比較常見的就是mp4了,算是一個嘗試性功能吧。
html:
<span id="upload" class="icon icon-upload"></span> <!-- ... 省略代碼 --> <input type="file" id="file">
css:
#file { visibility: hidden; }
javascript:
$upload .on('click', function() { $file.trigger('click'); }); $file .on('change', function(e) { var file = e.target.files[0], canPlayType = player.canPlayType(file.type); //判斷是否支持該格式 if (canPlayType === 'maybe' || canPlayType === 'probably') { src = window.URL.createObjectURL(file); player.src = src; $play.removeClass('icon-pause').addClass('icon-play'); //新打開的視頻處於paused狀態 player.onload = function() { window.URL.revokeObjectURL(src); }; } else { alert("瀏覽器不支持您選擇的文件格式"); } });
注意:這裏爲了徹底自由定義上傳按鈕的樣式,用了一個小技巧,就是經過點擊自定義的上傳按鈕來觸發真正的提交按鈕(input[type='file'])的點擊事件,而後在css中隱藏真正的提交按鈕便可。關於文件讀取的API,能夠去MDN上詳細學習一下。
五、全屏/非全屏的切換及相關控制
在全屏和非全屏之間切換,利用webkit的API很容易實現
html:
<span id="expand" class="icon icon-expand"></span>
javascript:
$expand .on('click', function() { if (!document.webkitIsFullScreen) { player.webkitRequestFullScreen(); //全屏 $(this).removeClass('icon-expand').addClass('icon-contract'); } else { document.webkitCancelFullScreen(); $(this).removeClass('icon-contract').addClass('icon-expand'); } });
如今有兩個比較關鍵的問題,一是如何在全屏時隱藏video標籤默認的控制欄並顯示本身的控制欄;二是播放進度控制條和音量控制條顯示狀態的調整,這個在前面已經提到過了。
1)如何在全屏時隱藏video標籤默認的控制欄
關於這個問題,我剛開始用中文搜了很久,都沒有找到相關內容,因此我嘗試着在google裏用"how to hide video controls in html5",結果出來的第三條就是我想要的,不得不感慨有些資源只能經過英語才能搜到。
這篇文章很清楚得描述了這個問題,基本的原理要利用瀏覽器特有的僞元素,其中還提到了shadow dom這個概念,挺好的一篇文章,我就不贅述了:
Hiding Native HTML5 Video Controls in Full-Screen Mode
2)在全屏/非全屏切換時更改控制進度條(內層進度條)的寬度
javascript:
$(document) .on('webkitfullscreenchange', function(e) { var w = $progressBar.width(), w1 = $volumeControl.width(); if (window.per) { $innerBar.css('width', (window.per * w).toFixed(0) + 'px'); } if (window.vol) { $volumeInner.css('width', (window.vol * w1).toFixed(0) + 'px') } });
這裏前面定義的兩個全局變量就派上用場了。
所有的代碼能夠在github上下載,其實寫的是一個很簡單的demo,主要目的仍是想深刻學習一下html5的video,畢竟不能只停留在一個標籤的使用上。最後推薦一篇文章,是「打造」本身的HTML5音樂播放器,別人作的那個纔是真的牛,很值得學習:
http://www.feelcss.com/html5-...