移动端
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" 属性播放控件也隐藏了