摘要：推薦這篇文章前段時間重新學(xué)習(xí)了一下的部分，以前只是停留在標(biāo)簽的使用上，這一次決定深入了解相關(guān)的，并運用這些打造一個簡單的視頻播放器。最后推薦一篇文章，是打造自己的音樂播放器，別人做的那個才是真的牛，很值得學(xué)習(xí)

推薦這篇文章：

http://www.inwebson.com/html5...

前段時間重新學(xué)習(xí)了一下html5的video部分，以前只是停留在標(biāo)簽的使用上，這一次決定深入了解相關(guān)的API，并運用這些API打造一個簡單的視頻播放器。所謂“打造自己的”，就是要自己重寫video標(biāo)簽的控制欄部分，實現(xiàn)包括播放、暫停、進度和音量控制、全屏等功能，并自定義控制欄的樣式。

這是該播放器的代碼地址，也可以下載下來后查看：
https://github.com/animabear/...

下面我將逐步講解打造自己的html5視頻播放器的過程：

1、video播放相關(guān)API

只讀屬性：
video.duration：整個媒體文件的播放時長，單位s
video.paused ：如果媒體文件被暫停，則返回true；如果還沒開始播放，默認返回true
video.ended ：如果媒體文件播放完畢，則返回true

可寫屬性：
video.currentTime：以s為單位返回從開始播放到現(xiàn)在所用的時間。在播放過程中，設(shè)置currentTime來進行搜索，并定位到媒體文件的特定位置
video.volume ：在0.0到1.0之間設(shè)置音頻音量的相對值，或者查詢當(dāng)前音量相對值
video.muted ：檢測當(dāng)前是否為靜音，是則為true；為文件設(shè)置靜音或消除靜音

控制函數(shù)：
video.play() ：播放視頻文件
video.pause() ：暫停處于播放狀態(tài)的視頻文件
video.canPlayType() ：測試video元素是否支持給定MIME類型的文件

監(jiān)聽事件：
ontimeupdate ：當(dāng)video.currentTime發(fā)生改變時觸發(fā)該事件

2、全屏控制API
說明：這里只給出webkit的全屏API，本代碼沒有做兼容性處理，主要應(yīng)用了webkit的一些高級API和chrome的偽元素，所以前面請大家用chrome打開演示地址。

video.webkitRequestFullScreen()：全屏顯示
document.webkitCancelFullScreen()：退出全屏
document.webkitIsFullScreen：如果當(dāng)前處于全屏狀態(tài)，則返回true,否則返回false
document.addEventListener("webkitfullscreenchange", handler)：當(dāng)在全屏和非全屏狀態(tài)切換時，觸發(fā)該事件

3、本地文件讀取API
說明：我的這個視頻播放器支持從本地添加視頻文件播放，支持的格式在webkit瀏覽器支持的html5視頻播放標(biāo)準(zhǔn)范圍內(nèi)。本地文件讀取API是html5的新標(biāo)準(zhǔn)。

window.URL.createObjectURL(file)：file為文件對象，該函數(shù)返回指向文件的對象URL，通過該URL可以訪問文件。

video.src = window.URL.createObjectURL(file);

為了圖方便，布局上我使用 pure 來幫忙，一個很簡潔的css框架，其實也沒用到它多少。至于那些控制按鈕，借助css3的@font-face，我使用icon-font來實現(xiàn)。

icon-font其實就是所謂的圖標(biāo)字體，將設(shè)計好的svg格式圖片導(dǎo)入相關(guān)平臺，生成字體文件或者base64的編碼字符串，然后在頁面中引用這些自定義的字體文件或者插入base64編碼字符串。

這里給大家推薦一個不錯的平臺，IcoMoon，借助該平臺的IcoMoon App，可以方面的完成上述操作。而且該平臺還提供了不少優(yōu)秀的字體庫，我使用的就是現(xiàn)有的。對于不怎么會做設(shè)計又不想花時間找圖片的童鞋來說，這是個不錯的選擇。其實icon-font主要還是用來減小請求文件大小的。

video元素的html結(jié)構(gòu)：

video元素的js初始化：

var $player = $("#player");
var player = $player[0];  //方便使用dom原生的api

1、播放、暫停和停止
html:

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

2、播放進度控制條和播放時間顯示
1）播放進度控制條：
這一部分要實現(xiàn)兩個功能，一個是點擊控制條上的某一點，視頻能跳轉(zhuǎn)到對應(yīng)的時間點；另一個是點擊后控制條要有相應(yīng)的顯示（反饋），表明當(dāng)前位置。
html:

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

進度控制條的實現(xiàn)部分，要用到一個很關(guān)鍵的屬性：e.offsetX，在firefox里無此屬性，但有一個類似的e.layerX，具體可以查閱MDN。e.offsetX表示鼠標(biāo)指針的位置相對于觸發(fā)事件的對象的X坐標(biāo)，知道了這個值和進度條的寬度，就可以計算出當(dāng)前點擊位置的百分比了，然后就可以根據(jù)百分比來重新設(shè)置video的currentTime，實現(xiàn)進度控制。

注意：這里之所以要引入一個全局變量window.per來記錄當(dāng)前播放的進度百分比，是因為在切換到全屏后，控制條的長度會變長，退出全屏后，控制條的長度又會變短，所以對應(yīng)的內(nèi)層進度條（用于顯示進度的）的長度也要隨之變化，在之后講實現(xiàn)全屏/非全屏切換時會具體說明。此外，因為在播放過程中這個百分比是變化的，所以也要不斷更新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:

0:00

javascript:

$player
    .on("timeupdate", function() {
        //秒數(shù)轉(zhuǎn)換
        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"); 
        }
    });

注意：播放完畢后，記得將播放按鈕的圖標(biāo)重置為播放狀態(tài)

3、音量控制
1）靜音與取消靜音
html:

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:

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

這里設(shè)置全局變量的理由同上。

4、文件上傳按鈕
這里要做兩件事，一件是上傳文件并生成對象URL，另一件是在上傳前判斷瀏覽器是否能播放該格式的文件。由于瀏覽器支持的播放格式比較少，比較常見的就是mp4了，算是一個嘗試性功能吧。
html:

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狀態(tài)
            player.onload = function() {
                window.URL.revokeObjectURL(src);
            };
        } else {
            alert("瀏覽器不支持您選擇的文件格式");
        }
    });

注意：這里為了完全自由定義上傳按鈕的樣式，用了一個小技巧，就是通過點擊自定義的上傳按鈕來觸發(fā)真正的提交按鈕（input[type="file"]）的點擊事件,然后在css中隱藏真正的提交按鈕即可。關(guān)于文件讀取的API，可以去MDN上詳細學(xué)習(xí)一下。

5、全屏/非全屏的切換及相關(guān)控制
在全屏和非全屏之間切換，利用webkit的API很容易實現(xiàn)
html:

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

現(xiàn)在有兩個比較關(guān)鍵的問題，一是如何在全屏?xí)r隱藏video標(biāo)簽?zāi)J的控制欄并顯示自己的控制欄；二是播放進度控制條和音量控制條顯示狀態(tài)的調(diào)整，這個在前面已經(jīng)提到過了。

1）如何在全屏?xí)r隱藏video標(biāo)簽?zāi)J的控制欄
關(guān)于這個問題，我剛開始用中文搜了好久，都沒有找到相關(guān)內(nèi)容，所以我嘗試著在google里用"how to hide video controls in html5"，結(jié)果出來的第三條就是我想要的，不得不感慨有些資源只能通過英語才能搜到。

這篇文章很清楚得描述了這個問題，基本的原理要利用瀏覽器特有的偽元素，其中還提到了shadow dom這個概念，挺好的一篇文章，我就不贅述了：
Hiding Native HTML5 Video Controls in Full-Screen Mode

2）在全屏/非全屏切換時更改控制進度條（內(nèi)層進度條）的寬度
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，主要目的還是想深入學(xué)習(xí)一下html5的video，畢竟不能只停留在一個標(biāo)簽的使用上。最后推薦一篇文章，是“打造”自己的HTML5音樂播放器，別人做的那個才是真的牛，很值得學(xué)習(xí)：
http://www.feelcss.com/html5-...