Chrome 中的自动播放政策

改善用户体验，尽量减少安装广告拦截器的激励措施，并减少流量消耗

François Beaufort
François Beaufort
GitHub

Chrome 的自动播放政策已于 2018 年 4 月发生变化，我将为您说明原因及其对有声视频播放的影响。剧透提醒：用户一定会喜欢它！

Liam Neeson：我会找到你们，暂停你们
Sean Bean：我们不只是自动播放视频
在 Imgflip 和 Imgur 上发现的带“自动播放”标记的互联网表情包。

新行为

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

Chrome 的自动播放政策非常简单：

  • 始终允许自动静音播放。
  • 在下列情况下，系统允许有声自动播放：
  • 热门帧可以将自动播放权限委托给其 iframe，以允许有声自动播放。

媒体互动度指数

媒体互动度指数 (MEI) 用于衡量个人在网站上使用媒体的倾向。Chrome 采用的方法是针对每个来源使用与重要媒体播放事件的访问次数之比：

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

然后，Chrome 会计算媒体互动得分，在定期播放媒体的网站上，该得分最高。当该阈值足够高时，媒体只能在桌面设备上自动播放。

用户的 MEI 可在 about://media-engagement 内部页面中找到。

about://media-engagement 内部页面的屏幕截图。
Chrome 中 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。autoplay 属性也会被忽略。

示例

示例 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 的这些自动播放政策规则修复了网络音频播放问题。