主頁 > 知識庫 > 從零實現(xiàn)一個自定義html5播放器的示例代碼

從零實現(xiàn)一個自定義html5播放器的示例代碼

熱門標簽:高德地圖標注賓館位置 杭州營銷電銷機器人供應商 電話機器人如何 貸款電銷人工和機器人哪個好 飛亞外呼系統(tǒng) 百應電銷機器人產業(yè) 西寧智能外呼系統(tǒng)加盟 電視購物電銷外呼系統(tǒng) 聯(lián)通400電話申請

本次的分享是一個基于HTML5標簽實現(xiàn)的一個自定義視頻播放器。其中實現(xiàn)了播放暫停、進度拖拽、音量控制及全屏等功能。

效果預覽

點我查看 源碼倉庫 。

核心思路

我相信一定會有些沒有接觸過制作自定義播放器的童鞋對于 標簽的認識會停留在此。

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

其中controls屬性經過設定,會在界面中顯示一個瀏覽器自帶的控制條。如果對于UI沒有要求的需求,其內置控制器已經可以滿足大部分的需求。當然了如果是這樣你們也不會看到這篇分享了=。=

隱藏控制條并模擬

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

幾個核心函數及屬性的用法

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

在所有實現(xiàn)中的關鍵點,較為繁瑣的是對于進度條的模擬。其中使用了video標簽中的currentTime以及duration屬性,通過當前播放時間與總播放時間的比值,就可以計算出進度條相對于總長的位置。同時用戶通過拖拽進度條所最后設置的長度也可以用來反向推算出此時視頻應該播放的位置。

拖拽代碼思路

//核心代碼示例
var dragDis = 0
var processWidth = xxx //拖拽條總長
$('body').mousedown(function(e) {
    startX = e.clientX
    dragDis = startX - leftInit //leftInit為拖拽條起始點巨屏幕左側的距離
    dragTarget.css({ //拖拽按鈕
        left: dragDis
    })
    dragProcess.css({ //進度條(藍色進度條)
        width: dragDis
    }) // 令進度條和拖拽按鈕渲染在同一位置
    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 = $('藍色拖拽條').width() / processWidth * duration //拖拽后計算視頻的正確播放位置
})

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

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

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

核心的控制部分已經說完了,有興趣的同學可以去源碼的html中點擊播放,其中被迫有很多零碎的需求,比如點擊暫停,保存音量等等。整個視頻播放器的基礎功能實現(xiàn)的還算完善。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

標簽:晉中 煙臺 玉溪 撫州 內蒙古 安慶 邯鄲 牡丹江

巨人網絡通訊聲明:本文標題《從零實現(xiàn)一個自定義html5播放器的示例代碼》,本文關鍵詞  從,零,實現(xiàn),一個,自定義,;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《從零實現(xiàn)一個自定義html5播放器的示例代碼》相關的同類信息!
  • 本頁收集關于從零實現(xiàn)一個自定義html5播放器的示例代碼的相關信息資訊供網民參考!
  • 推薦文章