如何让AMP网站中的YouTube视频自动播放时带声音

首先明确：AMP框架不支持自动播放带声音的YouTube视频，这不是技术漏洞，而是AMP本身的设计规范和现代浏览器自动播放政策共同决定的：

• 所有现代浏览器（Chrome、Safari等）都严格限制未经用户主动交互的带声音自动播放，目的是避免打扰用户；
• AMP的视频组件（包括amp-youtube）会强制自动播放的视频默认静音，没有官方提供的取消默认静音的配置项，也不存在合规的绕过方法。

合规的替代方案 #

如果你需要视频有声音，只能通过用户主动交互来开启，推荐的实现方式：

1. 让视频静音自动播放，同时在视频上或旁边放置醒目的“取消静音”按钮；
2. 通过用户点击按钮的交互，触发视频取消静音。

示例代码（基于amp-youtube）：

<!-- 静音自动播放的YouTube视频 -->
<amp-youtube
  data-videoid="VIDEO_ID"
  width="640"
  height="360"
  layout="responsive"
  autoplay
  muted
  id="myVideo"
></amp-youtube>

<!-- 用户点击取消静音的按钮 -->
<button on="tap:myVideo.unmute()">取消静音</button>

注意：这种方案完全符合AMP和浏览器的规则，不会导致AMP验证失败，也能满足用户对声音的需求。

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