JavaScript 30 Day -- 10 自定義視頻播放器

實現效果：

可以控制視頻的播放速度和音量大小，可以快進/快退。

關鍵點：

爲 video 元素添加自定義樣式的播放控制面板
    可滑動調節音量、播放速度
    可通過按鈕快進、回退
    可點擊視頻畫面或按鈕播放或暫停視頻播放
    可點擊或拖動進度條選擇視頻播放進度、
video 對象的各種屬性、方法和事件
    paused  //檢查視頻是否已暫停
    play() //播放
    pause()  //暫停
    currentTime  //音頻/視頻播放的當前位置

javascript

var player = document.querySelector('.player');
var video = document.querySelector('.viewer');
var progress = document.querySelector('.progress');
var progressBar = document.querySelector('.progress__filled');
var toggle = document.querySelector('.toggle');
var skipButtons = document.querySelectorAll('[data-skip]');
var ranges = document.querySelectorAll('.player__slider');

// console.log(video);
// console.log(video.paused);

//控制暫停和播放
function togglePlay(){
    //方法一
    var method = video.paused ? 'play' : "pause";
    video[method]();    
    //方法二
    // if(video.paused){
    //  video.play();
    // }else{
    //  video.pause();
    // }
}
//控制暫停和播放的icon
function updataButton(){
    toggle.innerHTML = video.paused ? '►' : '❚ ❚';
    // toggle.textContent = video.paused ? '►' : '❚ ❚';
}
//快進/快退
function skip(){
    // console.log(this.dataset.skip);
    video.currentTime += parseFloat(this.dataset.skip);
}
//控制進度條
function scrub(e){
    var scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
    // console.log(video.duration + '---------1');
    // console.log(progress.offsetWidth + '--------2');
    // console.log(scrubTime + '------------3');
    // console.log(e.offsetX + '------4');
    // console.log((e.offsetX / progress.offsetWidth));
    video.currentTime = scrubTime;
}
//控制播放速度
function handleRangeUpdate(){
    // console.log(this.value);
    // setProperty(this.name,this.value);
    video[this.name] = this.value;
}
//控制播放的進度
function handleProgress(){
    var perent = (video.currentTime / video.duration) * 100;
    progressBar.style.flexBasis = `${perent}%`;
}

video.addEventListener('click',togglePlay);

progress.addEventListener('click',scrub);

video.addEventListener('play',updataButton);
video.addEventListener('pause',updataButton);

video.addEventListener('timeupdate',handleProgress);

toggle.addEventListener('click',togglePlay);

skipButtons.forEach(button => button.addEventListener('click',skip));

ranges.forEach(button => button.addEventListener("change",handleRangeUpdate));
ranges.forEach(button => button.addEventListener("mousemove",handleRangeUpdate));