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

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

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

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

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

分別實現(xiàn)播放，暫停，聲音加減，播放速度加減，拖拽快進，點擊快進等函數(shù)

事件綁定，將頁面元素綁定相應(yīng)觸發(fā)事件

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

    
    
    

      

       

      
      ?
      
      
      ? 10s
      25s ?
    

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

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

分別給頁面元素建立事件監(jiān)聽，并綁定其實現(xiàn)函數(shù)即可。此處有兩處需注意:

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

mousemove的回調(diào)函數(shù)本應(yīng)如下:

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

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

filledflag && handlefilled(e)

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

視頻播放與暫停轉(zhuǎn)換函數(shù)

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

判斷當前視頻的播放狀態(tài)，播放時則變?yōu)闀和顟B(tài)、暫停則變?yōu)椴シ艩顟B(tài)；分別調(diào)用video.play()和video.pause()方法，在此使用video[play]()和video[pause]()是因為，使用中括號能夠動態(tài)的傳遞變量進去，而使用點運算符不能傳參。

播放按鈕狀態(tài)顯示函數(shù)

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

如果視頻是暫停狀態(tài)就顯示播放鍵"?"，否則顯示暫定鍵"??"

音量大小和播放速度控制函數(shù)

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

在頁面HTML中是這樣設(shè)置的：

分別給每一個范圍設(shè)置了一個name屬性，代表該范圍所表示的內(nèi)容，同時也是需控制的方法名，因此我們通過設(shè)置video[e.target.name] = e.target.value;就可以分別改變視頻的音量和播放速度，此處e.target就是這兩個input元素，也等同于this。

快進快退函數(shù)

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

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

? 10s
25s ?

分別設(shè)置了data-skip屬性，這樣就可以通過.dataset.skip獲取到該屬性的值，也即this.dataset.skip，但該值是字符串類型，需要用parseFloat()講其轉(zhuǎn)換為float數(shù)值型，分別將時間加減當前視頻的播放事件就可以做到快進快退。

進度條隨播放時間而顯示的函數(shù)

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

通過視頻當前的播放時間除以視頻的總時長*100，就是當前視頻播放的百分比，將該值使用模版字符串的方式傳給flexBasis樣式中即可，在CSS中該樣式名為flex-basis,但是謹記在js中需要多單詞的CSS屬性需要變?yōu)轳劮迨降拿诙€單詞大寫，切不可用連字符連接。

拖拽進度條定點觀看的函數(shù)

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

我們需要點擊進度條時調(diào)整播放進度，那么我們改變進度，或者說寬度就需要得到鼠標點擊的位置，這可以通過事件對象的 offsetX 屬性來找到，該屬性代表鼠標點擊位置相對于該元素的水平偏移。得到偏移之后計算出該位置的百分比，那么也就知道了進度的百分比。

Github Source Code

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學習，持續(xù)輸出全棧技術(shù)社群
業(yè)界榮譽：IT界的邏輯思維
文化：輸出是最好的學習方式
官方公眾號：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術(shù)交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學習筆記