Autor Tema: Evento youtube javascript para galeria video youtube evento onPlayerStateChange (Leído 1735 veces)

Adum · « **en:** 17 de Mayo 2017, 09:24 »

Buenas, he estado harto rato pegado buscando la solucion. Lo que necesito es que al pulsar un video me redirija a una pagina siguiente con su respectivo id, es decir, ejemplo pagina2?id=1.php.

Resulta que me falta que el evento onPlayerStateChange me pueda capturar las pulsaciones de los videos de youtube, pero solo me lo hace para el primer video y teniendo una lista de 10 videos no me redirije a la pagina siguiente como quiero.

$foto['id'] = muestra el id guardado en la base de datos
$foto['imagen'] = muestra la url del video

index.view.php

Código: [Seleccionar]

        <head>
        	<script type="text/javascript">

	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() {
		<?php foreach ($fotos as $foto):?>
		var foto = '<?php echo $foto['imagen']; ?>';
   		 player = new YT.Player('player01', {
     		   height: '150',
    		    width: '250',
   	 		    videoId: youtube_parser(foto),
     		   events: {
     		       'onStateChange': onPlayerStateChange
     		   }
   		 });
   		 //<?php endforeach; ?>
		} 

	function onPlayerStateChange(event) {

   		 if (event.data == 3) {
   		 	var href = document.querySelector('#player01').parentNode.getAttribute('href');
   		    alert(href);
   		    //window.location = href;
  	 		 }
	}

	function youtube_parser(url){
 	  	var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
  	  	var match = url.match(regExp);
  	  	return (match&&match[7].length==11)? match[7] : false;
	}

	</script>
        </head>

	<section class="fotos">
		<div class="contenedor">
			<?php foreach ($fotos as $foto):?>
				<div class="thumb">
					<a href="foto.php?id=<?php echo $foto['id']; ?>" target="_blank">
						<div id="player01">
							<iframe src="<?php echo $foto['imagen']; ?>"></iframe>
						</div>
					</a>
				</div>
			<?php endforeach; ?>
		</div>
	</section>

index.php

Código: [Seleccionar]

<?php 

require 'funciones.php';

$fotos_por_pagina = 5;

$pagina_actual = (isset($_GET['p']) ? (int)$_GET['p'] : 1);
$inicio = ($pagina_actual > 1) ? $pagina_actual * $fotos_por_pagina - $fotos_por_pagina :0;

$conexion = conexion('galeria_videos','root','');

if(!$conexion){
	die();
}

$statement = $conexion->prepare("SELECT SQL_CALC_FOUND_ROWS * FROM videos LIMIT $inicio , $fotos_por_pagina");

$statement->execute();
$fotos = $statement->fetchAll();

if(!$fotos){
	header('Location: index.php');
}

$statement = $conexion->prepare("SELECT FOUND_ROWS() AS total_filas");
$statement->execute();
$total_post = $statement->fetch()['total_filas'];

$total_paginas = ceil($total_post / $fotos_por_pagina);

require 'views/index.view.php';

 ?>

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: