分享一個基於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;
    })
}

 

    若是本篇內容對你們有幫助，請點擊頁面右下角的關注。若是以爲很差，也歡迎拍磚。大家的評價就是博主的動力！下篇內容，敬請期待！