Background con carrusel de videos youtube

gogupe · #1 (**permalink**) 08/08/2018, 12:55

Hola a todos.

Me gustaría poder hacer que en el background de la web, aparezca videos de youtube, el numero puede ser dinámico, eso ya lo controlo por PHP. Me gustaría que cuando acabara uno empezara con el siguiente y cuando llegue al útlimo empezara desde el principio.

El video debería de estar maximizado a la pantalla completa, con autorun.

Creo haber visto algunos por aquí, pero no lo encuentro, y lo que google me enseña, me sirve algunos, pero no me funciona como carrusel, creo que usando javascript podría resolverlo.

Muchas gracias a todos !!!

gogupe · #2 (**permalink**) 08/08/2018, 13:28

Tengo el siguiente código que funciona correctamente, lo que no se hacer es para pasarle un array de videos y que sean consecutivos y haga un loop.

Código HTML:

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style>
body
	{
		margin:0;padding:0;
	}
#player_wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}
#player_wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}

</style>
</head>
<body>


<script>
function inicio_galeria() {
    $('#player_wrap').remove();
    $('#pase').camera({
        fx: 'simpleFade',
        pagination: true,
        height: 'auto',
        time: 5000,
        autoAdvance:true,
        thumbnails: true
    });
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '100%',
    width: '100%',
    videoId: 'vabnZ9-ex7o',
    playerVars: {
        showinfo: 0,
        rel: 0,
        controls: 0
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerReady(event) {
  event.target.playVideo();
  event.target.mute();
}
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.ENDED) {
		//Iniciar funcion
  }
}
</script>
  <div id="player_wrap"><div id="player"></div>

</body>
</html>

Alexis88 · #3 (**permalink**) 08/08/2018, 15:13

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<video controls muted></video>

Código Javascript:

Ver original//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.

gogupe · #4 (**permalink**) 09/08/2018, 12:00

Pero con la etiqueta <video> no puedo reproducir videos de youtube, no?

gogupe · #5 (**permalink**) 10/08/2018, 03:57

Nadie tiene idea, necesito pasale un array de códigos de Youtube.

Alexis88 · #6 (**permalink**) 10/08/2018, 09:31

Si se trata de vídeos de YouTube, esta útil guía te servirá de mucho.

gogupe · #7 (**permalink**) 10/08/2018, 11:15

Perfecto ya lo tengo y mira que había entrando en esa guía y no lo había visto.

Muchas gracias.