JavaScript30 Day 11

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

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

效果图

HTML代码

 

     

     

       

        

       
       ►
       
       
       « 10s
       25s »
       全屏
     
   

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

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的中文指南，感谢