如何實(shí)現(xiàn)可以播放暫停、進(jìn)度拖拽、音量控制及全屏等功能的H5播放器-創(chuàng)新互聯(lián)

這篇文章主要介紹如何實(shí)現(xiàn)可以播放暫停、進(jìn)度拖拽、音量控制及全屏等功能的H5播放器，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的永興網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

一個(gè)基于HTML5標(biāo)簽實(shí)現(xiàn)的一個(gè)自定義視頻播放器。其中實(shí)現(xiàn)了播放暫停、進(jìn)度拖拽、音量控制及全屏等功能。

效果預(yù)覽

點(diǎn)我查看 源碼倉(cāng)庫(kù) 。

核心思路

我相信一定會(huì)有些沒(méi)有接觸過(guò)制作自定義播放器的童鞋對(duì)于 標(biāo)簽的認(rèn)識(shí)會(huì)停留在此。

<video controls="controls" autoplay="autoplay">
  <source src="movie.ogg" type="video/ogg" />
</video>

其中controls屬性經(jīng)過(guò)設(shè)定，會(huì)在界面中顯示一個(gè)瀏覽器自帶的控制條。如果對(duì)于UI沒(méi)有要求的需求，其內(nèi)置控制器已經(jīng)可以滿足大部分的需求。當(dāng)然了如果是這樣你們也不會(huì)看到這篇分享了=。=

隱藏控制條并模擬

那么實(shí)現(xiàn)一個(gè)自定義功能的播放器關(guān)鍵就在于，我們不使用原生的控制器，將其隱藏掉之后，在下方同樣的位置通過(guò)html、css來(lái)模擬所需樣式，同時(shí)通過(guò)js來(lái)調(diào)用vedio標(biāo)簽所暴露給我們的接口函數(shù)及屬性，以及檢測(cè)用戶的操作行為來(lái)同步的模擬UI與視頻播放數(shù)據(jù)的相應(yīng)變化。

幾個(gè)核心函數(shù)及屬性的用法

myVid=document.getElementById("video1");
//控制視頻開(kāi)關(guān)
myVid.play() //播放
myVid.pause() //暫停
//模擬視頻進(jìn)度條
myVid.currentTime=5; //返回或設(shè)定當(dāng)前視頻播放位置
myVid.duration // 返回視頻總長(zhǎng)度
//模擬視頻音量
myVid.volume //音量
//獲取視頻當(dāng)前狀態(tài)后判斷何時(shí)從loading切換為播放
myVid.readyState
//0 = HAVE_NOTHING - 沒(méi)有關(guān)于音頻/視頻是否就緒的信息
//1 = HAVE_METADATA - 關(guān)于音頻/視頻就緒的元數(shù)據(jù)
//2 = HAVE_CURRENT_DATA - 關(guān)于當(dāng)前播放位置的數(shù)據(jù)是可用的，但沒(méi)有足夠的數(shù)據(jù)來(lái)播放下一幀/毫秒
//3 = HAVE_FUTURE_DATA - 當(dāng)前及至少下一幀的數(shù)據(jù)是可用的
//4 = HAVE_ENOUGH_DATA - 可用數(shù)據(jù)足以開(kāi)始播放

在所有實(shí)現(xiàn)中的關(guān)鍵點(diǎn)，較為繁瑣的是對(duì)于進(jìn)度條的模擬。其中使用了video標(biāo)簽中的currentTime以及duration屬性，通過(guò)當(dāng)前播放時(shí)間與總播放時(shí)間的比值，就可以計(jì)算出進(jìn)度條相對(duì)于總長(zhǎng)的位置。同時(shí)用戶通過(guò)拖拽進(jìn)度條所最后設(shè)置的長(zhǎng)度也可以用來(lái)反向推算出此時(shí)視頻應(yīng)該播放的位置。

拖拽代碼思路

//核心代碼示例
var dragDis = 0
var processWidth = xxx //拖拽條總長(zhǎng)
$('body').mousedown(function(e) {
    startX = e.clientX
    dragDis = startX - leftInit //leftInit為拖拽條起始點(diǎn)巨屏幕左側(cè)的距離
    dragTarget.css({ //拖拽按鈕
        left: dragDis
    })
    dragProcess.css({ //進(jìn)度條(藍(lán)色進(jìn)度條)
        width: dragDis
    }) // 令進(jìn)度條和拖拽按鈕渲染在同一位置
    videoSource.pause()
}).mousemove(function(e) {
    moveX = e.clientX
    disX = moveX - startX
    var left = dragDis + disX
    if(left > processWidth) {
        left = processWidth
    } else if(left < 0) {
        left = 0
    }
    dragTarget.css({
        left: left
    })
    dragProcess.css({
        width: left
    })
}).mouseup(function(e) {
    videoSource.play()
    videoSource.currentTime = $('藍(lán)色拖拽條').width() / processWidth * duration //拖拽后計(jì)算視頻的正確播放位置
})

同理音量的控制與其上行為基本一致，故在源碼中作者將音量與進(jìn)度部分通過(guò)不同元素進(jìn)行判斷是進(jìn)行進(jìn)度還是音量的拖拽控制。

通過(guò)查詢視頻流狀態(tài)控制播放前的加載動(dòng)畫

function ifState() {
    var state = videoSource.readyState
    if(state === 4) { //狀態(tài)為4即可播放
        videoPlayer()
    } else {
        $('.play-sym-wrapper').remove()
        $('body').append('<p class="play-sym-wrapper"><img class="play-sym" src="./images/loading.gif"></p>')
        //添加loading動(dòng)畫
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

核心的控制部分已經(jīng)說(shuō)完了，有興趣的同學(xué)可以去源碼的html中點(diǎn)擊播放，其中被迫有很多零碎的需求，比如點(diǎn)擊暫停，保存音量等等。整個(gè)視頻播放器的基礎(chǔ)功能實(shí)現(xiàn)的還算完善。

以上是如何實(shí)現(xiàn)可以播放暫停、進(jìn)度拖拽、音量控制及全屏等功能的H5播放器的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：如何實(shí)現(xiàn)可以播放暫停、進(jìn)度拖拽、音量控制及全屏等功能的H5播放器-創(chuàng)新互聯(lián)
標(biāo)題URL：http://muchs.cn/article6/ddjpog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈、服務(wù)器托管、建站公司、網(wǎng)站收錄、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)