标题：【原生javascript项目】视频播放器11日期：2022-01-1813:58:54标签：原生javascript项目类别：30个原生javascript项目作者：?Iaine简介:30DayChallenge是由WesBos设计的为期30天的原生js编程挑战。项目免费提供30个视频教程，30个挑战的入门文档，以及30个挑战方案的源码。本项目是第11天的“自定义视频播放器”项目。玩得开心网站！?(^?^*)网页效果：https://janice143.github.io/v...项目描述在js中使用video标签和一些div标签设置视频的播放控件，包括pause/play、声音调整、视频进度调整、视频播放速率、跳转/后退。项目焦点视频对象的各种属性、方法和事件pausedplay()pause()currentTimevolumeplaybackRateHTMLDOMoffsetWidth属性获取元素的宽度，包括padding和border：HTML5data-*自定义属性this.dataset.data-projectprocesshtmlpartvideotag标签视频文件div标签和button标签实现一些视频控件，类名.controllers.progress进度条，.progress_filled进度条填充颜色.player_button播放按钮声音滑块播放速度滑块Forward/Back按钮Js部分获取标签编写自定义函数播放按钮constmethod=video.paused？'播放'：'暂停'；视频[方法]（）；更新播放按钮consticon=this.paused?'?':'??';toggle.textContent=icon;forward/backwardvideo.currentTime+=parseFloat(this.dataset.skip);更新滑块值video[this.name]=this.value;updateprogressbar(fillcolor)constpercent=(video.currentTime/video.duration)*100;progressBar.style.flexBasis=`${percent}%`;鼠标移动进度条constscrubTime=(e.offsetX/progress.offsetWidth)*video.duration;video.currentTime=scrubTime;添加监控事件视频点击、播放、暂停、timeupdata事件播放按钮、点击事件前进后退按钮滑块变化、mousemove事件进度条点击、mousemove、mousedown、mouseup事件部分flex容器的CSSItem属性flex-basis:mainaxisitem占用的空间(mainsize)flexattributeselectorinput[type=range]item知识点data-*自定义数据属性，可通过所属元素的HTMLElement接口访问，具体为HTMLElement.dataset、HTMLElement.dataset["testValue"]属性访问注意*：data后面的命名规则-名称不能以xml开头，不管这些字母是大写还是小写；该名称不能包含任何分号；名称中不能包含A到Z的大写字母。数据后面有一个-，比如data-test-value，可以传入HTMLElement.dataset.testValue（或HTMLElement.dataset["testValue"]），任何破折号都将被下一个字母的大写（驼峰式）代替。JS30第11期项目已经圆满完成，感谢阅读，如有任何问题，请联系我1803105538@qq.com。
