如何通过JavaScript调整YouTube官网视频音量？

直接通过键盘事件触发ArrowUp无效，是因为YouTube的事件监听逻辑绑定在视频元素而非document上，且它本身提供了更直接的音量控制方式，以下是几种可靠方案：

方案1：直接操作视频元素的volume属性 #

YouTube的核心播放载体是<video>标签，你可以直接获取该元素并修改其volume属性（取值范围0-1，0为静音，1为最大音量）：

// 调高音量（每次增加0.1）
function volumeUp() {
  const video = document.querySelector('video.html5-main-video');
  if (video) {
    video.volume = Math.min(video.volume + 0.1, 1);
  }
}

// 调低音量（每次减少0.1）
function volumeDown() {
  const video = document.querySelector('video.html5-main-video');
  if (video) {
    video.volume = Math.max(video.volume - 0.1, 0);
  }
}

方案2：利用YouTube内置的Player对象 #

YouTube页面会暴露全局的ytplayer对象，调用它的官方API控制音量更稳定：

// 调高音量（步长10，范围0-100）
function volumeUp() {
  if (window.ytplayer) {
    const currentVol = ytplayer.getVolume();
    ytplayer.setVolume(Math.min(currentVol + 10, 100));
  }
}

// 调低音量
function volumeDown() {
  if (window.ytplayer) {
    const currentVol = ytplayer.getVolume();
    ytplayer.setVolume(Math.max(currentVol - 10, 0));
  }
}

方案3：模拟滑块交互（不推荐，易受DOM变更影响） #

如果一定要通过滑块元素控制，可计算位置并触发同步事件，但这种方法依赖YouTube的DOM类名，页面更新后可能失效：

function volumeUp() {
  const slider = document.querySelector('.ytp-volume-slider');
  const handle = document.querySelector('.ytp-volume-slider-handle');
  if (slider && handle) {
    const sliderWidth = slider.offsetWidth;
    const currentLeft = parseFloat(handle.style.left);
    const newLeft = Math.min(currentLeft + 5, sliderWidth);
    handle.style.left = `${newLeft}px`;
    slider.dispatchEvent(new Event('input'));
  }
}

优先级建议：方案2 > 方案1 > 方案3，前两者基于官方播放逻辑，稳定性远高于依赖DOM结构的模拟操作。

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