如何通过YouTube IFrame Player API播放视频声音？

一、核心问题修复 #

你的代码里主动调用了静音方法，这是无声音的根本原因：
在onPlayerReady函数中，event.target.mute()会强制将播放器设为静音状态，删掉这行代码即可恢复声音；如果需要确保非静音，也可以显式调用unMute()：

function onPlayerReady(event) {
  // 移除这行静音代码
  // event.target.mute(); 
  event.target.playVideo();
}

二、多视频场景优化（避免实例冲突） #

当前代码使用全局player变量，点击多个视频时会覆盖之前的播放器实例，导致无法控制已加载的视频。可以通过对象存储多个实例来解决：

修改后的完整代码 #

JavaScript 代码

// 异步加载IFrame Player API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 用对象存储多个播放器实例，以容器ID为标识
var players = {};

function onYouTubeIframeAPIReady() {
  // API加载完成的钩子函数，必须保留
}

function onPlayerReady(event) {
  // 直接播放，无静音操作
  event.target.playVideo();
}

function youtubevideo(elem, videoIdval) {
  const playerElem = elem.parentNode.getElementsByTagName('div')[0];
  const playerId = playerElem.id;

  // 若已有实例，先销毁再重建（按需选择）
  if (players[playerId]) {
    players[playerId].destroy();
  }

  // 创建新播放器并存入对象
  players[playerId] = new YT.Player(playerElem, {
    width: '280px',
    height: '163px',
    videoId: videoIdval,
    playerVars: {
      'autoplay': 1,
      'playsinline': 1,
      'origin': window.location.href,
      'mute': 0 // 显式设置初始非静音，优先级更高
    },
    events: {
      'onReady': onPlayerReady
    }
  });
  elem.style.display = "none";
}

HTML 代码

<div>
  <div id="player1"></div>
  <button onclick="youtubevideo(this, 'o5x6t68xVVE')">播放视频1</button>
</div>   

<div>
  <div id="player2"></div>
  <button onclick="youtubevideo(this, 'wJp-BZpVBPA')">播放视频2</button>
</div>

<div>
  <div id="player3"></div>
  <button onclick="youtubevideo(this, 'sPhhZg9v9NU')">播放视频3</button>
</div>

三、声音控制相关API与参数 #

1. 初始化时可用的playerVars参数 #

• mute: 0（默认非静音）/ 1（静音），直接设置初始声音状态
• volume: 0-100，设置初始音量大小
• disablekb: 0（默认允许键盘控制音量）/ 1（禁用键盘音量控制）

2. 动态控制声音的API方法 #

• player.mute(): 静音播放器
• player.unMute(): 取消静音
• player.isMuted(): 返回布尔值，判断当前是否静音
• player.setVolume(volume): 设置音量（取值0-100）
• player.getVolume(): 获取当前音量值

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