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

Versión 1
estrellaestrellaestrellaestrellaestrella(7)

Publicado el 20 de Julio del 2020gráfica de visualizaciones de la versión: Versión 1
5.348 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 (7)

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
Rodrigo
9 de Abril del 2022
estrellaestrellaestrellaestrellaestrella
buenas, gracias por tu aporte...y si quiero que todos re reproduzcan en una sola ventana, como tendría que hacer?.
Responder
Imágen de perfil
27 de Julio del 2022
estrellaestrellaestrellaestrellaestrella
holaa gracias por el aporte.. estoy arrancando recien con html, tengo que hacer una pagina
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!
Responder
Betzaida
23 de Junio del 2023
estrellaestrellaestrellaestrellaestrella
Hola, podria ayudarme con el codigo para reproducir multiples videos?, estoy elaborando un blog donde se muestres videos, pero en el mismo requiero que cuando culmine el primer video, se reproduzca el otro, y asi sucesivamente.. Lo estoy elaborando en Html5
Gracias de antemano
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