问一下手机H5视频问题

Question

在H5中插入视频（我用的是VIDEO标签）如何解决IOS和安卓手机不同效果的问题 例如在手机微信播放后IOS会自动保留最后暂停的画面而安卓会直接出现一个黑框 还有各个浏览器出现的一些差异性表现 比如浏览器的一些自己就带的一些不一样效果

Answer 1

这种应该找个播放器组件来解决

Answer 2

安卓的微信视频会调用 X5 内核的一个 view 层，如果你使用的是微信的白名单域名（如QQ.COM）那么可以绕过个层直接使用原生的 video 播放层，所以安卓下的微信其实是无解的。

如果不考虑微信环境，我有两个想法：

1. 监听 timerupdate 事件，把画面停止在视频结束前 .1s
2. 使用 video + canvas 来做视频播放

想法二可能需要比较高配的安卓系统才能支持，但是可控性会更高一些。

Answer 3

一般微信自带的一些样式不是很好解决。目前我想到的办法是，通过video的api去处理，通过js监测视频是否播放完，然后来处理播放完成后的一些展示图。播放的暂停和开始的控制都完全可以使用js去控制，不过这样去做略微麻烦些。