老板的灵魂提问: 别人家的视频能自动播放为什么你开发的无法自动播放？为什么网页上的音视频无法自动播放了？

 先上结论，根据新政策，媒体内容将被允许在以下条件下自动播放：

• 内容已静音，或不包含任何音频（仅限视频）
• 用户在浏览会话期间点击或点击网站上的某处
• 在移动设备上，如果用户已将站点添加到主屏幕
• 在桌面上，如果用户经常在网站上播放媒体，根据媒体参与指数

 

以下文章为机翻与人翻相结合

---

 

Chrome 中的 video 视频自动播放政策说明

改善用户体验，最大限度地减少安装广告拦截器的动机，并减少数据消耗

 Chrome 66 中针对音频和视频元素启动的自动播放策略有效地阻止了 Chrome 中大约一半不需要的媒体自动播放。对于 Web Audio API，Chrome 71 中启动了自动播放策略。这会影响网页游戏、某些 WebRTC 应用程序和其他使用音频功能的网页。

Chrome 的自动播放政策在 2018 年 4 月发生了变化，我在这里告诉您为什么以及如何影响带声音的视频播放。 

用户会喜欢这个新功能的！

chrome 会找到并阻止网页中“恶意”的视频自动播，比如恶意广告内有声视频自动播放

但老板不会喜欢它的！！所以开发者也不会喜欢它的

新特性！！！

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

---

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

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

 

---

  

媒体参与指数

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

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

Chrome 从中计算出媒体参与度分数，该分数在定期播放媒体的网站上最高。当它足够高时，桌面web端的视频就可以允许自动播放（对于普通开发者来说这分数感觉是玄学，老板再问要多少分数时，就无法回答了...）

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

 

about://media-engagementChrome 内部页面的屏幕截图。

开发者建议

• 谨慎使用自动播放。自动播放可以是一个强大的参与工具，但如果播放了不想要的声音或者他们认为由于不需要的视频播放而导致不必要的资源使用（例如数据、电池），它也会惹恼用户。 
• 如果您确实想使用自动播放，请考虑从静音内容开始，如果用户有兴趣探索更多内容，则让他们取消静音。许多网站和社交网络正在有效地使用这种技术。
• 除非有特殊原因，否则我们建议使用浏览器的本机控件进行视频和音频播放。这将确保正确处理自动播放策略。 
• 如果您使用自定义媒体控件，请确保您的网站在不允许自动播放时正常运行。我们建议您始终查看 play 函数返回的 promise，看看它是否被拒绝：

开发者模式切换

作为开发人员，您可能希望在本地更改 Chrome 自动播放策略行为，以测试您网站的不同用户参与度。

• 您可以使用命令行完全禁用自动播放策略：chrome.exe --autoplay-policy=no-user-gesture-required。这使您可以测试您的网站，就好像用户与您的网站有很强的互动一样，并且始终允许播放自动播放。

• 您还可以决定通过禁用 MEI 以及是否默认情况下为新用户自动播放具有最高整体 MEI 的站点来确保永远不允许自动播放。chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies。

iframe 委托

默认情况下，嵌入式 IFrame 只能播放静音或无声视频。但是，如果网站所有者希望他们网站上的 IFrame 能够播放未静音的内容，他们可以使用allow=autoplay将自动播放权限传递给 IFrame 。此属性允许 IFrame 中包含的任何视频播放，就像它托管在网站上一样。

一个权限的政策使开发人员可以选择性地启用和禁用浏览器功能和API。一旦源获得了自动播放权限，它就可以将该权限委托给具有autoplay 权限策略的跨源 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() 没有用户手势的情况下调用将使用 NotAllowedErrorDOMException 。并且自动播放属性也将被忽略。

例子，哪些类型的网站允许，哪些类型的网站不允许

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

示例 2：同时 GlobalNewsSite.com 具有文本和视频内容。大多数用户只是偶尔访问该网站以获取文本内容和观看视频。用户的媒体参与度得分较低，因此如果用户直接从社交媒体页面或搜索进行导航，则不允许自动播放。

示例 3：同时 LocalNewsSite.com 具有文本和视频内容。大多数人通过主页进入网站，然后点击新闻文章。由于用户与域的交互，将允许在新闻文章页面上自动播放。但是，应注意确保用户不会对自动播放内容感到惊讶。

示例 4： MyMovieReviewBlog.com 嵌入带有电影预告片的 iframe 以进行评论。用户与域交互以访问博客，因此允许自动播放。但是，博客需要将给 iframe 添加权限允许播放，以便内容自动播放。

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。

网络音频

该网络音频API，因为Chrome浏览器71.已涵盖自动播放有几件事情需要了解它。首先，在开始音频播放之前等待用户交互是一种很好的做法，以便用户知道发生了一些事情。例如，想想“播放”按钮或“开/关”开关。您还可以根据应用程序的流程添加“取消静音”按钮。

 如果AudioContext在文档接收到用户手势之前创建了一个，它会在“暂停”状态下创建，你需要resume()在用户手势之后调用。

 

页面加载完后想播放 AudioContext，则必须在用户与页面交互后的某个时间调用 resume()（例如，在用户单击按钮后）。或者，AudioContext如果start()在任何附加节点上调用，将在用户手势后恢复。

// 其它原先代码不用变动
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// 用户交互后重播
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 事件，则可以异步检测更改。

单页应用场景下值得一用，在子路由上播放视频可以使用该方法/**

 * 是否允许自动播放视频
 * @returns 
 */
const isEnableAutoplay = () => {

  const context = new AudioContext()
  if(context.state === 'running'){

    return true
  }
  return false
}

window.onload = () => {
　　console.log(isEnableAutoplay())
}

利用 statechange 事件

const context = new AudioContext()

　　context.addEventListener('statechange', () => {

　　console.log(context.state === 'running')

})

 

 

---

google 原文链接

https://developer.chrome.com/blog/autoplay/

 

注：转载请注明出处博客园：sheldon(willian12345@126.com)

https://github.com/willian12345