從零實現一個自定義html5播放器的示例代碼

本次的分享是一個基於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 = 0var 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 //拖拽後計算視頻的正確播放位置})

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

function ifState() { var state = videoSource.readyState if(state === 4) { //狀態為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中點擊播放，其中被迫有很多零碎的需求，比如點擊暫停，保存音量等等。整個視頻播放器的基礎功能實現的還算完善。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。