最近做内蒙项目的视频新闻功能，对视频播放等相关功能做一个总结，特此记录一下。
关于需求
1、新闻后台：可以上传视频，支持多种视频格式
2、移动端H5页面，用H5的方式播放视频资源，做到效果流畅，支持全屏播放。
上传新闻部分
在上传新闻部分，主要使用了vue-simple-uploader的一个组件，经过调研，simple-uploader的兼容性比较好，支持多种格式的文件上传，以及文件夹的上传，并且可以做断点续传和分段上传功能。
使用中，主要学习了它的多种配置方式，属性参数。主要需要留意文件添加、上传完成、上传出错、删除文件的回调事件。经过实际测试，坑比较少，值得小伙伴们之后有相似需求参考使用。
H5页面新闻视频的播放
视频编码问题
为了解决播放流畅的问题，在后台将视频做了处理，对视频做了切片，传给前端的视频格式为.m3u8文件，此时，需要集成videojs中的 videojs-contrib-hls，然后可以顺利播放。
在主流的视频格式中，经测试发现MP4格式和MOV格式对浏览器兼容性最好。
内联播放问题
开发过程中发现，在安卓端可以自动内联播放，但是在ios端需要点击播放后进入全屏播放。
解决方案：
<video id="media" x-webkit-airplay="true" webkit-playsinline="true"
x5-playsinline="true" playsinline="true" preload="auto" playsinline
controls>
<source id="video" src="" type="">
您的浏览器不支持video,请更换浏览器查看。 </video>
在video标签中加入相应属性。
如果还不放心，可以引入iphone-inline-video.min.js包，就可以支持ios端的浏览器。
ios10微信内置浏览器bug
测试的时候偶然发现，ios10微信内置浏览器无法播放视频，经过对比以及研究，应该是因为没有找到video标签内的<source>。需要在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
