Chrome 中的自动播放政策

改善了用户体验，最大限度地减少了安装广告拦截器的诱因，并降低了数据流量消耗

François Beaufort
François Beaufort
GitHub

Chrome 的自动播放政策已于 2018 年 4 月发生变化。本文将介绍这项政策的变化原因以及对视频有声播放有何影响。剧透警告：用户会爱上它！

Liam Neeson：我会找到你，并让你暂停。
Sean Bean：我们不只是自动播放视频
在 Imgflip 和 Imgur 上找到的标记为“自动播放”的互联网模因。

新行为

您可能已经注意到，网络浏览器正在朝着更严格的自动播放功能迈进 以改善用户体验、尽可能减少 并减少昂贵和/或受限的数据流量消耗 。这些变更旨在让用户更好地控制播放，并让有合法用例的发布商受益。

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

  • 始终允许自动静音播放。
  • 在下列情况下，系统允许有声自动播放： <ph type="x-smartling-placeholder">
  • 热门帧可以将自动播放权限委托给其 iframe，以便 允许有声自动播放。

媒体互动度指数

媒体互动指数 (MEI) 用于衡量个人的消费倾向 网站上的媒体内容。Chrome 采用的策略是将访问量与重要媒体的比率 每个源的播放事件数：

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

然后，Chrome 会计算媒体互动度得分，该得分是网站上最高的 定期播放媒体内容的位置当达到足够高时，媒体 只能在桌面设备上自动播放。

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

<ph type="x-smartling-placeholder">
</ph> 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 playsinline 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() 发生在用户与网页互动之后的某个时间（例如，用户点击 按钮）。或者，系统会在用户执行完相应操作后恢复 AudioContext 手势（如果在任何连接的节点上调用 start()）。

// 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 后检查 AudioContext.state。如果允许播放，则应立即切换到 running。否则，其值为 suspended。如果你听 statechange 事件，您可以异步检测更改。

如需查看示例，请查看这个小小的拉取请求，其中修复了针对 https://airhorner.com 的这些自动播放政策规则的 Web Audio 播放问题。