Chrome 新的自动播放策略

最近，Chrome 浏览器更新了其自动播放策略。这个变化可能会影响到许多前端开发者的项目，因此值得我们关注一下。

背景

在过去的几年里，自动播放音频和视频变得越来越常见。然而，用户普遍对这种行为感到不满，因为它们往往会打断他们正在做的事情，并浪费他们的带宽和电量。为了改善用户体验，Chrome 开始限制自动播放的能力。

Chrome 最初的限制是在 2018 年引入的，从此开始，自动播放只有在特定条件下才能起作用。例如，如果媒体是通过用户操作启动的（例如，点击按钮），则可以自动播放该媒体。否则，必须先与用户进行交互，例如通过单击页面上的某个元素。

但是，这些限制并没有解决问题。开发者开始尝试各种方法绕过这些限制。 为了提高用户体验，Chrome 再次升级了自动播放策略。

新的策略

新的自动播放策略会更加严格。Chrome 将会在每个独立的 Tab 上分配一个媒体播放权限标记。当 Tab 收到一个媒体播放请求时，Chrome 会检查该 Tab 上的标记是否满足自动播放媒体的条件。如果不满足，浏览器将阻止该请求。

为了满足这些条件，用户必须与此前的网页内容进行交互。例如，他们必须单击页面上的某个元素或在视频中播放声音。这种操作会使浏览器分配媒体播放权限标记，从而允许之后的媒体播放请求自动播放。

如何适应新策略

要适应 Chrome 新的自动播放策略，开发者需要做出一些变化。以下是一些建议：

1. 避免在页面加载后立即自动播放媒体。等待用户和页面有一些交互再自动播放。
2. 如果您必须自动播放媒体，请确保它符合 Chrome 的规则，并与用户的交互相关。
3. 如果您的网站重度依赖自动播放媒体，请考虑使用其他浏览器或技术来实现您的目标。
4. 测试您的网站以确保所有媒体可以正确播放。

以下是一个示例代码片段，展示如何与用户的交互解决自动播放限制问题：

const video = document.querySelector('video');

document.addEventListener('click', () => {
  video.play();
});

在这个示例中，当用户单击页面时，视频将开始播放。这样可以避免立即自动播放导致的问题，并与用户的交互相关。

结论

Chrome 的新的自动播放策略提高了用户体验，但也需要我们做出相应的调整来适应它。通过遵循这些建议并测试您的网站，您可以确保媒体在您的网站上正确播放，从而提供更好的用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32094