GitHub链接：https://github.com/cyjsysu/H5_video_player1。为什么我上学期（2019年底）写了玩家的数据库作业，本来是为了做一个简单的视频网站。但是看了网上的一些相关内容，感觉自己不懂JS，无法自定义样式。所以我放弃了原来的计划，改做音乐网站。现在有了一定的JS基础，又把之前的思路拿出来了。本文相当于粗略的实验报告。（小项目中使用的图标均来自百度图片）2.效果图3.自定义控件如果在html中设置video的controls属性，浏览器会显示其自带的对应控件。一开始以为自定义控件是通过设置controls属性来实现的。但是后来看了B站播放页面的HTML，发现B站的控件都是DIV标签。后来才知道这些控件是独立于HTML中的video标签的，只是通过JS来控制video。4.视频播放和暂停4.1需要点击播放窗口和播放按钮来控制视频的播放或在暂停状态下暂停播放按钮图标，否则为两条竖线（Video.paused）到相反的状态，并改变图标。Video对象属性请参考https://www.runoob.com/jsref/dom-obj-video.html。这些属性在这个小项目中会用的比较多。functionplayOrPause(){varoPlayer=document.getElementById("player");//videoletoPlayerBtn=document.getElementById("playerBtn");//播放按钮if(oPlayer.paused==true){oPlayer.play();oPlayerBtn.src="./img/pause1.png";}else{oPlayer.pause();oPlayerBtn.src="./img/on1.png";}}5.进度条5.1要求通过进度条实时显示当前视频的播放进度和缓冲进度播放进度为蓝色，在最上面；缓冲进度为浅灰色，在底部（模仿B站）。可以通过拖动进度条来调整播放位置。播放时间显示在进度条旁边。5.2实现5.2.1进度条的显示。之前看过一篇类似的博客（基本上只做了播放器控件的外观）。文章中的进度条是一个标签，导致我误导了一段时间。后来又看了看B站的HTML才找到方向。这里的自定义进度条其实就是一个div。呈现条是因为属性height设置的很小，背景色设置为进度条。我分别写了三个这样的div。一个是深灰色的，作为进度条的背景，另外两个div在里面分别设置完整。另外两个中的一个是浅灰色的，作为缓冲条；另一个是蓝色的，作为播放进度条。另外，在播放进度条的最后设置一个div作为拖拽按钮。
