Chrome 中的自动播放政策

改善了用户体验，尽可能减少用户安装广告拦截器的激励措施，并减少了数据消耗

Chrome 的自动播放政策已于 2018 年 4 月变更 接下来我将向您介绍原因以及这对有声视频播放的影响提前剧透：用户一定会喜欢的！

新行为

您可能已经注意到，网络浏览器正改用更严格的自动播放政策，以改善用户体验，尽可能减少用户安装广告拦截器的激励措施，并减少在昂贵和/或受限的网络上消耗的流量。这些变更旨在让用户更好地控制播放，并让发布商有合理的使用情形。

Chrome 的自动播放政策很简单：

• 始终允许静音自动播放。
• 在下列情况下，允许有声自动播放：
  • 用户与网域进行了互动（点击、点按等）。
  • 在桌面设备上，用户的媒体互动指数阈值已经超过，这意味着用户之前播放过有声视频。
  • 用户已在移动设备上将该网站添加到其主屏幕，或在桌面设备上安装了 PWA。
• 顶级帧可以将自动播放权限委托给其 iframe，以允许有声自动播放。

媒体互动指数

媒体互动指数 (MEI) 衡量的是个人在网站上观看媒体的倾向。Chrome 的方法是统计每个来源的访问次数与重要媒体播放事件的比率：

• 媒体（音频/视频）的用时必须超过 7 秒。
• 音频必须存在且已取消静音。
• 包含该视频的标签页处于有效状态。
• 视频的尺寸（以像素为单位）必须大于 200x140。

然后，Chrome 会计算出媒体互动得分，该得分在定期播放媒体的网站上最高。当该值足够高时，系统将仅允许在桌面设备上自动播放媒体内容。

用户的 MEI 可在 about://media-engagement 内部页面上查看。

开发者切换

作为开发者，您可能需要在本地更改 Chrome 自动播放政策的行为，以便针对不同水平的用户互动测试您的网站。

• 您可以使用命令行标志完全停用自动播放政策：chrome.exe --autoplay-policy=no-user-gesture-required。 这样，您就可以模拟用户与您网站进行强烈互动的方式测试网站，并且始终允许自动播放播放功能。

• 此外，您还可以决定是否允许自动播放，方法是停用 MEI，以及是否默认为新用户启用自动播放功能，从而达到总体 MEI 最高的网站。使用标志执行此操作：chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies。

iframe 委托

权限政策允许开发者有选择地启用和停用浏览器功能和 API。源站获得自动播放权限后，就可以使用自动播放权限政策将权限委托给跨源 iframe。请注意，同源 iframe 上默认允许自动播放。

<!-- 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">

停用自动播放的权限政策后，在不使用用户手势的情况下调用 play() 会拒绝 promise 并抛出 NotAllowedError DOMException。自动播放属性也会被忽略。

示例

示例 1：用户每次在笔记本电脑上访问 VideoSubscriptionSite.com 时，都会观看电视节目或电影。由于媒体互动得分较高，因此允许自动播放。

示例 2：GlobalNewsSite.com 同时包含文本和视频内容。 大多数用户会访问网站查看文字内容，并且只偶尔观看视频。 用户的媒体互动得分较低，因此，如果用户直接从社交媒体页面或搜索结果进行导航，系统将不会允许自动播放。

示例 3：LocalNewsSite.com 同时包含文本和视频内容。 大多数人通过首页进入网站，然后点击新闻文章。由于用户与相关网域进行了互动，因此系统允许新闻报道页面上自动播放。不过，应格外小心，确保自动播放的内容不会令用户感到惊讶。

示例 4：MyMovieReviewBlog.com 嵌入带有电影预告片的 iframe，用于审核。用户与网域互动以访问博客，因此允许自动播放。不过，博客需要将该权限明确委托给 iframe，才能自动播放内容。

Chrome 企业版政策

您可以使用 Chrome 企业版政策针对自助服务终端或无人值守系统等用例更改自动播放行为。如需了解如何设置与自动播放相关的企业政策，请查看政策列表帮助页面：

• AutoplayAllowed 政策用于控制是否允许自动播放。
• 您可以通过 AutoplayAllowlist 政策指定将始终启用自动播放功能的网址格式许可名单。

面向 Web 开发者的最佳实践

音频/视频元素

请谨记一点：切勿假设视频会播放，并且在视频实际并未播放时不要显示暂停按钮。这一点非常重要，因此我将在下方再写一遍，供那些只是浏览该帖子的人使用。

您应该始终查看 play 函数返回的 Promise，确认其是否被拒绝：

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.
  });
}

吸引用户的一种酷炫方式是使用静音自动播放，并让他们选择取消静音。（请参见以下示例。）一些网站已经有效做到了这一点，包括 Facebook、Instagram、Twitter 和 YouTube。

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

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

触发用户激活的事件仍会在各个浏览器中采用一致的定义。我建议您暂时坚持使用 "click"。请参阅 GitHub 问题 whatwg/html#3849。

网络音频

从 Chrome 71 开始，Web Audio API 就包含在自动播放功能中。 关于它，有几点需要了解。首先，最好等到有用户互动后再开始播放音频，让用户知悉正在发生的事件。例如，设想一个“播放”按钮或“开启/关闭”开关。您还可以根据应用的流程添加“取消静音”按钮。

如果您在网页加载时创建 AudioContext，则必须在用户与网页互动后的某个时间（例如，用户点击按钮后）调用 resume()。或者，如果在任何连接的节点上调用 start()，则 AudioContext 将在用户手势后恢复。

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

您也可以仅在用户与页面互动时才创建 AudioContext。

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

如需检测浏览器是否需要用户互动才能播放音频，请在创建浏览器后检查 AudioContext.state。如果允许播放，它应立即切换到 running。否则，将为 suspended。如果您监听 statechange 事件，则可以异步检测更改。

如需查看示例，请查看 https://airhorner.com 的自动播放政策规则中修复了网络音频播放问题的小拉取请求。