JavaScript 30 Day -- 10 自定义视频播放器

可以控制视频的播放速度和音量大小，可以快进/快退。

为 video 元素添加自定义样式的播放控制面板
可滑动调节音量、播放速度
可通过按钮快进、回退
可点击视频画面或按钮播放或暂停视频播放
可点击或拖动进度条选择视频播放进度、
video 对象的各种属性、方法和事件
paused  //检查视频是否已暂停
play() //播放
pause()  //暂停
currentTime  //音频/视频播放的当前位置

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