Chrome自动播放

chrome 自动播放策略

参考地址

Chrome 的自动播放政策很简单

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

媒体互动指数

媒体互动指数 (MEI) 用于衡量个人在某个网站上消费媒体内容的意向。Chrome 采用的方法是，计算每个来源的重要媒体播放事件与访问次数的比率：

媒体内容（音频/视频）的使用时长必须超过 7 秒。
必须有音频且音频未静音。
包含视频的标签页处于活动状态。
视频的尺寸（以像素为单位）必须大于 200x140。然后，Chrome 会根据这些信息计算媒体互动得分，得分最高的网站是定期播放媒体的网站。当该值足够高时，系统会允许媒体仅在桌面设备上自动播放。

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

media-engagement

开发者开关

作为开发者，您可能需要在本地更改 Chrome 自动播放政策行为，以便测试您的网站在不同用户互动度水平下的表现。

您可以使用命令行标志 chrome.exe --autoplay-policy=no-user-gesture-required 完全停用自动播放政策。这样，您就可以测试网站，就像用户对您的网站有强烈的互动度且始终允许自动播放一样。
您还可以通过停用 MEI 来确保永不允许自动播放，并决定是否默认允许总体 MEI 最高的网站向新用户自动播放视频。使用标志执行此操作：chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies。

iframe 委托

借助权限政策，开发者可以有选择地启用和停用浏览器功能和 API。来源获得自动播放权限后，可以通过自动播放权限政策将该权限委托给跨源 iframe。请注意，默认情况下，系统允许在同源 iframe 中自动播放。

html

<!-- 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()，系统会使用 NotAllowedError DOMException 拒绝该 promise。autoplay 属性也会被忽略。

::: error 警告：一些旧文章错误地建议使用不受支持的属性 gesture=media。 :::

示例

示例 1：每当用户在笔记本电脑上访问 VideoSubscriptionSite.com 时，都会观看电视节目或电影。由于其媒体互动得分较高，因此允许自动播放。

示例 2： GlobalNewsSite.com 同时包含文字和视频内容。大多数用户访问该网站是为了查看文字内容，只有偶尔才会观看视频。用户的媒体互动得分较低，因此如果用户是直接从社交媒体页面或搜索结果导航到您的网站，则不允许自动播放。

示例 3：LocalNewsSite.com 同时包含文本和视频内容。大多数用户会通过首页进入该网站，然后点击新闻报道。由于用户与网域互动，因此允许在新闻报道页面上自动播放。不过，请务必注意，确保用户不会对自动播放的内容感到意外。

示例 4：MyMovieReviewBlog.com 嵌入了一个包含电影预告片的 iframe，以便与评价搭配使用。用户与网域互动后才访问了该博客，因此允许自动播放。不过，博客需要明确将此权限委托给 iframe，才能自动播放内容。

开发实践

您应始终查看 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。

html

<video id="video" muted playsinline autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

WARNING

注意：如果在文档收到用户手势之前创建了 AudioContext，则它将处于“暂停”状态，并且您需要在用户手势之后调用 resume()。

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

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

Web Audio API

开发中遇到的问题

问题1：页面接受某些事件后，会发出告警同时会播放声音，该页面如何刷新一次后，未进行任何操作，可能无法正常播放

解决：1. 判断刷新或者打开，增加一个欢迎弹窗 2.构建成pwa应用，vite可以中vite-plugin-pwa

Chrome自动播放 ​