HTML5實現的視頻播放器

什么是hivideo？

 最近一段時間在使用PhoneGap開發一個App應用，App需要播放視頻，本想直接使用html5的video，但使用它在全屏播放時不支持橫屏播放，只能放棄。最終決定還是自己封裝一個播放器算了，免得以后要擴展功能麻煩。

    最近迷上hi這個單詞，所以我給這個播放器取名叫做：hivideo。

    hivideo是一款基於html5的視頻播放器，摒棄video原有的播放控制條樣式，自己重寫了一次。支持暫停、播放進度控制、聲音控制、全屏播放。如果是要在手機端使用hivideo，全屏播放時還支持橫屏播放。

    hivideo最終實現的效果如下：

如何使用hivideo？

    hivideo目錄結構：

assets

----images

----hivideo.css

hivideo.js

    要想使用hivideo，首先得在主界面引入樣式hivideo.css文件。

<link rel="stylesheet" href="assets/hivideo.css" />

    hivideo.js文件可在主頁面直接引用，同時也支持CommonJs、AMD規范。

    在需要轉換為hivideo播放器的video標簽上添加屬性：

<video ishivideo="true"></video>

    hivideo會自動把上面的video元素轉換為hivideo播放器。我們還可以在video標簽上設置播放屬性：

    1.autoplay: 自動播放。

    2.isrotate：全屏是否橫屏播放，如果在手機端使用hivideo，我們可以設置該屬性為true，表示全屏播放時橫屏顯示。

    3.autoHide：播放視頻時自動隱藏控制條。

    使用方式：

<video ishivideo="true" autoplay="true" isrotate="false" autoHide="true">
    <source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4">
</video>

    如果是后期動態添加的video元素，也可以通過hivideo動態加載。例如頁面動態添加了一個id為”player”的video元素，可通過如下方式把video轉換為hivideo播放器：

hivideo(document.getElementById("player"));

 

    在線演示Demo：https://heavis.github.io/hivideo/index.html

    開源地址：https://github.com/heavis/hivideo

如何隱藏瀏覽器的播放器樣式

    目前大多數瀏覽器都支持video元素，並且不同瀏覽器實現的video樣式也不盡相同。

    chrome實現的播放器樣式：

    Firefox實現的播放器樣式：

    IE實現的播放器樣式：

   

    為了讓播放器在各個瀏覽器下樣式統一，首先要隱藏各個瀏覽器實現的樣式。但一般我們通過瀏覽器開發工具查看不到播放器下的元素，因為這些元素都是陰影元素，它們是通過文檔片段附加到video上，對於文檔流是不可見的。
    如何查看瀏覽器下的陰影元素？Chrome為開發人員提供了可選項，打開開發者工具->Settings->General頁簽，我們能看到Elments有一個叫做”Show user agent shadow DOM”的選項：

    勾選上該選項，現在我們通過開發工具可以查看到video下的播放元素：

    上圖中<div pseudo=”-webkit-media-controls”>元素就是控制條的容器，我們只要設置它的display為none就可以隱藏掉控制條，但也需要兼容各個瀏覽器：

video[ishivideo="true"]::-webkit-media-controls{
display:none !important;
}

video[ishivideo="true"]::-moz-media-controls{
display:none !important;
}

video[ishivideo="true"]::-o-media-controls{
display:none !important;
}

video[ishivideo="true"]::media-controls{
display:none !important;
}

    這里我遇到一個費解的問題，把上面的樣式通過合並的方式寫是無效的，下面的寫法不能隱藏掉陰影元素：

video[ishivideo="true"]::-webkit-media-controls,
video[ishivideo="true"]::-moz-media-controls,
video[ishivideo="true"]::-o-media-controls,
video[ishivideo="true"]::media-controls{
    display:none !important;
}

 

    隱藏瀏覽器陰影元素后就可以開始動手實現自己的控制條了。實現之前，我們得了解video提供的API。

播放器常用API

    各個瀏覽器操作播放器提供的API名稱一般都帶有廠商前綴，所有基本上每一個API函數都對應多個版本，需要考慮兼容性。

    1.全屏事件

["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"].forEach(function(eventType){
    document.addEventListener(eventType, function(event){

    })
});

    如果播放器全屏狀態放生變化上面的事件就會觸發。上面的事件我們只知道全屏狀態發生變化，但不知道當前是進入全屏還是退出全屏。還需要結合全屏狀態API。

 

    2.當前是否全屏狀態

hivideo.prototype.isFullScreen = function(){
    return document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement || 
        document.msFullscreenElement;
};

    上面是hivideo封裝的判斷是否全屏的函數。

 

    3.進入全屏模式

if (video.requestFullscreen) {
    video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
} else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen();
} else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
}

     

    4.退出全屏模式

if (document.exitFullscreen) {
    document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
    document.msExitFullscreen();
}

   

    5.播放狀態

    video.paused:true表示未播放， false表示正在播放。

 

    6.播放視頻

    video.play()

 

    7.暫停播放
    video.pause()

 

    8.是否靜音
    video.muted = true， 靜音
    Video.muted = false，不靜音

 

    9.聲音控制

    設置video.volume控制聲音，值的范圍0到100。

 

    10.當前播放時間
    video.currentTime，可讀可寫，單位為妙。可通過<input type=’range’>的值顯示播放進度。
   

    11.視頻總周期
    video.duration,單位為妙。

    12.播放時間更新事件

video.addEventListener("timeupdate", function(){
});

   

    13.視頻元數據加載完成事件

    一般播放視頻時都會顯示視頻總時長，觸發loadedmetadata事件時元數據已經加載完成，所以可以在該事件中設置總時長的顯示。

video.addEventListener("loadedmetadata", function(){
}

 

    14.視頻播放結束事件

video.addEventListener("ended", function(){
}

 

    有了上面列出的API，要實現自定義播放器就比較容易了，在自己實現播放器的過程中對應位置調用對應API即可。

如何實現橫屏播放

    原理很簡單，在全屏時播放器容器沾滿了整個屏幕，我們可以給容器附加一個自定義樣式，讓容器旋轉90度。

.rotate90{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

    旋轉后的容器寬度和高度也要調整，需要把屏幕的高度screen.height賦給容器的寬度，而容器的高度設置為屏幕的寬度。這樣就實現了全屏播放效果。下面是全屏播放控制的完整代碼：

hivideo.prototype.bindFullEvent = function(){
    var self = this;
    var origWidth = origHeight = 0;

    ["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"].forEach(function(eventType){
        var curFullhivideoId = null;
        document.addEventListener(eventType, function(event){
        if((curFullhivideoId = document.body.getAttribute("curfullHivideo")) && curFullhivideoId !== self.videoId_ ){
            return;
        }
        var isRotate = self.options.isrotate;
        if(self.isFullScreen()){
            var cltHeight = isRotate ? window.screen.width : window.screen.height;
            var cltWidth = isRotate ? window.screen.height : window.screen.width;
            if(isRotate && !hivideo.hasClass(self.videoParent, "rotate90")){
                hivideo.addClass(self.videoParent, "rotate90");
            }
            self.videoParent.style.height = cltHeight + "px";
            self.videoParent.style.width = cltWidth + "px";
        }else{
            if(isRotate) self.videoParent.className = self.videoParent.className.replace("rotate90", "").trim();
                self.videoParent.style.height = origHeight + "px";
                self.videoParent.style.width = origWidth + "px";
            }
            })
        });

        self.fullBtn && self.fullBtn.addEventListener("click", function(){
        if(!self.isFullScreen()){
            document.body.setAttribute("curfullHivideo", self.videoId_);
            origWidth = self.videoParent.offsetWidth;
            origHeight = self.videoParent.offsetHeight;
            // go full-screen
            if (self.videoParent.requestFullscreen) {
            self.videoParent.requestFullscreen();
            } else if (self.videoParent.webkitRequestFullscreen) {
            self.videoParent.webkitRequestFullscreen();
            } else if (self.videoParent.mozRequestFullScreen) {
                self.videoParent.mozRequestFullScreen();
            } else if (self.videoParent.msRequestFullscreen) {
                self.videoParent.msRequestFullscreen();
            }
                self.exchangeBtnStatus(this, false);
        }else{
        // exit full-screen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

            self.exchangeBtnStatus(this, true);
        }
    });

    return self;
};

支持CommonJS、AMD規范

    1.CommonJS支持

(function(global, factory){
    "use strict";
    //支持commonJs規范
    if(typeof module === "object" && typeof module.exports === "object"){
        module.exports = factory(global);
    }else{
        factory(global);
    }
}(typeof window !== "undefined" ? window : this, function(window)
}

    2.AMD支持

//支持AMD規范
if (typeof define === "function" && define.amd){
    define("hivideo", [], function(){
        return hivideo;
    })
}