<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<video width="400px" muted controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video width="400px" muted controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video width="400px" muted controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
<script>
const videos = document.querySelectorAll("video");
function start(n) {
console.log("video "+n);
// creamos una promesa que finalizara cuando se haya mostrado el video
new Promise((resolve, reject) => {
videos[n].play();
videos[n].addEventListener("ended", () => resolve(n));
}).then(n => {
n = (n+1)>videos.length-1 ? 0 : ++n;
// ejecutamos el siguiente video
start(n);
});
}
start(0);
</script>
Comentarios sobre la versión: Versión 1 (7)
Pues si, elabore dos archivos html y js, con los datos proporcionados, al cargar el html se visualizan los videos correctamente pero al terminar el primero, no inicia en automático el segundo y así en consecuencia .
Originalmente mi petición es que al pulsar en cualquiera de los videos.
1)- se reproduzca.
2)- el anterior en reproducción se detenga, esto para que no se reproduzcan simultáneamente.
La única restricción, es que los vídeos tienen que estar "muted", ya que si no el navegador los bloquea.
que al escanear un codigo qr con un scaner, reproduzca un video determinado, y al terminar vuelva a la pagina de inicio para poder scanear de vuelta, un amigo programador me dijo que con html y javascript lo podia hacer, sabes si hay algun hilo que me pueda ayudar? muchas gravcias!
Gracias de antemano