寫在最前

本次的分享是一個基于HTML5標(biāo)簽實現(xiàn)的一個自定義視頻播放器。其中實現(xiàn)了播放暫停、進度拖拽、音量控制及全屏等功能。
歡迎關(guān)注我的博客，不定期更新中——

效果預(yù)覽

點我查看源碼倉庫。

核心思路

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

<video controls="controls" autoplay="autoplay"><source src="movie.ogg" type="video/ogg" /> </video>復(fù)制代碼

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

隱藏控制條并模擬

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

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

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

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

拖拽代碼思路

//核心代碼示例 var dragDis = 0 var processWidth = xxx //拖拽條總長 $('body').mousedown(function(e) {startX = e.clientXdragDis = startX - leftInit //leftInit為拖拽條起始點距屏幕左側(cè)的距離dragTarget.css({ //拖拽按鈕left: dragDis})dragProcess.css({ //進度條(藍(lán)色進度條)width: dragDis}) // 令進度條和拖拽按鈕渲染在同一位置videoSource.pause() }).mousemove(function(e) {moveX = e.clientXdisX = moveX - startXvar left = dragDis + disXif(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 //拖拽后計算視頻的正確播放位置 })復(fù)制代碼

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

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

function ifState() {var state = videoSource.readyStateif(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)復(fù)制代碼

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

最后

慣例po作者的博客，不定時更新中——
有問題歡迎在issues下交流，捂臉求star=。=

總結(jié)

以上是生活随笔為你收集整理的从零实现一个自定义 HTML5 播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。