Evento para hacer click a un video en multiples videos youtube
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
<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();
?>
//list.php
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();
?>
|
