需求:
h5自定义播放短视频的样式，视频上层需要自定义一些内容(类似微信视频语音界面效果 没有视频控件)；主要浏览器微信，qq，UC(Android端)
方案:
1.只是使用原生video标签
问题: 1.脱离文本播放 2.浏览器自带视频控件 3.各个浏览器样式并不统一 video 层级最高 自定义内容无法遮挡video
处理: video 标签添加属性 webkit-playsinline playsinline 处理脱离文本播放 效果并不好
x5-video-player-type="h5 微信浏览器 可以在video标签上自定义内容
放大视频，然后视频容器overflow:hidden隐藏视频控件
总的来说这种方案只能是将就
2.视频转换 gif
问题:转换成gif文件过大
图像不清晰
暂时无法处理 放弃
3.canvas 渲染
问题:没有声音，但是可以正常播放视频(思路就是 用canvas drawImage api 定时获取 video 然后渲染在canvas上) pc端可以播放
移动端 无法播放 没定位到问题 (应该是我把video标签隐藏了 canvas 无法获取到video的数据，但是奇怪的是video应该播放了，因为听到声音了)
canvas层级无法覆盖video，标签只能是把video隐藏
放弃
4.jsmpeg 控件
思路大体也是 使用canvas 播放视频，使用webauto 播放音频
只是支持ts文件，需要把mp4转成ts 使用ffmpeg 安装安装后按照教程 转换ts文件
在页面引用，
出现了一些问题:
1.视频比例 和 移动端设备 比例不同，需要额外处理裁剪
2.没有声音，pc端没有，ios 没有，Android有，pc端是chrome 定位到是浏览器不能自动播放声音的问题 参照github里的解决方案 处理可以
3.缺少一些回调监听，但是业务需求暂时没用上就没自己改了，只是自己添加了一个播放时间展示(有个currentTime 但是不好用)
暂时是用的这个方案，还没发现问题，只是适合这种场景，视频固定且不大，需要自定义样式覆盖video标签