iframe嵌入YouTube视频加载/自定义按钮切换静音及带声自动播放问题

关于是否需要移除mute=1参数 #

不需要强制移除，反而建议保留该参数，原因如下：

• 当前主流浏览器均有「非静音媒体禁止自动播放」的安全策略，如果你直接移除mute=1，大部分场景下视频的autoplay=1参数会直接被浏览器拦截，视频无法自动播放。
• 你现有代码的逻辑是靠加载后调用unMute()来实现有声播放，保留mute=1是保证自动播放触发的前提。

现有代码的优化建议 #

你当前的onStateChange逻辑存在冗余，可能导致播放过程中反复触发音量重置，建议调整为仅首次播放时执行解除静音操作：

jQuery(function(){jQuery('.video-container iframe').attr('id', 'player');});
var player;
var isFirstPlay = true; // 新增首次播放标记
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerStateChange(event) {
  // 仅在首次进入播放状态时解除静音
  if(event.data === YT.PlayerState.PLAYING && isFirstPlay){
    player.unMute();
    player.setVolume(80);
    isFirstPlay = false;
    // 同步按钮状态
    $('.video-play-btn').text('volume_up');
  }
}

注意事项 #

部分浏览器会限制未和用户产生过交互的页面自动播放有声视频，就算代码层面调用unMute()也会被强制静音，这属于浏览器安全策略限制，无法绕过。如果遇到该场景，可以加个轻量提示引导用户点击页面后再触发解除静音操作。
你的自定义按钮切换静音的逻辑本身没有问题，只要播放器实例初始化完成就可以正常运行。

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