Html5 视频播放总结

最近做内蒙项目的视频新闻功能，对视频播放等相关功能做一个总结，特此记录一下。

关于需求

1、新闻后台：可以上传视频，支持多种视频格式
2、移动端H5页面，用H5的方式播放视频资源，做到效果流畅，支持全屏播放。

上传新闻部分

在上传新闻部分，主要使用了vue-simple-uploader的一个组件，经过调研，simple-uploader的兼容性比较好，支持多种格式的文件上传，以及文件夹的上传，并且可以做断点续传和分段上传功能。
使用中，主要学习了它的多种配置方式，属性参数。主要需要留意文件添加、上传完成、上传出错、删除文件的回调事件。经过实际测试，坑比较少，值得小伙伴们之后有相似需求参考使用。

H5页面新闻视频的播放

视频编码问题

为了解决播放流畅的问题，在后台将视频做了处理，对视频做了切片，传给前端的视频格式为.m3u8文件，此时，需要集成videojs中的 videojs-contrib-hls，然后可以顺利播放。
在主流的视频格式中，经测试发现MP4格式和MOV格式对浏览器兼容性最好。

内联播放问题

开发过程中发现，在安卓端可以自动内联播放，但是在ios端需要点击播放后进入全屏播放。
解决方案：

在video标签中加入相应属性。
如果还不放心，可以引入iphone-inline-video.min.js包，就可以支持ios端的浏览器。

ios10微信内置浏览器bug

测试的时候偶然发现，ios10微信内置浏览器无法播放视频，经过对比以及研究，应该是因为没有找到video标签内的。需要在video标签内也加入src属性才可以正常播放。

参考资源链接：
1、vue-simple-uploader:
https://github.com/simple-uploader/vue-uploader/blob/master/README_zh-CN.md
2、videojs-contrib-hls：
https://github.com/videojs/videojs-contrib-hls