JavaScript - CONTROLAR VOLUMEN ETIQUETA VIDEOS SIN CONTROLS

 
Vista:

CONTROLAR VOLUMEN ETIQUETA VIDEOS SIN CONTROLS

Publicado por esteban marin (1 intervención) el 19/12/2019 01:08:46
Buenas me llamo esteban y ando mirando la manera de controlar volumen de un video sin usar los controles por defecto de los navegadores;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
    <head>
        <title>MI VIDEO PRUEBA</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="VIDEO_ESTILOS.css">
    </head>
    <body>
        <section id="video">
            <div id="con_video">
            <video src="D:\Había.una.vez.en.Hoollywood.2019.lati.mp4" width="800" id="mi_video" preload="auto"></video>
            </div>
            <div id="botones">
                <div id="reproducir"><button type="button" id="play">PLAY</button></div>
                <div id="barra">
                    <div id="progreso">
                        <canvas id="circle"></canvas>
                    </div>
                </div>
                <div id="atras">
                    <button type="menu" id="atrasar">ATR</button>
                </div>
                <div id="adelante">
                    <button type="button" id="adelantar">ADEL</button>
                </div>
                <div id="pantalla_grande"><button type="button" id="grande">GRANDE</button></div>
                <div id="volumen"><button type="button" id="vol">VOL</button></div>
                <div id="reproducir_2"><button type="button" id="play_medio">PLAY</button></div>
            </div>
        </section>
        <div id="tiempo_total">
            <span id="total_hh">00</span> : <span id="total_mm">00</span> : <span id="total_ss">00</span>
        </div>
        <div id="contador">
            <span id="contador_hh">00</span> : <span id="contador_mm">00</span> : <span id="contador_ss">00</span>
        </div>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="botones.js"></script>
        <script src="efecto_hover.js"></script>
        <script src="auxiliar.js"></script>
 
    </body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

CONTROLAR VOLUMEN ETIQUETA VIDEOS SIN CONTROLS

Publicado por ScriptShow (692 intervenciones) el 19/12/2019 11:11:34
Saludos Esteban,

algunos enlaces relacionados:

https://www.w3schools.com/tags/ref_av_dom.asp

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_volume

El código básico adaptable:

1
2
3
4
5
6
7
<video src="D:\Había.una.vez.en.Hoollywood.2019.lati.mp4" width="800" id="mi_video" preload="auto"></video>
<div>
  <button onclick="document.getElementById('mi_video').play()">Reproducir el Audio</button>
  <button onclick="document.getElementById('mi_video').pause()">Pausar el Audio</button>
  <button onclick="document.getElementById('mi_video').volume+=0.1">Aumentar el Volumen</button>
  <button onclick="document.getElementById('mi_video').volume-=0.1">Disminuir el Volumen</button>
</div>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar