Me gustaría que el elemento de nivel de volumen se expanda desde el principio, sin que el cursor del mouse se mueva. Me refiero a este elemento que está oculto por defecto:
No encontré ninguna opción integrada para ello (bastante extraño). He estado tratando de resolverlo con CSS, pero sin éxito.
Hay una demostración del problema en acción que he creado para la pregunta. El código se muestra a continuación:
<!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>Podrías cambiar el estilo del control de volumen.
DEMOSTRACIÓN: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; }Otra solución. Podrías agregar muteToggle y volumeBar a tu controlBar.children{}
<script> videojs("my-player", { muted: true, autoplay: true, controls: true, controlBar: { children: { muteToggle: true, volumeBar: true } } }); </script>