摘要：自定義視頻播放器微信公眾號開發企業級產品全棧開發速成周末班首期班號正式開班，歡迎搶座作者簡介是推出的一個天挑戰。

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

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

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

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

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

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

HTML 元素中，video 標簽是我們的視頻，而下面的 player__controls 就是我們自己的控制面板

    
    
    

      

       

      
      ?
      
      
      ? 10s
      25s ?
    

開始之前我們先把所有需要用到的元素節點先取到：

/* 獲取元素  */
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);

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

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

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中是這樣設置的：

分別給每一個范圍設置了一個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代碼如下:

? 10s
25s ?

分別設置了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
全棧部落完整系列教程：全棧部落完整電子書學習筆記