自己的HTML5 播放器
不知道写什么，主要也是自己水平实在是有限，想想自己会的东西都太基本，网上一搜往后不知道能数多少页，自己表达的也没有别人好。我希望自己写的东西要么是网上没有(可能性就是零……)，要么是带着自己的见解。所以没有素材，还是自己踏踏实实学习比较靠谱，看的书越多，发现自己不会的也越多，但是太长时间不发东西出来又害怕自己丢失了写文章的习惯，所以凑数也要凑一篇！
开头讲了这么多，就是做了铺垫，这个HTML5播放器很水……就是为了凑一篇博文素材加上这是我第一个上传到github上的项目……
github地址：https://github.com/westAnHui/HTML5-Player
功能很普遍，这玩意又不难，先看截图，如果觉得丑就不用看了0.0
本文不包含介绍HTML5播放器这方面的API，那个网上一搜一大摞……
注意：上一个(左箭头)，下一个(右箭头)、全屏还没写，未完成版……原谅我偷懒先放出来了，其他功能基本上都实现了
——————————————————————————————————————————————————————————————
很简单，几个基本的按钮，悬停按钮时发光用了border-radius和box-shadow配合，总进度条和音量进度条使用自定义拖拽
也有几点收获
比如：
box-sizing:border-box是真心的好用啊，特别对于有些在父级宽高未知，子元素需要填满，不过子元素自身有border和padding，这样无脑width或height设置为100%，那就超了~但是加上box-sizing:border-box世界就清静了~
transform:translate(-50%, -50%)，这个也是棒的不行，偏移的50%是针对子元素本身的，不需要知道自己的宽高数值就可以。配合top:50%，left:50%，position:absolute立马达到垂直居中！，相比较margin:-(需要知道自己本身宽高再除2)%，方便了很多！
js是写在window.onload里面的
注意：如果不用window.onload，在DOM加载完毕之后直接跑的话，是读不到总视频时间的
video.duration的结果是undefined
视频和图片是一个性质嘛~无聊测试了一下本机环境下延迟40ms就可以读了，不过这毫无用处……
最后给个GIF
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
