Foros de debate en castellano Javascript. Evento para hacer click a un video en multiples videos youtube. Programación en Castellano.

Evento para hacer click a un video en multiples videos youtube

Adum
01 de Junio del 2017

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...


 


	
	Document

	



//list.php

Adum
01 de Junio del 2017

<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();

 ?>

Document

	



//list.php

RESPONDER

Respuestas

Adum
01 de Junio del 2017

<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();

 ?>

RESPONDER