自定义播放器
近期工作需求要重构下自定义播放器相关内容，记录一下进度和踩的坑，希望可以帮助下其他人。
市面上比较流行的播放器有
- videojs
- plyr
- ···
目前最流行的使用量最多的应该是videojs，但是其体积实在是太大，所以pass掉了。plyr是目前使用的播放器，目前使用的感觉就是相当于video上多封装了一层ui组件，而且对于流文件，还需要使用hls.js，其官网有这样一句话：
For Streaming we also have example integrations with: Dash.js, Hls.js and Shaka Player
plyr在播放流文件时，还是在内部集成了Shaka Player，所以最终决定直接使用Shaka Player。
踩坑
-
自定义播放器全屏问题: video如果全屏的话，会展示出controls里的播放器相关组件，而且自定义的组件也没有展示。
解决方案：requestFullScreen(),想让video全屏的另一种解读就是就是可以使其外部容器全屏，这样就可以起到video会全屏，而且还显示自定义的样式。
-
播放器播放hls问题：如果直接使用shaka-player加载流视频（如m3u8），播放器会报错code: 4032 错误码对比，其报错的大致意思为浏览器不支持内容容器或编解码器。
github上写的很清楚，一定要仔细看文档和官网！！！！
- 播放器内快捷键问题： 因为播放器有快捷键功能，刚开始绑定监听在全局，但是考虑到有评论功能，会影响全局监听所以想在video上做出监听，想在焦点上做文章，但是直接绑定focus和blur事件无效，可以给标签加上tabIndex属性，具体文档可查看，设置好后就可以使用focus和blur事件了，并且可以只在video聚焦时进行键盘监听。
未完待续...
