Evento youtube javascript para galeria de video youtube

0 votos
preguntado por Adum128 (120 puntos) May 17 en Javascript
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';

 ?>

Por favor, accede o regístrate para responder a esta pregunta.

Preguntas relacionadas

0 votos
0 respuestas
0 votos
0 respuestas
0 votos
0 respuestas
0 votos
0 respuestas
0 votos
14 respuestas
Bienvenido a Dudas de Programación, donde puedes hacer preguntas y recibir respuestas sobre los problemas más frecuentes de los lenguajes de programación, frameworks de desarrollo y bases de datos que utilices. Foro de Línea de Código
...