移动端 HTML5 video 视频兼容性问题

PS:不是伸手党问题

最近在做一个移动端页面的视频播放的时候遇到些问题。

1、自动播放

IOS本身是禁止自动播放的,需要由用户手动触发,IOS 微信浏览器中可以借助 jssdkwx.ready(()=>{}) 里面进行自动播放去实现,但是这种方法在安卓微信上有失效了。(安卓现在还在用X5核?)

有没有比较兼容的解决方案?

2、全屏或响应式问题

我遇到的这个问题主要是在全屏的时候,会加载系统原生的 controls,可以隐藏,但是又无法触发 ended事件后隐藏掉播放画面,必须由用户主动关闭才行。这个也有些难受。

3、canplay 和 canplaythrough 都无法触发

在测试的时候发现,由于IOS的限制,这两个时间包括很多事件都是失效的或者视频播放了才有效果。包括 readyState

如果要借助 canplaythrough 有什么兼容性的方案吗?

4、video.js

这个问题有点伸手。

video.js 试了试但是感觉庞大了,而且也不是特别好用,经常白屏。

如果只是移动端上的视频兼容性方案,是否有更好的替代库?

阅读 11.4k
2 个回答

第二个问题,如果是在X5内核上,也就是手Q微信内,可以用这个解决 :H5同层播放器接入规范
问题一和三基本无解,video.js不太适用国内各种浏览器内核环境

我也是做了很多这个,你的问题是没有办法解决的。可以给你个确切结论。
1, 在ios里,如果你是想在自己应用的webview里让自动播放,这可以做,在给webview设置属性时,有这个属性,你可以百度‘ios的webview里让视频自动播放’,会找到答案的。

如果是其他情况下,也就是借助微信JSSJDK可以。其他环境都不能够自动播放,因为safari,默认是不允许自动播放的。
2. 在安卓端,X5内核是不允许自动播放的(安卓微信用的X5内核)。其他内核你可以试试的。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题