Chrome自动播放策略

引言

正如你可能已经注意到的，网络浏览器正在朝着更严格的自动播放政策发展，以改善用户体验，最大限度地减少安装广告拦截程序的动机，并减少昂贵和/或受限网络上的数据消耗。这些更改旨在为用户提供更大的播放控制权，并使拥有合法用例的出版商受益。

Chrome的自动播放策略如下：

始终允许静音自动播放。

也就是说，设置了muted的video，自动播放是没有限制的，毕竟不发出声音对用户可能也没有较大的影响。

如果不需要声音，可以直接将视频设置muted进行播放。后续再让用户开启播放

xml 复制代码

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

用户已经与域进行了交互

用户进行交互（例如点击，手机的点击，滑动之类）后，chrome允许可以调用VideoElement.play()的方式进行播放。

这点就比较抽象了，感觉没有一个判断用户是否进行交互的方案，实际过程中可以引导用户进行点击。

dart 复制代码

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

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

Media Engagement Index

在桌面上，用户的Media Engagement Index已经达标，这意味着用户以前播放过带声音的视频。

这个表其实就是一个用户对各个网站的访问频繁统计，可以通过chrome://media-engagement 进行查看。

这种播放也有相关限制：

媒体（音频/视频）的消耗量必须大于7秒。
音频必须存在并取消静音。
带有视频的选项卡处于活动状态。
视频的大小（以像素为单位）必须大于200x140。

开发者开关

可以通过 chrome.exe --autoplay-policy=no-user-gesture-required命令关闭自动播放策略

顶级框架可以将自动播放权限委托给它们的iframe，以允许使用声音进行自动播放。

xml 复制代码

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

参考内容

developer.chrome.com/blog/autopl...