如何在 video.js 播放器中使音量条垂直？答案

【问题标题】：how to make volume bar vertical in video.js player?如何在 video.js 播放器中使音量条垂直？
【发布时间】：2026-01-19 14:40:01
【问题描述】：

我已经尝试过网站上给出的解决方案，但没有奏效。 Setting up volume control vertical in video.js 我在哪里可以获得有关 video.js 的最佳教程。任何链接？

【问题讨论】：

标签： video.js

【解决方案1】：

对于 6.2.0 版：

var options = {
    controlBar: {
        volumePanel: {inline: false}
    },
};

videojs('my-video', options);

【讨论】：

这是正确答案。我使用的版本是6.2.5！

【解决方案2】：

对于 video.js 5.x：

var options = {
  controlBar: {
    volumeMenuButton: {
      inline: false,
      vertical: true
    }
  }
};

videojs('player', options);

【讨论】：

【解决方案3】：

Video.js 7.10.2

var player = videojs('my-video', {
  controlBar: {
    volumePanel: {
      inline: false
    }
  },
});

【讨论】：

与 7.11.4 确认

【解决方案4】：

const options: VideoJsPlayerOptions = {
        controlBar: {
          volumePanel: {
            inline: false,
            volumeControl: {
              vertical: true
            }
          }
        }
      };

【讨论】：

虽然这段代码可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因

【解决方案5】：

这是可以做到的。请看：

http://jsbin.com/nidevo/2/edit?html,css,output

和

https://github.com/videojs/video.js/issues/942

您引用的方法是针对 videojs 2.0

【讨论】：

这对我不起作用...如果我实现它，音量条就会消失。顺便说一句，我有 videojs 5.0.2 ....
对不起，我以为是 4.x。我很确定垂直渲染在 5.0 中被破坏了 ATM：jsfiddle.net/w91vvjy0/4 和 github.com/videojs/video.js/issues/2726