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

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

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

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

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

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

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

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

    
    
    

      

       

      
      ?
      
      
      ? 10s
      25s ?
    

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

/* 獲取元素  */
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)聽，并綁定其實(shí)現(xiàn)函數(shù)即可。此處有兩處需注意:

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

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

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

但這樣不夠簡(jiǎn)潔，我們改進(jìn)此代碼如下：

filledflag && handlefilled(e)

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

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

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

判斷當(dāng)前視頻的播放狀態(tài)，播放時(shí)則變?yōu)闀和顟B(tài)、暫停則變?yōu)椴シ艩顟B(tài)；分別調(diào)用video.play()和video.pause()方法，在此使用video[play]()和video[pause]()是因?yàn)椋褂弥欣ㄌ?hào)能夠動(dòng)態(tài)的傳遞變量進(jìn)去，而使用點(diǎn)運(yùn)算符不能傳參。

播放按鈕狀態(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è)置的：

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

快進(jìn)快退函數(shù)

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

頁面中快進(jìn)快退的HTML代碼如下:

? 10s
25s ?

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

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

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

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

拖拽進(jìn)度條定點(diǎn)觀看的函數(shù)

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

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

Github Source Code

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