Drupal: Problemas con flexslider_views_slideshow con Youtube

Si tienes un FlexSlider y tu primer slider contiene un vídeo de Youtube, seguramente habrás notado que cuando le das play al vídeo, el slider continua su reproducción y te pasa a los siguientes sliders, sin importarle que estas viendo el vídeo del slide inicial.

En este post, encontraras la solución a este problema. Solo debes:

  1. Abrir el archivo sites > all > modules > contrib > flexslider_views_slideshow > js > flexslider_views_slideshow.js
  2. Ubicar la línea 72
  3. Y justo debajo de esa línea [72] pega el siguiente código:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

window.onYouTubeIframeAPIReady = function()
{
	if(slider.slides.eq(slider.currentSlide).find('iframe').length !== 0)
	{
		var frameId = slider.slides.eq(slider.currentSlide).find('iframe').attr('id');
		var frame = $('#'+frameId);
		var src = frame.attr('src');
		frame.attr('src', src+'&enablejsapi=1');

		var player = new YT.Player(frameId, {
			playerVars: {
				autoplay: 0
			},
			events: {
				'onStateChange': onPlayerStateChange
			  }
		});

		var done = false;
		function onPlayerStateChange(event)
		{
			if (event.data == YT.PlayerState.PLAYING && !done)
			{
				console.log('>> Reproduciendo video = '+event.data);
				Drupal.flexsliderViewsSlideshow.active[fullId].pause();
			}else if (event.data == YT.PlayerState.PAUSED && !done){
				console.log('>> Video en pausa = '+event.data);
				Drupal.flexsliderViewsSlideshow.active[fullId].play();
			}
		};
	}
};

Lo que acabamos de hacer es activar la API de Google, añadiendole a la URL de nuestro iframe el parametro “jsapi=1”.  Y posteriormente, añadimos el evento “onStateChange” al reproductor del vídeo, lo cual nos permite determinar el momento en que el usuario hace Play/Pause.  Una vez que sabemos como esta interactuando el usuario con el vídeo, podemos decirle que hacer en cada estado, para este caso particular nos interesa:

  • PLAYING: Ponemos en pausa el FlexSlider, para que podamos ver el vídeo sin la interrupción de los siguientes sliders.
  • PAUSE: Ponemos a reproducir el FlexSlider, para que continue la presentación de los demás sliders.

Problemas con el código de arriba? Puedes colocar unos timeout despues de los console.log.

Espero le sirva a alguien…

 

Bye!!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s