Day11 - 自定義視頻播放器

Day11 - 自定義視頻播放器

(Node+Vue+微信公衆號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座)

做者：©liyuechun
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。如今你看到的是這系列指南的第 11 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

項目效果

第十一天是要作一個自定義的視頻播放器，在具備基本樣式的前提下，實現視頻的播放，暫停，進度條拖拽，音量加減，播放速度加減，快進快退的功能。

實現思路

1. 首先須要分別將變量綁定至頁面上的元素

2. 分別實現播放，暫停，聲音加減，播放速度加減，拖拽快進，點擊快進等函數

3. 事件綁定，將頁面元素綁定相應觸發事件

變量綁定

HTML 元素中，video 標籤是咱們的視頻，而下面的 player__controls 就是咱們本身的控制面板

<div class="player">
    <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
    
    <div class="player__controls">
      <div class="progress">
       <div class="progress__filled"></div>
      </div>
      <button class="player__button toggle" title="Toggle Play">►</button>
      <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
      <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
      <button data-skip="-10" class="player__button">« 10s</button>
      <button data-skip="25" class="player__button">25s »</button>
    </div>
</div>

開始以前咱們先把全部須要用到的元素節點先取到：

/* 獲取元素  */
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelectorAll('[data-skip]');
const ranges = player.querySelectorAll('.player__slider');

事件監聽

<!--點擊播放-->
video.addEventListener('click',videoplay);
<!--點擊或者播放時改變播放和暫停狀態的圖標-->
// video.addEventListener('click',handleToggle);
video.addEventListener('play',handleToggle);
<!--暫停時改變圖標狀態-->
video.addEventListener('pause',handleToggle);
<!--時間軸更新-->
video.addEventListener('timeupdate',filledUpdate);

<!--點擊播放或者暫停的圖標事件的監聽-->
toggle.addEventListener('click',videoplay);
toggle.addEventListener('click',handleToggle);

<!--音量和播放速度滑動條事件監聽-->
let mouseflag = false;
player__slider.forEach(item => item.addEventListener('click',handlePlayerSlider));
player__slider.forEach(item => item.addEventListener('mousedown',() => mouseflag = true));
player__slider.forEach(item => item.addEventListener('mouseup',() => mouseflag = false));
player__slider.forEach(item => item.addEventListener('mousemove',(e) => mouseflag && handlePlayerSlider(e)));

<!--快進按鈕事件監聽-->
skip.forEach(item => item.addEventListener('click',handleSkip));


<!--播放事件軸拖拽監聽-->
let filledflag = false;
progressBar.addEventListener('click',handlefilled);
progressBar.addEventListener('mousemove',(e) => filledflag && handlefilled(e));
progressBar.addEventListener('mousedown',() => filledflag = true);
progressBar.addEventListener('mouseup',() => filledflag = false);

分別給頁面元素創建事件監聽，並綁定其實現函數便可。此處有兩處需注意:

1. 有實現進度條的點擊拖拽，不能僅綁定mousemove事件，由於這樣鼠標在上面滑過就會出發事件，還需判斷鼠標是否點下，此處可設立一個布爾類型的flag標誌鼠標是否按下，並分別綁定mouseup事件和mousedown事件，設置此flag的值，這樣在mousemove事件的回調函數中先判斷此flag的值，若爲真是才繼續觸發事件。

2. mousemove的回調函數本應以下:

{
    if(filledflag){
        handlefilled(e);
    }
｝

但這樣不夠簡潔，咱們改進此代碼以下：

filledflag && handlefilled(e)

使用&&判斷左右兩變量，只有兩個都爲真的時候總體表達式才爲真，且在判斷時從左向右依次判斷，若左變量就爲假，就不會再去執行右邊的表達式。

函數實現

• 視頻播放與暫停轉換函數

function videoplay(e){
    const method = video.paused ? 'play' : 'pause';
    video[method]();
}

判斷當前視頻的播放狀態，播放時則變爲暫停狀態、暫停則變爲播放狀態；分別調用video.play()和video.pause()方法，在此使用video[play]()和video[pause]()是由於，使用中括號可以動態的傳遞變量進去，而使用點運算符不能傳參。

• 播放按鈕狀態顯示函數

function handleToggle(){
    let icon = video.paused ? '►' : '❚ ❚';
    toggle.textContent = icon;
}

若是視頻是暫停狀態就顯示播放鍵'►'，不然顯示暫定鍵'❚❚'

• 音量大小和播放速度控制函數

function handlePlayerSlider(e){
    video[e.target.name] = e.target.value;
}

在頁面HTML中是這樣設置的：

<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">

分別給每個範圍設置了一個name屬性，表明該範圍所表示的內容，同時也是需控制的方法名，所以咱們經過設置video[e.target.name] = e.target.value;就能夠分別改變視頻的音量和播放速度，此處e.target就是這兩個input元素，也等同於this。

• 快進快退函數

function handleSkip(e){
    let skiptime = parseFloat(this.dataset.skip);
    video.currentTime += skiptime;
}

頁面中快進快退的HTML代碼以下:

<button data-skip="-10" class="player__button">« 10s</button>
<button data-skip="25" class="player__button">25s »</button>

分別設置了data-skip屬性，這樣就能夠經過.dataset.skip獲取到該屬性的值，也即this.dataset.skip，但該值是字符串類型，須要用parseFloat()講其轉換爲float數值型，分別將時間加減當前視頻的播放事件就能夠作到快進快退。

• 進度條隨播放時間而顯示的函數

function filledUpdate(){
    let portion = parseFloat(video.currentTime / video.duration) * 100;
    filled.style.flexBasis = `${portion}%`;
}

經過視頻當前的播放時間除以視頻的總時長*100，就是當前視頻播放的百分比，將該值使用模版字符串的方式傳給flexBasis樣式中便可，在CSS中該樣式名爲flex-basis,可是謹記在js中須要多單詞的CSS屬性須要變爲駝峯式的命名，第二個單詞大寫，切不可用連字符鏈接。

• 拖拽進度條定點觀看的函數

function handlefilled(e){    
    let pice = (e.offsetX / progressBar.offsetWidth) * video.duration;
    video.currentTime = pice;
}

咱們須要點擊進度條時調整播放進度，那麼咱們改變進度，或者說寬度就須要獲得鼠標點擊的位置，這能夠經過事件對象的 offsetX 屬性來找到，該屬性表明鼠標點擊位置相對於該元素的水平偏移。獲得偏移以後計算出該位置的百分比，那麼也就知道了進度的百分比。

源碼下載

Github Source Code

社羣品牌：從零到壹全棧部落

定位：尋找共好，共同窗習，持續輸出全棧技術社羣

業界榮譽：IT界的邏輯思惟

文化：輸出是最好的學習方式

官方公衆號：全棧部落

社羣發起人：春哥(從零到壹創始人，交流微信：liyc1215)

技術交流社區：全棧部落BBS

全棧部落完整系列教程：全棧部落完整電子書學習筆記

關注全棧部落官方公衆號，每晚十點接收系列原創技術推送