js实现视频播放器

前言

之前使用js实现过音乐播放控制条，最终存在几点不如人意的地方，具体的几点如下：

1、存在拖动按钮不流畅
2、时间处理的问题，时间点在播放过程中存在重复的问题

本篇文章，采用input range以及progress来实现进度，避免在js实现音乐播放中使用offsetX来确定具体的点击的位置，使用另一种方式来解决js实现音乐播放中产生的问题。
本次实践初衷有两个：

1、js实现音乐播放遗留的问题
2、如何改变range以及progress的样式
3、如何做到视频缓冲的

基于此同时本次的实现主要想要学习的知识点如下：

1、通过range以及progress来实现进度，改变浏览器range与progress的默认样式
2、视频缓冲

功能

本次实现是video，具体的实现功能如下：

1、基本的播放暂停功能
2、滑动以及点击选择进度
3、音乐调节
4、全屏功能
5、重播
6、视频缓冲

整体实现效果如下：

其基本的实现思路是：

视频播放进度使用range(bar)+progress(fg)+ progress(buffer)来实现进度以及缓冲效果
音量的调节range + progress来实现
缓冲数值通过video对象buffered属性来获取

实际上整体的实现思想跟js实现音乐播放的思路相同

代码以及详细注释上传到我的Github

本次实现video对于网络问题没有很好的处理，如果视频加载缓冲受阻，没有很好的表现方式。

之后会实现简易播放器的功能，歌单、随机播放、循环播放、单曲循环等，类似于网易云音乐播放歌曲的效果。