Chrome 中的自动播放策略&如何设置自动播放

Chrome 中的自动播放策略

为了改善用户体验，谷歌浏览器限制了音视频的自动播放，最大限度地减少广告骚扰，并减少数据消耗

Chrome 66 开始限制了 video 和 audio 元素的自动播放，从 Chrome 71 开始限制了 Web Audio API 的自动播放，因此一些网页游戏和webrtc相关的音视频项目都会相应收到影响

autoplay

虽然限制了自动播放，但是还有一些情况下是允许自动播放的

1. 静音状态下始终允许自动播放
2. 有声音自动播放时：
   • 用户进行了页面点击等与界面发生交互行为后
   • 达到媒体参与指数, 也就是用户之前在本站播放过有声音的视频
   • 用户将页面添加到移动设备的主屏幕上或者在PC上安装了PWA
3. 主站可以将自动播放权限委托给它们的 iframe，以允许自动播放声音。

媒体参与指数

媒体参与指数 (MEI) 衡量个人在网站上消费媒体的倾向。Chrome 的方法是访问每个来源的重要媒体播放事件的比率：

• 音视频播放时间必须大于 7 秒。
• 必须存在音频且未静音。
• 必须处于正在播放视频的标签页
• 视频的大小必须大于200x140像素

该指数仅在PC端浏览器有效, 当分数足够高时则允许自动播放

用户的 MEI 可在about://media-engagement内部页面获得

始终允许自动播放

有时我们想让浏览器一直可以自动播放则需要设置：

chrome.exe --autoplay-policy=no-user-gesture-required

始终禁止自动播放

有时我们想让浏览器一直不允许自动播放则需要设置：

chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies

允许iframe自动播放

默认情况下同源iframe允许自动播放

不是同源的则需要设置：

<iframe src="跨源地址" allow="autoplay">


<iframe src="跨源地址" allow="autoplay; fullscreen">

检测浏览器是否支持自动播放

https://video-dev.github.io/can-autoplay/

任何时候都不要假设会自动播放

引导用户进行交互行为是最稳妥的方式

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // 开始播放
  }).catch(error => {
    // 需要用户进行页面交互
  });
}

微信内置浏览器、小程序webview中音频自动播放处理

微信内置浏览器中的音频自动播放需在WeixinJSBridgeReady事件内调用play方法

document.addEventListener("WeixinJSBridgeReady", () => {
	video.play()
}, false);