寫在最前
本次的分享是一個(gè)基于HTML5<vedio>標(biāo)簽實(shí)現(xiàn)的一個(gè)自定義視頻播放器掠兄。其中實(shí)現(xiàn)了播放暫停、進(jìn)度拖拽、音量控制及全屏等功能麦乞。
歡迎關(guān)注我的博客蕴茴，不定期更新中——
效果預(yù)覽
點(diǎn)我查看源碼倉庫。
核心思路
我相信一定會有些沒有接觸過制作自定義播放器的童鞋對于<vedio>標(biāo)簽的認(rèn)識會停留在此姐直。
<video controls="controls" autoplay="autoplay">
<source src="movie.ogg" type="video/ogg" />
</video>
其中controls屬性經(jīng)過設(shè)定倦淀，會在界面中顯示一個(gè)瀏覽器自帶的控制條。如果對于UI沒有要求的需求声畏，其內(nèi)置控制器已經(jīng)可以滿足大部分的需求撞叽。當(dāng)然了如果是這樣你們也不會看到這篇分享了=。=
隱藏控制條并模擬
那么實(shí)現(xiàn)一個(gè)自定義功能的播放器關(guān)鍵就在于插龄，我們不使用原生的控制器愿棋，將其隱藏掉之后，在下方同樣的位置通過html均牢、css來模擬所需樣式糠雨，同時(shí)通過js來調(diào)用vedio標(biāo)簽所暴露給我們的接口函數(shù)及屬性，以及檢測用戶的操作行為來同步的模擬UI與視頻播放數(shù)據(jù)的相應(yīng)變化徘跪。
幾個(gè)核心函數(shù)及屬性的用法
myVid=document.getElementById("video1");
//控制視頻開關(guān)
myVid.play() //播放
myVid.pause() //暫停
//模擬視頻進(jìn)度條
myVid.currentTime=5; //返回或設(shè)定當(dāng)前視頻播放位置
myVid.duration // 返回視頻總長度
//模擬視頻音量
myVid.volume //音量
//獲取視頻當(dāng)前狀態(tài)后判斷何時(shí)從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ù)足以開始播放
在所有實(shí)現(xiàn)中的關(guān)鍵點(diǎn)，較為繁瑣的是對于進(jìn)度條的模擬真椿。其中使用了video標(biāo)簽中的currentTime以及duration屬性鹃答，通過當(dāng)前播放時(shí)間與總播放時(shí)間的比值，就可以計(jì)算出進(jìn)度條相對于總長的位置突硝。同時(shí)用戶通過拖拽進(jìn)度條所最后設(shè)置的長度也可以用來反向推算出此時(shí)視頻應(yīng)該播放的位置测摔。
拖拽代碼思路
//核心代碼示例
var dragDis = 0
var processWidth = xxx //拖拽條總長
$('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)度部分通過不同元素進(jìn)行判斷是進(jìn)行進(jìn)度還是音量的拖拽控制解恰。
通過查詢視頻流狀態(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"></div>')
//添加loading動畫
setTimeout(ifState, 10)
}
}
setTimeout(ifState, 10)
核心的控制部分已經(jīng)說完了锋八，有興趣的同學(xué)可以去源碼的html中點(diǎn)擊播放，其中被迫有很多零碎的需求护盈，比如點(diǎn)擊暫停挟纱，保存音量等等。整個(gè)視頻播放器的基礎(chǔ)功能實(shí)現(xiàn)的還算完善腐宋。
最后
慣例po作者的博客紊服，不定時(shí)更新中——
有問題歡迎在issues下交流，捂臉求star=胸竞。=
