实现H5视频播放器的部分播放控件

GitHub链接: https://github.com/cyjsysu/H5_video_player

1.为什么写播放器

上学期（2019年末）数据库大作业原本是想做一个简易的视频网站的。但上网看了一些相关内容后，当时觉得自己还不会JS无法自定义样式。于是放弃原计划，改做音乐网站。现在有了一些JS基础，所以又把以前的想法拿了出来。这篇文章相当于一份简陋的实验报告。
（小项目中用到的图标全来自百度图片）

2.效果图

3.自定义控件

如果在HTML中设置video的controls属性，浏览器会显示自带的相应控件。

<video controls="controls" />

一开始我以为自定义控件是通过设置controls属性来实现的。但后来我看了B站播放页面的HTML，发现B站的控件都是DIV标签。然后我才知道这些控件在HTML里是独立于video标签的，只是通过JS控制视频而已。

4.视频播放和暂停

4.1要求

• 点击播放窗口和播放键都能控制视频的播放或暂停
• 暂停状态下播放按键图标为三角形，否则是两条竖杆

4.2实现

每次点击时根据当前视频的播放状态(Video.paused)切换到相反状态，并更改图标即可。
Video对象属性可参考https://www.runoob.com/jsref/dom-obj-video.html。这些属性在这个小项目里会用得比较多。

function playOrPause(){
   
    var oPlayer = document.getElementById("player");  //video
    let oPlayerBtn = 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作为播放进度条末端的拖动按钮。

<div id="controlBar">
  <div id="allBar">
    <div