老板的灵魂问：为什么别人家的视频可以自动播放，为什么网页上的音视频不能自动播放？

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

内容已静音或不包含任何音频(仅视频)

用户在浏览会话期间点击或点击网站上的某个地方。

在移动设备上，如果用户已经将站点添加到主屏幕

在桌面上，如果用户经常在网站上播放媒体，根据媒体参与指数

下面这篇文章是机器车削和人车削的结合。

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

改善用户体验，尽量减少安装广告拦截器的动机，减少数据消耗。

Chrome 66中音频和视频元素的自动播放策略有效地防止了Chrome中大约一半不必要的媒体自动播放。对于网络音频应用编程接口，自动播放策略始于Chrome 71。这将影响网络游戏、一些WebRTC应用和其他使用音频功能的网页。您可以在下面的网络音频应用编程接口部分找到更多详细信息。

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

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

Chrome将发现并阻止“恶意”视频在网页中自动播放，例如恶意广告中的音频视频。

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

新特性！！！

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

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

始终允许静音自动播放。

在以下情况下允许自动播放声音：

用户与域交互(点击、点击等。).

在桌面上，已经超过了用户的媒体参与指数阈值，这意味着用户之前播放过音频视频。

用户已将网站添加到其移动设备的主屏幕上，或者在桌面设备上安装了PWA。

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

媒体参与指数

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

媒体(音频/视频)消耗必须大于7秒。

音频必须存在且不静音。

带有视频的选项卡处于活动状态。

视频的大小(以像素为单位)必须大于200x140。

Chrome据此计算媒体参与度得分，这在定期播放媒体的网站上是最高的。当足够高的时候，桌面web上的视频就可以自动播放了(对于普通开发者来说，这个分数感觉形而上，当老板问他想要多少分数的时候，他回答不出来.)

用户的MEI可以在大约：//媒体参与的内部页面上获得。

关于：//媒体参与chrome内页截图。

开发者建议

谨慎使用自动播放。自动播放可以成为一个强大的参与工具，但如果用户播放不想要的声音或认为不必要的视频播放使用了不必要的资源(如数据和电池)，也会让用户感到烦恼。

如果你真的想使用自动播放，如果用户有兴趣探索更多的从静音内容开始，和内容，则让.请考虑取消静音。许多网站和社交网络正在有效地使用这项技术。

除非有特殊原因，我们建议使用浏览器的本机控件进行视频和音频播放.这将确保自动播放策略得到正确处理。

如果您使用自定义媒体控制，请联系确保您的网站在不允许自动播放时正常运行。我们建议您始终检查播放功能返回的承诺，看看它是否被拒绝：

开发者模式切换

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

您可以使用命令行完全禁用自动播放策略：chrome . exe-autoplay-policy=no-user-position-required。这可以让你测试你的网站，没问题。

像用户与您的网站有很强的互动一样，并且始终允许播放自动播放。

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  muted autoplay
button /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事件，则可以异步检测更改。

google 原文链接
https://developer.chrome.com/blog/autoplay/

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

https://github.com/willian12345