默认扩展音量

巨型轰炸机

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

我没有找到任何内置选项（很奇怪）。我一直在尝试用 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>

主要细节

您可以更改音量控制
演示的样式：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;
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。