首頁 >web前端 >H5教程 >自訂實作可以播放暫停、進度拖曳、音量控制及全螢幕的H5播放器

自訂實作可以播放暫停、進度拖曳、音量控制及全螢幕的H5播放器

php中世界最好的语言原創: 2018-03-26 17:43:409387瀏覽

這次帶給大家自訂實作可以播放暫停、進度拖曳、音量控制及全螢幕的H5播放器，自訂實作可以播放暫停、進度拖曳、音量控制及全螢幕的H5播放器的注意事項有哪些，下面就是實戰案例，一起來看一下。

本次的分享是一個基於HTML5標籤實作的自訂影片播放器。其中實現了播放暫停、進度拖曳、音量控制及全螢幕等功能。

效果預覽

點我查看原始碼倉庫。

核心思路

我相信一定會有些沒有接觸過製作自訂播放器的童鞋對於標籤的認識會停留在此。

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

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

隱藏控制條並模擬

那麼實現一個自訂功能的播放器關鍵就在於，我們不使用原生的控制器，將其隱藏掉之後，在下方同樣的位置透過html、css來模擬所需樣式，同時透過js來呼叫vedio標籤所暴露給我們的介面函數及屬性，以及偵測使用者的操作行為來同步的模擬UI與影片播放資料的相應變化。

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

myVid=document.getElementById("video1");
//控制视频开关
myVid.play() //播放
myVid.pause() //暂停
//模拟视频进度条
myVid.currentTime=5; //返回或设定当前视频播放位置
myVid.duration // 返回视频总长度
//模拟视频音量
myVid.volume //音量
//获取视频当前状态后判断何时从loading切换为播放
myVid.readyState
//0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
//1 = HAVE_METADATA - 关于音频/视频就绪的元数据
//2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
//3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
//4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

在所有實作中的關鍵點，較為繁瑣的是對於進度條的模擬。其中使用了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 = $(&#39;蓝色拖拽条&#39;).width() / processWidth * duration //拖拽后计算视频的正确播放位置
})

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

透過查詢視訊串流狀態控製播放前的載入動畫

function ifState() {
    var state = videoSource.readyState
    if(state === 4) { //状态为4即可播放
        videoPlayer()
    } else {
        $(&#39;.play-sym-wrapper&#39;).remove()
        $(&#39;body&#39;).append(&#39;<p class="play-sym-wrapper"><img class="play-sym" src="./images/loading.gif"></p>')
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！