如何通过JavaScript控制YouTube iframe播放器的音量？

方案1：将播放器实例挂载到全局对象 #

把初始化后的player实例绑定到window全局对象上，外部脚本就能直接访问并调用API方法，简单直接：

// 页面内初始化播放器的代码
function onYouTubeIframeAPIReady() {
  // 挂载到window，外部可直接访问
  window.youtubePlayer = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  // 页面加载完成后先设置初始音量
  event.target.setVolume(50);
}

外部任意位置调用示例：

// 外部脚本/控制台直接调用
window.youtubePlayer.setVolume(30);

方案2：封装全局控制函数 #

如果不想直接暴露播放器实例，可封装一个带校验的全局函数，既安全又方便调用：

let player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // 播放器配置项
    events: {
      'onReady': onPlayerReady
    }
  });
}

// 暴露全局控制函数，做参数和实例校验
window.setYouTubeVolume = function(volume) {
  if (player && typeof player.setVolume === 'function') {
    // 限制音量在0-100区间，符合API要求
    const validVolume = Math.max(0, Math.min(100, volume));
    player.setVolume(validVolume);
  }
};

function onPlayerReady(event) {
  event.target.setVolume(50);
}

外部调用示例：

setYouTubeVolume(40);

方案3：用自定义事件实现解耦通信 #

如果外部脚本和播放器页面需要解耦，或者属于不同上下文，可通过自定义事件传递控制指令：

1. 播放器所在页面监听事件：

let player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // 播放器配置项
    events: {
      'onReady': onPlayerReady
    }
  });

  // 监听音量控制自定义事件
  window.addEventListener('setYouTubeVolume', function(e) {
    if (player && player.setVolume) {
      const validVolume = Math.max(0, Math.min(100, e.detail.volume));
      player.setVolume(validVolume);
    }
  });
}

function onPlayerReady(event) {
  event.target.setVolume(50);
}

2. 外部脚本触发事件：

// 外部触发自定义事件传递音量值
window.dispatchEvent(new CustomEvent('setYouTubeVolume', {
  detail: { volume: 20 }
}));

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