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));