Background con carrusel de videos youtube

[Alexis88]

Ten a todos los vídeos en un arreglo, mismo que puedes alimentar manualmente o mediante una petición asíncrona al servidor que recogerá las direcciones de un repositorio electrónico, como una base de datos. Una vez definido el arreglo, con ayuda de una variable contadora, inicia la ejecución del primer vídeo, cuyo índice en el arreglo coincidirá con el valor de la variable contadora. En el elemento <video>, registra el evento de detención de la reproducción, para que, cuando ocurra, evalúes el valor de la variable contadora y así puedas decidir si sumarle uno (para reproducir el siguiente vídeo) o retornar su valor a cero (para reproducir el primer vídeo). Por último, solo necesitarás establecer la ruta del vídeo cuyo índice en el arreglo coincida con el valor de la variable contadora y reproducirlo.

Código HTML:

<video controls muted></video>
 

Código Javascript:

//Una vez cargados los elementos HTML...
document.addEventListener("DOMContentLoaded", function(){
    var videos = ["video1.mp4", "video2.mp4", "video3.mp4", "videoN.mp4"],
        total = videos.length,
        i = 0,
        htmlVideo = document.querySelector("video"),
        reproducir = function(){
            htmlVideo.src = videos[i];
            htmlVideo.play();
        };
 
    //Reproducir al inicio
    reproducir();
 
    //Evento de finalización de la reproducción de un vídeo en el elemento <video>
    htmlVideo.addEventListener("ended", function(){
        i = i + 1 == total ? 0 : ++i; //Actualizar valor de variable contadora
        reproducir(); //Reproducir el siguiente vídeo (o el primero si se acabó el último)
    });
});
 

La propiedad controls mostrará los controles del elemento <video>, mientras que la propiedad muted, la cual silencia el vídeo, la añadí debido a la restricción de Google Chrome de reproducir automáticamente vídeos con sonido. Si quitara la propiedad en mención, el vídeo no se reproduciría hasta que el usuario pulse el botón de reproducción. Con la presencia de dicha propiedad, el vídeo se reproduce, pero en silencio. El usuario tendrá que activar el audio, lo cual puede ser útil en caso de que este se encuentre escuchando música desde otro reproductor multimedia.