HTML5 設(shè)計視頻播放器

■實例說明

    本例將設(shè)計一個視頻播放器，會用到HTML5提供的video元素，以及HTML5提供的多媒體API的擴展，示例演示效果如圖所示。

使用JavaScript控制播放控件的行為（自定義播放控件），實現(xiàn)如下功能。

    利用HTML+CSS制作一個自己的播放控件條，然后定位到視頻最下方。

    視頻加載loading效果。

    播放、暫停。

    總時長和當前播放時長顯示。

    播放進度條。

   全屏顯示。

■設(shè)計過程 

第1步，設(shè)計播放控件。

<figure>

    <figcaption〉視頻播放器 </figcaption〉

    <div class="player">

        <video src="./video/mv.mp4"></video>

        <div class="controls"）

            <!--播放/暫停-->

            <a href="javascript:;" class="switch fa fa-play"></a>

            <!—全屏一>

            <a href="javascript:;" class="expand fa fa-expand"></a>

            <!--進度條-->

            <div class="progress">

                <div class="loaded"></div>

                <div class="line"></div>

                <div class="bar"></div>

            </div>

            <!--時間-->

            <div class="timer">

                <span class="current">00:00:00</span>/

                <span class="total">00:00:00</span>

            </div>

            <!--聲音-->

        </div>

    </div>

</figure>

上面是全部HTML代碼，controls類就是播放控件HTML，引用CSS外部樣式表。

<link rel="stylesheet" href="css/font-awesome.css"> 

<link rel=nstylesheet" href="css/player.css" >

為了顯示播放按鈕等圖標，本例使用了字體圖標。

第2步，設(shè)計視頻加載loading效果。先隱藏視頻，用一個背景圖片替代，等視頻加載完畢之后，再顯示并播放視頻。

.player {

    width:720px;height:360px;margin:0 auto;position:relative; 

    background:#000 url(images/loading.gif) center/300px no-repeat;

}

video {display:none/margin:0 auto;height:100%;}

第3步，設(shè)計播放功能。在JavaScript腳本中，先獲取要用到的DOM元素。

var video = document.querySelector("video");

var isPlay = document.querySelector(".switch");

var expand = document. querySelector(".expand1"）;

var progress = document. querySelector(".progress"〉;

var loaded = document.querySelector(".progress > .loaded"）;

var currPlayTime = document.querySelector(".timer > .current"〉;

var totalTime = document.querySelector (".timer > .total");

當視頻可以播放時，顯示視頻。

video.oncanplay = function (){//當視頻可播放的時候

    this.style.display = "block"; //顯示視頻

    totalTime.innerHTML = getFormatTime (this.duration) ; //顯示視頻總時長

}；

第4步，設(shè)計播放、暫停按鈕。當點擊播放按鈕時，顯示暫停圖標，在播放和暫停狀態(tài)之間切換圖標。

isPlay .onclick = function (){//播放按鈕控制

    if(video.paused) {

        video.play();

    } else {

    video.pause ();

    }

    this.classList.toggle("fa-pause");

}；

第5步，獲取并顯示總時長和當前播放時長。前面代碼中其實己經(jīng)設(shè)置了相關(guān)代碼，此時只需要把獲取到的毫秒數(shù)轉(zhuǎn)換成需要的時間格式即可。先定義getFormatTimeO函數(shù)，用于轉(zhuǎn)換時間格式。

function getFormatTime(time) {

    var time = time 0;

    var h = parselnt(time/3600),

        m = parselnt(time%3600/60),

        s = parselnt(time%60);

   h = h <10 ? n0n+h : h;

   m = m <10 ? n0n+m ?? m;

   s = s <10 ? "0M+s : s;

   return h+":"+m+n:"+s;

}

第6步，設(shè)計播放進度條。

video.ontimeupdate = function(){

    var currTime = this.currentTime,                    //當前播放時間

    duration = this.duration;                           //視頻總時長

    var pre = currTime/duration * 100 + "%";            //百分比

    loaded.style.width = pre;                           //顯示進度條

    currPlayTime. innerHTML = getFormatTime (currTime); //顯示當前播放進度時間

};

    這樣就可以實時顯示進度條了，此時，還需要點擊進度條進行跳躍播放，即點擊任意時間點視頻跳轉(zhuǎn)到當前時間點播放：

    progress .onclick = function (e) {//跳躍播放 

        var event = e window.event;

        video.currentTime = (event.offsetX/this.offsetWidth) * video.duration;

}；

第7步，設(shè)計全屏顯示。這個功能使用HTML5提供的全局API: webkitRequestFullScreen實現(xiàn)，與video元素無關(guān)，經(jīng)測試在Firefox、IE下全屏功能不可用，僅針對webkit內(nèi)核瀏覽器可用。

//全屏

expand.onclick = function () {video.webkitRequestFullScreen()/};