Chrome中脚本创建的about:blank窗口内带音频video无法自动播放如何解决

Chrome 媒体自动播放策略规定，仅用户主动交互产生的可信任上下文才能触发带音频的视频自动播放。你创建的 about:blank 空白窗口虽然和父页面同源，但不会默认继承父页面的站点音频权限，且仅设置 autoplay 属性在新窗口未完成DOM初始化的场景下不会生效，所以会出现视频默认暂停的问题。

• 方案1：依托点击事件的可信任上下文主动调用播放（无需新增页面，兼容性最优）

button.onclick = async () => {
  // 必须在点击回调的同步逻辑内调用window.open，避免被判定为恶意弹窗丢失权限
  const win = window.open("", "Video", "width=400,height=300,scrollbars=1,resizable=1");
  // 先写入基础HTML结构，完成新窗口DOM上下文初始化
  win.document.write(`
    <!DOCTYPE html>
    <html>
      <body style="margin:0;padding:0"></body>
    </html>
  `);
  win.document.close();
  
  const video = win.document.createElement("video");
  video.controls = true; // 可选，添加控件方便用户手动 fallback
  video.src = "https://test.com/video.mp4";
  win.document.body.append(video);
  
  // 依托当前点击的可信任交互上下文主动触发播放，不需要依赖新窗口权限继承
  try {
    await video.play();
  } catch (err) {
    console.log("自动播放被拦截，可手动点击视频控件播放", err);
  }
}

• 方案2：替换about:blank为同域空白页
  如果你的站点有现成的同域空白HTML页面，直接将window.open的第一个参数改成该页面的路径，该窗口会直接继承站点的已配置音频权限，原有autoplay属性的设置即可正常生效。

• 视频资源的响应头需要配置正确的CORS规则，否则新窗口加载视频会出现跨域报错。
• 如果对移动端兼容有要求，可以给video元素额外添加playsinline属性避免自动全屏。

内容的提问来源于stack exchange，提问作者hedgehog90