如何实现Video.js播放器默认展开音量调节面板无需鼠标悬停

我希望Video.js播放器的音量调节元素初始加载时就处于展开状态，无需鼠标悬停触发即可显示，该元素默认状态为隐藏，展开效果参考下图：

我未找到对应的内置配置选项，曾尝试编写CSS实现该需求但未成功，复现用的基础示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Volume Panel Expanded</title>
    <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet" />
    <script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
  </head>
  <body>
    <video
      id="my-player"
      class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered"
    >
      <source
        src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
        type="video/x-mpegURL"
      />
    </video>

    <script>
      videojs("my-player", {
        muted: true,
        autoplay: true,
        controls: true,
        controlBar: {
          children: {
            volumePanel: true
          }
        }
      });
    </script>
  </body>
</html>

Video.js的volumePanel组件自带inline配置项，不需要额外写复杂CSS覆盖，直接修改初始化参数即可实现音量条默认常驻展开，不会在鼠标移出后自动折叠，和截图效果完全一致：

• 核心配置：在controlBar节点下配置volumePanel参数，设置inline: true开启内联展开模式，通过volumeControl.vertical可控制音量条方向，设为false为横向，true为纵向。

修改后的播放器初始化代码：

videojs("my-player", {
  muted: true,
  autoplay: true,
  controls: true,
  controlBar: {
    volumePanel: {
      inline: true,
      volumeControl: {
        vertical: false
      }
    }
  }
});

如果需要保留原有的hover折叠/展开交互，仅要求页面初始加载时音量条为展开状态，可通过CSS+初始化钩子实现：

1. 添加全局CSS覆盖组件默认的初始隐藏样式：

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:focus-within {
  width: 6em;
}
.video-js .vjs-volume-panel .vjs-volume-control {
  opacity: 1;
  visibility: visible;
}

2. 在播放器ready回调中手动给音量面板添加激活状态类：

const player = videojs("my-player", {
  // 保留原有配置即可
});
player.ready(() => {
  player.controlBar.volumePanel.addClass('vjs-slider-active');
});

版本说明：7.x版本Video.js的volumePanel.inline默认值为false，因此默认是折叠状态，需要手动配置开启；8.x及以上版本该参数默认值为true，默认就是横向常驻展开的样式，无需额外配置。

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