Código de JavaScript - Reproducir múltiples vídeos automáticamente uno detrás del otro en Javascript

Imágen de perfil
Val: 226
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Reproducir múltiples vídeos automáticamente uno detrás del otro en Javascriptgráfica de visualizaciones


JavaScript

Publicado el 20 de Julio del 2020 por Joan (82 códigos)
782 visualizaciones desde el 20 de Julio del 2020
Código que muestra como ir mostrando todos los vídeos de nuestra página de forma automática uno detrás del otro.

Versión 1
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 20 de Julio del 2020gráfica de visualizaciones de la versión: Versión 1
783 visualizaciones desde el 20 de Julio del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
44
45
46
47
48
49
<!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 (4)

Imágen de perfil
20 de Julio del 2020
estrellaestrellaestrellaestrellaestrella
Lamentablemente la función start() no controla automáticamente la transición en los videos..
Responder
Imágen de perfil
20 de Julio del 2020
estrellaestrellaestrellaestrellaestrella
Hola Erik, puedes especificar un poco mas a que te refieres?
Responder
Imágen de perfil
20 de Julio del 2020
estrellaestrellaestrellaestrellaestrella
Joan nuevamente te agradezco tu pronta respuesta.
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.
Responder
Imágen de perfil
21 de Julio del 2020
estrellaestrellaestrellaestrellaestrella
No se como lo has puesto, pero si ejecutas mi código tal cual esta, hace eso... primero ejecuta el primer vídeo, luego cuando termina, ejecuta el segundo, y así sucesivamente por tantos vídeos como haya. Cuando llega al final, vuelve a empezar por el primero.

La única restricción, es que los vídeos tienen que estar "muted", ya que si no el navegador los bloquea.
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s6364