求助：移动端浏览器无法播放YouTube视频（PC端代码可正常运行）

嘿，这个问题我太熟了！移动端浏览器和PC端的自动播放规则差异超大，这就是你代码在PC端正常、移动端拉胯的核心原因。

Chrome、Safari这些主流移动端浏览器，出于用户体验和流量保护的考虑，都有严格的自动播放限制：默认禁止有声视频自动播放，只有两种情况例外：

• 视频处于静音状态，且满足浏览器的附加条件（比如视频在视口内）
• 用户主动触发了播放（比如点击按钮）

你的代码直接调用playVideo()，在移动端百分百会被浏览器拦截。

场景1：允许静音自动播放（最易实现） #

修改代码让视频默认静音，同时通过API确保播放逻辑符合移动端规则，我把你的iframe换成了API生成容器，这样更可控：

<div id="video"></div>
<script>
var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('video', {
    height: '360',
    width: '640',
    videoId: 'TTQK9aWZVds',
    playerVars: {
      'enablejsapi': 1,
      'mute': 1, // 强制静音参数
      'autoplay': 1 // 标记自动播放
    },
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  // 双重保险：先静音再触发播放，适配不同浏览器
  event.target.mute();
  event.target.playVideo();
}
</script>
<script src="//www.youtube.com/player_api"></script>

如果坚持想用原iframe，也可以直接在src里追加参数：//www.youtube.com/embed/TTQK9aWZVds?enablejsapi=1&mute=1&autoplay=1，效果类似。

场景2：需要有声播放（必须用户交互） #

如果你的视频必须带声音自动播放，那完全绕不开浏览器的限制，只能让用户先点一下触发播放。代码示例：

<button id="playVideoBtn">点击播放视频</button>
<div id="video"></div>
<script>
var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('video', {
    height: '360',
    width: '640',
    videoId: 'TTQK9aWZVds',
    playerVars: {
      'enablejsapi': 1
    }
  });
}

// 绑定按钮点击事件，触发有声播放
document.getElementById('playVideoBtn').addEventListener('click', function() {
  player.playVideo();
});
</script>
<script src="//www.youtube.com/player_api"></script>

这是移动端有声视频播放的唯一合规方式，所有主流浏览器都认这个逻辑。

• Safari iOS的规则更苛刻：就算静音，视频也得在当前视口内才会自动播放，别把视频藏在页面底部加载。
• 测试一定要用真实移动设备，PC端的移动端模拟器有时候和真实设备行为不一样。

内容的提问来源于stack exchange，提问作者suresh 10decoders