Chrome 66桌面端如何处理"Uncaught (in promise) DOMException"播放错误？

DevOps 小满

2026-5-25

嘿，这个问题我太清楚了！Chrome 66版本开始推行了严格的自动播放政策，目的就是整治那些一打开就炸响的烦人声视频，所以你直接调用play()才会抛出那个DOMException——毕竟浏览器要确保用户是主动想要播放内容的。

先说说为啥那个广告能自动播放

你贴的广告视频代码里有两个关键属性：playsinline（包括webkit前缀的），另外大概率这个视频是静音的（虽然代码里没写muted，但广告商绝对会这么做）。Chrome的自动播放政策里有个明确的例外：

静音的视频（设置了muted属性）、或者用户之前和你的网站有过媒体交互记录的，允许自动播放；再加上playsinline确保视频在页面内播放而不是触发全屏，完全符合政策要求，所以广告能顺利自动播。

给你几个解决自己视频播放问题的方案

1. 给视频加静音属性（最常用）

直接在<video>标签里加上muted，再配合playsinline，静音视频就能绕过交互限制自动播放了，之后你可以给用户加个“开启声音”的按钮：

<video 
  muted 
  playsinline 
  webkit-playsinline 
  style="background-color: #000; position: absolute; width: 640px; height: 360px;"
  src="your-video-source.mp4"
></video>

2. 等待用户交互后再触发播放

如果你的视频必须有声播放，那只能等用户主动和页面交互（比如点击、滚动、按键）后再调用play()，举个简单的JS例子：

// 监听页面的点击事件，用户点击后播放视频
document.addEventListener('click', async () => {
  const video = document.querySelector('video');
  try {
    await video.play();
  } catch (err) {
    console.error('播放失败:', err);
  }
});