0

Necesito ayuda para redirigir una página web según la selección de un video de youtube. Para esto utilizo la api de youtube para javascript.

En onYouTubeIframeAPIReady puedo obtener varios videos, pero en onPlayerStateChange(event) necesito obtener un alert(para saber si redirije) o windows.location que me redirige a otra página web de acuerdo con el ID de la base de datos, por ejemplo page.php?id=1 (de acuerdo a los id que guardo los videos)

En list.php con json, obtengo todos los datos de los videos: id (id) y url (imagen)(Esto es en base de datos, utilizo mysql).

En el evento onPlayerStateChange, necesito que se redirija de acuerdo al id de la base de datos, obteniendo los datos por json en list.php

Quizas necesite obtener el id del div de cada video de youtube, pero no logro obtener el id del div, ya que puede ser player1, player2, player3 etc...

	<script type="text/javascript">


	var srcs;
	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 imagen;
	var player; 

	function onYouTubeIframeAPIReady() {	
		__ajax("listar.php","").done(function(info){
			var videos = JSON.parse(info);	
			var contador = videos.data.length;		
				for(var i in videos.data){
					con = (parseInt(i) + parseInt(1));
					ids = 'player'+con;
					player = new YT.Player(ids, {
    					  height: '150',
    					  width: '250',
			 			  videoId:youtube_parser(videos.data[i].imagen),
    		  			  events: {
    		      			 'onStateChange': onPlayerStateChange
    		  			 }
					});					
				}
			});			
	}
	
	function onPlayerStateChange(event) {
		if(event.data == 3){
		
			//Aca necesito obtener el id desde la base de datos
      //o bien el id de los div, qe puede ser   player1,player2,etc
   		}
	}


	function __ajax(url,data){
		var ajax = $.ajax({
			"method": "POST",
			"url": url,
			"data": data
		});
		return ajax;
	}
	 
   	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>
<?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);

 ?>

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="contenido" class="contenedor1">
		<?php 
			for ($i=1; $i <= $total_post ; $i++){
				$concatenar = 'player'.$i;
				echo "<a>";
				echo "<div id='".$concatenar."'></div>"; 
				echo "</a>";
			}
		?>
		</div>	
</body>
</html>

//list.php

<?php 

	require 'funciones.php';

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

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

	$statement = $conexion->prepare("SELECT * FROM videos");
	$valor = $statement->execute();

	if ($valor) {
		while ($resultado = $statement->fetch(PDO::FETCH_ASSOC)) {
			$data["data"][] = $resultado;
		}
		echo json_encode($data);
	}else{
		echo "error";
	}
$statement->closeCursor();

 ?>

1
  • Es bueno que has creado el código y se puede ejecutar, pero por favor, comparte el código generado y no el código PHP. De ese modo podremos verlo mejor.
    – Alvaro Montoro
    Commented el 1 jun. 2017 a las 4:05

1 respuesta 1

0

Según la documentación:

Acceso y modificación de los nodos DOM

player.getIframe():Object

Este método muestra el nodo DOM para el incrustado.

Es decir, podrias hacer

event.target.getIframe().parentNode.id

para obtener el id del div que contiene el iframe donde esta el video.

Referencias:

https://developers.google.com/youtube/iframe_api_reference?csw=1#Accessing_and_Modifying_DOM_Nodes

https://stackoverflow.com/questions/7936663/find-the-parent-div-of-the-youtube-iframe-that-just-finished-playing-using-youtu

2
  • Gracias, me sirvio y ya logre terminar mi galeria
    – Adum
    Commented el 1 jun. 2017 a las 23:11
  • De nada @Adum, no te olvides de marcar mi respuesta como correcta. gracias! Commented el 2 jun. 2017 a las 1:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.