这事儿我太熟了——现在所有现代浏览器（包括Safari）都有严格的自动播放政策，核心原因就是带音频的媒体内容不能在无用户交互的情况下自动播放，这是浏览器为了防止烦人的自动播放广告搞的限制。你之前加mute()能正常工作，就是因为静音的媒体不受这个限制，浏览器允许它自动启动。

要让视频带声音播放，你得满足浏览器的用户交互要求，给你两个可行的方案：

方案1：通过用户交互触发播放（推荐） #

最合规的做法是添加一个播放按钮，让用户主动点击后再启动带声音的视频。比如这样修改你的代码：

// 先初始化YouTube播放器
var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'YOUR_VIDEO_ID',
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  // 这里不要直接调用play()，而是等待用户点击
  const playBtn = document.getElementById('play-video-btn');
  playBtn.addEventListener('click', function() {
    // 先确保音量是打开的
    event.target.setVolume(100);
    event.target.playVideo();
  });
}

// 你的脚本加载代码保持不变
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

然后在HTML里加个按钮：

<button id="play-video-btn">点击播放视频</button>
<div id="player"></div>

方案2：静音自动播放，用户交互后开启声音（折中方案） #

如果你的场景需要视频先自动静音播放，等用户有任何交互（比如点击页面）再打开声音，也可以这么做：

function onPlayerReady(event) {
  // 先静音自动播放
  event.target.mute();
  event.target.playVideo();
  
  // 监听页面的用户交互事件，比如点击
  document.addEventListener('click', function enableSound() {
    event.target.unMute();
    // 只执行一次，避免重复触发
    document.removeEventListener('click', enableSound);
  });
}

这个方案既能让视频自动启动，又能在用户交互后恢复声音，也符合浏览器的政策要求。

总之，Safari的这个限制是绕不开的，必须依赖用户的主动交互才能播放带声音的媒体，这也是现在所有主流浏览器的统一标准哦。

内容的提问来源于stack exchange，提问作者Stanisław Szewczyk