Foros del Web » Programando para Internet » Javascript »

Background con carrusel de videos youtube

Estas en el tema de Background con carrusel de videos youtube en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/08/2018, 12:55
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 862
Antigüedad: 12 años
Puntos: 32
Background con carrusel de videos youtube

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 !!!
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.
  #2 (permalink)  
Antiguo 08/08/2018, 13:28
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 862
Antigüedad: 12 años
Puntos: 32
Respuesta: Background con carrusel de videos youtube

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> 
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.
  #3 (permalink)  
Antiguo 08/08/2018, 15:13
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.414
Antigüedad: 6 años, 11 meses
Puntos: 926
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.

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #4 (permalink)  
Antiguo 09/08/2018, 12:00
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 862
Antigüedad: 12 años
Puntos: 32
Respuesta: Background con carrusel de videos youtube

Pero con la etiqueta <video> no puedo reproducir videos de youtube, no?
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.
  #5 (permalink)  
Antiguo 10/08/2018, 03:57
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 862
Antigüedad: 12 años
Puntos: 32
Respuesta: Background con carrusel de videos youtube

Nadie tiene idea, necesito pasale un array de códigos de Youtube.
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.
  #6 (permalink)  
Antiguo 10/08/2018, 09:31
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.414
Antigüedad: 6 años, 11 meses
Puntos: 926
Respuesta: Background con carrusel de videos youtube

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

__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #7 (permalink)  
Antiguo 10/08/2018, 11:15
Avatar de gogupe  
Fecha de Ingreso: octubre-2006
Ubicación: Mallorca
Mensajes: 862
Antigüedad: 12 años
Puntos: 32
Respuesta: Background con carrusel de videos youtube

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

Muchas gracias.
__________________
Somos una serie de acontecimiento que puede venir al caso en un momento dado.



La zona horaria es GMT -6. Ahora son las 00:27.