这是我在github 上发现的一个原生js挑战项目，由于是js小白，希望通过这次的项目加深对js的理解

第十一天是实现一个播放器，可以播放、暂停、调整音量、设置播放速度、调整进度以及全屏

效果图

HTML代码

 <div class="player">
     <video class="player__video viewer" src="test.mp4"></video>

     <div class="player__controls">
       <div class="progress">
        <div class="progress__filled"></div>
       </div>
       <button class="player__button toggle" title="Toggle Play">►</button>
       <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
       <button data-skip="-10" class="player__button">« 10s</button>
       <button data-skip="25" class="player__button">25s »</button>
       <button  class="player__button" id="full">全屏</button>
     </div>
   </div>

播放和暂停，以及图标的改变

function togglePlay() {
    const method = video.paused ? 'play' : 'pause';
    video[method]();
}

function updateButton() {
    const icon = this.paused ? '►' : '❚ ❚';
    console.log(icon);
    toggle.textContent = icon;
}

全屏

function fullScreen(e){
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
    } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
    } else if (i.msRequestFullscreen) {
        video.msRequestFullscreen();
    }
}

但是我这个全屏实现的有些问题，就是进入全屏之后只有按ESC才能退出，无论如何移动鼠标，下面的控制条都不会出现，以后有时间的时候我再继续改进

实现进度的跳转

function handleProgress() {
    const percent = (video.currentTime / video.duration) * 100;
    progressBar.style.flexBasis = `${percent}%`;
}

function scrub(e) {
    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
    video.currentTime = scrubTime;
}

handleProgress是实现进度条效果的

声音和速率

function handleRangeUpdate() {
    video[this.name] = this.value;
}

video的volume和playbackRate分别控制声音和播放速率，通过获取进度条的值来改变声音和播放速率

---

以上就是我在day11中学到的知识，这里我同样参考了soyaine的中文指南，感谢