參考資料：
Alex老師的教學
PJCHENder筆記
一起挑戰 JavaScript 30 吧！

自訂影片播放器。

如果沒有特殊的畫面要求，可以使用最簡單用法，HTML的<video>加上 controls，就會自動產生控制列。

<video class="player__video viewer" src="影片位置" controls>
</video>

但這個題目就是用來練習的，讓我們繼續看下去。

先放入節點

const player = document.querySelector('.player'); 
const video = player.querySelector('.viewer'); //video
const progress = player.querySelector('.progress'); //進度條-影片
const progressBar = player.querySelector('.progress__filled'); //影片進度條進度
const toggle = player.querySelector('.toggle'); //開始按鈕
const skipButtons = player.querySelectorAll('.skip'); //時間前進後退按鈕
const ranges = player.querySelectorAll('.player__slider'); //進度條-聲音,速度

開始和停止

let togglePlay = () => {
    // video.play();//開始
    // video.pause();//暫停

    // 先確認是play還是pause
    const method = video.paused ? 'play' : 'pause';
    video[method](); //使用中括號取物件屬性，並直接呼叫

    // 效果和以下相同
    // if (video.paused) {
    //     video.play();
    // } else {
    //     video.pause();
    // }
};
video.addEventListener('click', togglePlay); //點擊影片本身
toggle.addEventListener('click', togglePlay); //點擊按鈕

按鈕要跟隨影片狀態

// 跟隨影片啟動或暫停的按鈕圖案
function updateBtn() {
    const icon = this.paused ? '►' : '❚ ❚';
    toggle.textContent = icon;
}
video.addEventListener('play', updateBtn);
video.addEventListener('pause', updateBtn);

影片進度條

let processHandler = () => {
    // console.log(video.currentTime);//以秒為單位回傳當前播放時間
    // console.log(video.duration);//以秒為單位的總長度
    const percent = (video.currentTime / video.duration) * 100;
    // console.log(percent);
    progressBar.style.flexBasis = `${percent}%`;
    // flex-basis
};
video.addEventListener('timeupdate', processHandler);
//當 video.currentTime 改變時觸發

點擊改變影片進度

let progressChang = e => {
    const changeTime = (e.offsetX / progress.offsetWidth) * video.duration;
    // console.log(e.offsetX); //在x軸上的移動
    // console.log(progress.offsetWidth);//進度條寬度
    // console.log(changeTime);
    video.currentTime = changeTime;
};
// 點擊改變進度條
progress.addEventListener('click', progressChang);
// 拖曳改變進度條
let mouseDown = false;
progress.addEventListener('mousemove', e => {
    mouseDown && progressChang(e);
});
progress.addEventListener('mousedown', () => {
    mouseDown = true;
});
progress.addEventListener('mouseup', () => {
    mouseDown = false;
});

快轉或後退

function skip() {
    video.currentTime += parseFloat(this.dataset.skip);
}
skipButtons.forEach(item => {
     item.addEventListener('click', skip);
});

音量和播放速度

function rangeUpdateHandler(e) {
    video[this.name] = this.value;
    //  video[e.target.name] = e.target.value;//這樣寫也一樣
    // console.log(this.value);
    // console.log(e.target.value);
}
ranges.forEach(item => {
    item.addEventListener('input', rangeUpdateHandler);
});
// 當元素的value改變，input事件都會被觸發

連結