H5 video 自动播放

移动端

ios

从 ios 11 以后的版本,以下:

  • 无音频源的 video 元素 允许自动播放
  • 禁音的 video 元素允许自动播放
  • 如果 video 元素在没有用户手势下有了音频源或者变成非禁音,会暂停播放
  • video 元素屏幕可见才开始播放
  • ideo元素不可见后停止播放

参考链接

Android

只有移动端 chrome 53 以上需要同时对 video 设置 autoplay 和 muted(是否禁音),才允许自动播放; 安卓的 FireFox 和 UC 浏览器支持任何情况下的自动播放; 安卓的其他浏览器不支持;

参考链接

PC 端

Safari 浏览器

Safari 10 后带音频的视频和音频默认禁止自动播放

Chrome 浏览器

禁音的视频依旧可以播放,带声音的视频会根据:

  • 用户在媒体上停留时间超过了 7秒以上
  • 音频必须是展示出来,并且没有静音
  • 与 video 之间有过交互
  • 媒体的尺寸不小于 200x140

来决定能否自动播放

关于全屏播放

大家创意 H5 活动的时候背景有的时候是用的视频,但是在点击播放或者通过 API video.play() 触发播放时,会强制以全屏置顶的形式进行播放。这样 video 的层级会很高,所以在 video 元素之上,无法显示其他的元素,也就没有了交互,这是让人崩溃的!

  • 基于 webkit 内核的移动端浏览器

只需在 video 标签加个 playsinline 属性

补充:
对于 ios 如果仍有个别版本的 ios 会唤起播放器,可以引用一个库 iphone-inline-video

补充:

对于 ios 如果仍有个别版本的 ios 会唤起播放器,可以引用一个库 iphone-inline-video

对于在 QQ 和微信环境内
使用 qq.com 域名可以解决(亲测可以)
x5-video-player-type=”h5”属性
加了这个属性后视频上层可以有其他 dom 元素出现了

  • 对于在 QQ 和微信环境内

使用 qq.com 域名可以解决(亲测可以)
x5-video-player-type=”h5”属性
加了这个属性后视频上层可以有其他 dom 元素出现了

关于去除播放控件

  • android 对于在 QQ 和微信环境内

腾讯在浏览器里做了一些配置使用 qq.com 域名就没有问题了,我们平时的活动如果有涉及到视频的都会启用 qq.com 域名。

  • 也可以放大视频顶到视窗外面

补充:
对于 x5-video-player-type="h5" 属性播放控件也隐藏了