在开始之前，我们先获取所有需要使用的元素节点：/*Getelements*/constplayer=document.querySelector('.player');constvideo=player.querySelector('.viewer');constprogress=player.querySelector('.progress');constprogressBar=player.querySelector('.progress__filled');consttoggle=player.querySelector('.toggle');constskipButtons=播放器。querySelectorAll('[data-skip]');constranges=player.querySelectorAll('.player__slider');事件监听video.addEventListener('click',videoplay);//video.addEventListener('click',handleToggle);video.addEventListener('play',handleToggle);video.addEventListener('pause',handleToggle);video.addEventListener('timeupdate',filledUpdate);切换。addEventListener('click',videoplay);toggle.addEventListener('click',handleToggle);letmouseflag=false;player__slider.forEach(item=>item.addEventListener('click',handlePlayerSlider));player__slider.forEach(item=>item.addEventListener('mousedown',()=>mouseflag=true));player__slider.forEach(item=>item.addEventListener('mouseup',()=>mouseflag=false));player__slider.forEach(item=>item.addEventListener('mousemove',(e)=>mouseflag&&handlePlayerSlider(e)));skip.forEach(item=>item.addEventListener('click',handleSkip));letfilledflag=false;progressBar.addEventListener('click',handlefilled);progressBar.addEventListener('mousemove',(e)=>filledflag&&handlefilled(e));progressBar.addEventListener('mousedown',()=>filledflag=true);progressBar.addEventListener('mouseup',()=>填充标志=假）；为页面元素创建事件监听器并绑定其实现函数这里需要注意两点：有点击拖动实现进度条，不能只绑定mousemove事件，因为鼠标滑过会触发该事件，需要判断是否是鼠标被点击，这里可以设置一个Boolean类型的flag标记鼠标是否按下，分别绑定mouseup事件和mousedown事件，并设置flag的值，这样先判断flag的值在mousemove事件的回调函数中，如果为true，则继续触发该事件。mousemove的回调函数应该如下：{if(filledflag){handlefilled(e);}}但是这样还是不够简洁，我们改进这段代码如下：filledflag&&handlefilled(e)使用&&判断左右变量，只有两者都为真才判断整体表达式为真，判断为判断时从左到右。如果左边的变量为假，右边的表达式将不会被执行。函数实现视频播放和暂停转换功能functionvideoplay(e){constmethod=video.paused?'播放'：'暂停';video[method]();}判断当前视频的播放状态，在播放状态中变为暂停状态，暂停状态变为播放状态；分别调用video.play()和video.pause()方法，这里使用video[play]()和video[pause]()，因为使用方括号可以动态传递变量进去，点运算符不能传递参数。播放按钮状态显示函数functionhandleToggle(){leticon=video.paused?'?'：'??'；toggle.textContent=icon;}如果视频暂停，会显示播放按钮'?'，否则会暂时显示Key'??'音量和播放速度控制功能functionhandlePlayerSlider(e){video[e.target.name]=e.target.value;}在页面HTML中这样设置：设置名称每个范围的属性，代表范围的内容，还有要控制的方法名，所以我们设置video[e.target.name]=e.target.value;可以分别改变视频的音量和播放速度，其中e.target是两个input元素，也相当于这个。快进快退函数functionhandleSkip(e){letskiptime=parseFloat(this.dataset.skip);video.currentTime+=skiptime;}页面中快进快退的HTML代码如下：?10s25s?分别设置data-skip属性，这样就可以pass.dataset了。skip获取该属性的值，即this.dataset.skip，但是该值是字符串类型，需要用parseFloat()转换成float值，播放时可以加减时间当前视频的事件。快进和快退。FunctionfilledUpdate(){letpart=parseFloat(video.currentTime/video.duration)*100;filled.style.flexBasis=`${portion}%`;}通过当前播放视频的时间除以视频总时长*100，也就是当前视频播放的百分比。使用模板字符串将此值传递给flexBasis样式。样式在css中叫flex-basis，但是记得在js中使用需要多个单词的css属性，需要用驼峰命名，第二个单词大写，不能使用连字符。函数handlefilled(e){让pice=(e.offsetX/progressBar.offsetWidth)*video.duration;video.currentTime=pice;}我们需要在点击进度条的时候调整播放进度，那么我们要改变进度，或者宽度，需要获取鼠标点击的位置，可以通过offsetX找到事件对象的属性，表示鼠标点击位置相对于元素的水平偏移量。得到offset后，计算位置的百分比，就知道进度的百分比了。源码下载Github源码社区品牌：从零到一全栈部落定位：寻找共同兴趣，共同学习，持续输出全栈技术社区行业荣誉：IT行业逻辑思维文化：输出是最好的方式tolearnOfficial公众号：全栈部落社区发起人：春哥（创始人从零到一，交流微信：liyc1215）技术交流社区：全栈部落BBS全栈部落全系列教程：全栈部落完整电子书学习笔记关注全栈部落官方公众号，每晚10点领取系列原创技术推送