HTML5本地视频播放器设计（+弹幕功能）

重点是设计html5播放器交互界面，滑动条，页面布局，简易弹幕
1.整体外观：

2.完整代码很长，所以不放了，之后上传。
3.
（1）首先是布局，通过居中的div控制整个区域居中，上边是video 下边是control块，再下方是弹幕输入框。理解position属性，将进度条、时间、音量区域、全屏区域通过css设定属性放在control块中。
（2）播放按钮是纯css制作，

.play{    width: 25px;    height: 25px;    position: relative;    top: 7.5px;    left: 20px;    display: inline-block;}.play:before{    border: 12.5px solid transparent;    border-left: 12.5px solid #000;    content: "";    position: absolute;    left:6.25px;}

利用css的一个技巧，设定border得到播放图标。
暂停图标也是css制作，但是不是利用border，是利用：before，：after 设定高宽背景色得到。
（3）进度条是参考了网易云音乐的音乐进度条设计的，由此学到了巧妙使用position-image属性，可以快速实现很多很棒的效果。注意背景图像的定位是关键，也可以在伪类中改变背景图片位置，从而改变图标。（背景图片上面有很多图标，通过限制区域大小以及背景图片位置来达到修改显示的图标效果）。
进度条其实是三个颜色，我使用了两个，没有考虑预加载。通过进度修改红色进度条长度。
另外，可以点击改变进度，但不可以拖动。拖动功能在音量条进行了实现，实现方法见另一个文章。
（4）时间的实现：
duration属性得到视频总长，通过自己写的secondToMinute（）转换成00：00形式输出。再得到当前时间显示。
（5）音量：
通过display属性设定音量条的显示与消失。
（6）全屏函数：
点击全屏，注意不同的浏览器全屏函数基本都不同，参考网上的总结进行了兼容性写法。
（7）弹幕实现，通过在video上方铺一个运动的canvas实现弹幕效果。下方input中输入后，回车或者按下button即可发送，回车方式比较简单，监控e.keyCode ，实际开发过程遇到回车就会页面刷新，这是因为表单默认都是要返回本页面，需要在form中设定 ousubmit=”return false;” 这样就可以解决。
关于canvas线性运动，是通过给新建立的canvas一个写好的className,在其中已经写好动画效果。
实际还遇到了canvas内部文字混乱问题，文字大小设定失效，完全与canvas大小相关，最后也不知道怎么解决。最后canvas可以显示的文字为8个左右，超出就隐藏。不过基本的弹幕功能完美实现了。
写了好几天的代码，完成了很开心。

后记：
写完文章之后，突然想到一个点子，canvas性能不好，为什么不能用div呢，只要把背景色设定为transparent,应该可以。然后测试了一下，效果超级好！！一直在想大的视频网站弹幕用什么做呢 ，现在觉得就是div啊 ，思路被影响了，其实就是一个透明属性就可以解决的问题。

总结：2017/10/9
这是我以前写的一个H5播放器，很多错误，比如弹幕可以使用div而不是canvas,div本身镂空，背景色不需要处理；滑动条有一些问题，全局定位没必要用那么多绝对定位。