Evento youtube javascript para galeria de video youtube

0 votos
preguntado por Adum128 (120 puntos) May 17, 2017 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
...