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

■實(shí)例說明

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

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

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

    視頻加載loading效果。

    播放、暫停。

    總時(shí)長和當(dāng)前播放時(shí)長顯示。

    播放進(jìn)度條。

   全屏顯示。

■設(shè)計(jì)過程 

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

<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>

            <!--進(jìn)度條-->

            <div class="progress">

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

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

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

            </div>

            <!--時(shí)間-->

            <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" >

為了顯示播放按鈕等圖標(biāo)，本例使用了字體圖標(biāo)。

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

.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è)計(jì)播放功能。在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");

當(dāng)視頻可以播放時(shí)，顯示視頻。

video.oncanplay = function (){//當(dāng)視頻可播放的時(shí)候

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

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

}；

第4步，設(shè)計(jì)播放、暫停按鈕。當(dāng)點(diǎn)擊播放按鈕時(shí)，顯示暫停圖標(biāo)，在播放和暫停狀態(tài)之間切換圖標(biāo)。

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

    if(video.paused) {

        video.play();

    } else {

    video.pause ();

    }

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

}；

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

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è)計(jì)播放進(jìn)度條。

video.ontimeupdate = function(){

    var currTime = this.currentTime,                    //當(dāng)前播放時(shí)間

    duration = this.duration;                           //視頻總時(shí)長

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

    loaded.style.width = pre;                           //顯示進(jìn)度條

    currPlayTime. innerHTML = getFormatTime (currTime); //顯示當(dāng)前播放進(jìn)度時(shí)間

};

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

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

        var event = e window.event;

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

}；

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

//全屏

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