默认扩展音量

Question

我希望音量元素从一开始就展开，而不需要鼠标光标悬停。我关于这个默认隐藏的元素：

我没有找到任何内置选项（很奇怪）。我一直在尝试用CSS解决这个问题，但没有成功。

我为该问题创建了一个实际问题演示。代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Volume Volume 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>

Answer 1

您可以更改音量控制的风格
演示：https://codesandbox.io/s/videojs-volumelevel-show-forked-6bcc4l

 .video-js .vjs-volume-panel .vjs-volume-control {
        visibility: visible;
        opacity: 100;
        width: 5em;
        height: 1px;
        margin-left: -1px;
 }

Answer 2

另一种解决方案。您可以将

muteToggle

和

volumeBar

添加到您的

controlBar.children{}

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

Answer 3

最新版本的 Video.js 的解决方案，对我有用的是：

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal {
  width: 10em;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
  margin-right: 0;
  opacity: 1;
}

默认扩展音量

问题描述投票：0回答：3

3个回答

最新问题

默认扩展音量

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3