默认扩展音量
[英]Expand volume level by default
问题描述
I would like the volume level element to be expanded from the beginning, without mouse cursor hovering.
我希望从一开始就扩展音量级别元素，而无需鼠标光标悬停。 I am about this element that is hidden by default:我是关于默认隐藏的这个元素：
I didn't find any built-in option for it (strange enough).我没有找到任何内置选项（很奇怪）。 I've been trying to solve it with CSS, but without success.我一直在尝试用 CSS 解决它，但没有成功。
There is a demo of problem in action that I've created for the question.我为该问题创建了一个实际问题演示。 The code is shown below:代码如下所示：
<!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>
2 个解决方案
解决方案1
1 已采纳 2022-06-17 06:20:54
You could change the style of volume control你可以改变音量控制的风格
DEMO:https://codesandbox.io/s/videojs-volumelevel-show-forked-6bcc4l演示：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;
}
解决方案2
0 2022-06-20 12:16:44
Another solution.另一种解决方案。 You could add muteToggle and volumeBar to your controlBar.children{}您可以将muteToggle和volumeBar添加到您的controlBar.children{}
<script>
videojs("my-player", {
muted: true,
autoplay: true,
controls: true,
controlBar: {
children: {
muteToggle: true,
volumeBar: true
}
}
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.