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
<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
<?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'; ?>
Tema: Evento youtube javascript para galeria video youtube evento onPlayerStateChange (Leído 2823 veces)
RSS -
WAP2