Ver Mensaje Individual
  #3 (permalink)  
Antiguo 08/08/2018, 15:13
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.538
Antigüedad: 10 años
Puntos: 968
Respuesta: Background con carrusel de videos youtube

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:
Ver original
  1. <video controls muted></video>

Código Javascript:
Ver original
  1. //Una vez cargados los elementos HTML...
  2. document.addEventListener("DOMContentLoaded", function(){
  3.     var videos = ["video1.mp4", "video2.mp4", "video3.mp4", "videoN.mp4"],
  4.         total = videos.length,
  5.         i = 0,
  6.         htmlVideo = document.querySelector("video"),
  7.         reproducir = function(){
  8.             htmlVideo.src = videos[i];
  9.             htmlVideo.play();
  10.         };
  11.  
  12.     //Reproducir al inicio
  13.     reproducir();
  14.  
  15.     //Evento de finalización de la reproducción de un vídeo en el elemento <video>
  16.     htmlVideo.addEventListener("ended", function(){
  17.         i = i + 1 == total ? 0 : ++i; //Actualizar valor de variable contadora
  18.         reproducir(); //Reproducir el siguiente vídeo (o el primero si se acabó el último)
  19.     });
  20. });

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.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand