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();    // }}//控制暂停和播放的iconfunction 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));