Estoy haciendo un reproductor de video en HTML
y necesito extraer todas las funciones de la etiqueta "controls
" de video. Ya cuento con el botón de "Play", "Pause", "FullScreen" pero me faltan más funciones como la barra de progreso.
1 respuesta
En cuanto a la barra de progreso tienes que documentarte en las dos aspectos que son mostrar el tiempo y usar la barra para desplazarte en el video.
Aqui te coloco un link con informacion util para tu pregunta:
https://www.w3schools.com/tags/ref_av_dom.asp
Tambien te hice un codigo de ejemplo para la visualizacion de una barra de progreso usando el input type="range" el cual sirve de base para tu pregunta.
incluyo codigo HTML / JavaScript.
// declaracion de variables
var vid = document.getElementById("myVideo");
// se ejecuta cuando esta funcionado la barra de progreso
vid.ontimeupdate = function() {
var posicion =vid.currentTime; // posicion actual
var max = vid.duration; // duracion maxima del video
// poner valores en los atributos del input range
// para usar como barra de progreso
document.getElementById('barra').setAttribute("max", max);
document.getElementById('barra').value = posicion;
};
<video id="myVideo" width="320" height="176" controls>
<source src="videoprueba.mp4" type="video/mp4">
</video>
</body>
<p>Barra de Progreso</p>
<form>
<input type="range" name="points" min="0" max="10" id="barra">
</form>