2

Necesito que el reproductor de HTML5 reproduzca 5 videos en bucle. Sin tener que darle al play.


<video preload="true" autoplay="true" muted="muted" volume="0"> 
<source src="video1.mp4" type="video/mp4">
<source src="video2.mp4" type="video/mp4">
<source src="video3.mp4" type="video/mp4">
<source src="video4.mp4" type="video/mp4">
<source src="video5.mp4" type="video/mp4">

</video>

No se si es necesario hacerlo con JavaScript. Si fuera así, apreciaría algo de ayuda.

3
  • Al comienzo yo también pensaba que se podía realizar de esta manera, luego me di cuenta de que cada source es como un respaldo, si la primera opción no funciona pasará a la segunda, sino a la tercera y así. Commented el 20 jul. 2019 a las 17:25
  • Utilizando Javascrit se podría indicar que cuando acabe el video, el "src" cambie por el siguiente video, pero no doy con el código navegando por la red.
    – FerD
    Commented el 20 jul. 2019 a las 17:40
  • Dale una mirada a este link thenewcode.com/792/Create-A-Simple-HTML5-Video-Playlist Commented el 20 jul. 2019 a las 19:13

1 respuesta 1

2

En el siguiente ejemplo utilizo el evento "ended" para saber si el video se ha acabado. Si el video se ha acabado cambia el atributo src al siguiente valor del array vids.

Cuando llega al final del array vuelve a reproducir el primer video.

// el array de los videos
let vids = ["https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/video-player-video.mp4","https://www.w3schools.com/html/mov_bbb.mp4"]
// la longitud del array de los videos
let leng = vids.length;
// un numero utilizado para saber que video se está reproduciendo
let n = 0;
// utilizo el evento "ended" para saber si el video se ha acabado
vid.addEventListener("ended",()=>{
// si el video se ha acabado cambia el atributo src
vid.setAttribute("src", vids[n%leng]);

n++;
}
)
<video id="vid" preload="true" autoplay="true" muted="muted" volume="0" controls width="300" height="168">
 <source src="https://www.w3schools.com/html/mov_bbb.mp4"  type="video/mp4">
</video>

1
  • Funciona perfecto. Gracias.
    – FerD
    Commented el 20 jul. 2019 a las 23:36

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.