Fecha y hora actual: Miércoles 26 Sep 2018 02:55
Índice del Foro

Foros de programación informática, diseño gráfico y Web

En esta comunidad intentaremos dar soporte de programación a todos los niveles, desde principiantes a profesionales de la informática, desarrollo de programas, programación web y mucho más.

Evento youtube javascript para galeria de video youtube

Responder al Tema

Índice del Foro > JavaScript > Evento youtube javascript para galeria de video youtube

Autor Mensaje
Adum



Registrado: 20 May 2017
Mensajes: 4

Mensaje Publicado: Sábado 20 May 2017 05:36

Título del mensaje: Evento youtube javascript para galeria de video youtube

Responder citando

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

Código:
  1.  
  2. <head>
  3. <script type="text/javascript">
  4.  
  5. var tag = document.createElement('script');
  6. tag.src = "..."; //va la url de la api youtube.com/iframe_api
    Código:
  7.    var firstScriptTag = document.getElementsByTagName&#40;'script'&#41;&#91;0&#93;;
  8.    firstScriptTag.parentNode.insertBefore&#40;tag, firstScriptTag&#41;;
  9.  
  10.    var player;
  11.  
  12.    function onYouTubeIframeAPIReady&#40;&#41; &#123;
  13.       <?php foreach &#40;$fotos as $foto&#41;&#58;?>
  14.       var foto = '<?php echo $foto&#91;'imagen'&#93;; ?>';
  15.          player = new YT.Player&#40;'player01', &#123;
  16.               height&#58; '150',
  17.               width&#58; '250',
  18.                 videoId&#58; youtube_parser&#40;foto&#41;,
  19.               events&#58; &#123;
  20.                   'onStateChange'&#58; onPlayerStateChange
  21.               &#125;
  22.          &#125;&#41;;
  23.          //<?php endforeach; ?>
  24.       &#125;
  25.  
  26.    function onPlayerStateChange&#40;event&#41; &#123;
  27.  
  28.          if &#40;event.data == 3&#41; &#123;
  29.             var href = document.querySelector&#40;'#player01'&#41;.parentNode.getAttribute&#40;'href'&#41;;
  30.              window.location = href;
  31.            &#125;
  32.    &#125;
  33.  
  34.    function youtube_parser&#40;url&#41;&#123;
  35.         var regExp = /^.*&#40;&#40;youtu.be\/&#41;|&#40;v\/&#41;|&#40;\/u\/\w\/&#41;|&#40;embed\/&#41;|&#40;watch\?&#41;&#41;\??v?=?&#40;&#91;^#\&\?&#93;*&#41;.*/;
  36.           var match = url.match&#40;regExp&#41;;
  37.           return &#40;match&&match&#91;7&#93;.length==11&#41;? match&#91;7&#93; &#58; false;
  38.    &#125;
  39.  
  40.    </script>
  41.         </head>
  42.  
  43.    <section class="fotos">
  44.       <div class="contenedor">
  45.          <?php foreach &#40;$fotos as $foto&#41;&#58;?>
  46.             <div class="thumb">
  47.                <a href="foto.php?id=<?php echo $foto&#91;'id'&#93;; ?>" target="_blank">
  48.                   <div id="player01">
  49.                      <iframe src="<?php echo $foto&#91;'imagen'&#93;; ?>"></iframe>
  50.                   </div>
  51.                </a>
  52.             </div>
  53.          <?php endforeach; ?>
  54.       </div>
  55.    </section>
  56. index.php
  57.  
  58. [code="php"]
  59. <?php
  60.  
  61. require 'funciones.php';
  62.  
  63. $fotos_por_pagina = 5;
  64.  
  65. $pagina_actual = (isset($_GET['p']) ? (int)$_GET['p'] : 1);
  66. $inicio = ($pagina_actual > 1) ? $pagina_actual * $fotos_por_pagina - $fotos_por_pagina :0;
  67.  
  68. $conexion = conexion('galeria_videos','root','');
  69.  
  70. if(!$conexion){
  71. die();
  72. }
  73.  
  74. $statement = $conexion->prepare("SELECT SQL_CALC_FOUND_ROWS * FROM videos LIMIT $inicio , $fotos_por_pagina");
  75.  
  76. $statement->execute();
  77. $fotos = $statement->fetchAll();
  78.  
  79. if(!$fotos){
  80. header('Location: index.php');
  81. }
  82.  
  83. $statement = $conexion->prepare("SELECT FOUND_ROWS() AS total_filas");
  84. $statement->execute();
  85. $total_post = $statement->fetch()['total_filas'];
  86.  
  87. $total_paginas = ceil($total_post / $fotos_por_pagina);
  88.  
  89. require 'views/index.view.php';
  90.  
  91. ?>

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Pedrolo
Usuario Inquieto


Registrado: 07 May 2017
Mensajes: 50
Ubicación: Posiblemente lejos de ti

Mensaje Publicado: Domingo 21 May 2017 19:47

Título del mensaje: Evento youtube javascript para galeria de video youtube

Responder citando

Así por lo que pones entiendo creo que podrías solucionar eso con un elemento flotante (o absoluto, lo contrario que relativo) y de esa forma ese elemento al hacer click que haga lo que necesitas.

El código que muestras es apenas legible, quizás usando una plataforma como Cloud9(proyetco público) o usando un repositorio Github se podría echar un vistazo mejor y cómodamente.

Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor
Adum



Registrado: 20 May 2017
Mensajes: 4

Mensaje Publicado: Miércoles 24 May 2017 01:26

Título del mensaje: Evento youtube javascript para galeria de video youtube

Responder citando

Pedrolo escribió:
Así por lo que pones entiendo creo que podrías solucionar eso con un elemento flotante (o absoluto, lo contrario que relativo) y de esa forma ese elemento al hacer click que haga lo que necesitas.

El código que muestras es apenas legible, quizás usando una plataforma como Cloud9(proyetco público) o usando un repositorio Github se podría echar un vistazo mejor y cómodamente.


Hola gracias por responder, intente se vea mejor con imagenes. Logre avanzar y puedo obtener los videos iframe recorriendolos por json en listar.php, pero quede entrampado al momento de seleccionar el evento onPlayerStateChange(event), lo que necesito es redirigir a otra pagina al momento de pulsar el iframe que esta por div, y esos div tienen un correlativo, player1,player2 de acuerdo al id o la cantidad de videos existentes. Lo que necesito es que al pulsar el video que me devuelva el id del div o iframe que he seleccionado. No se si es posible ???

index.php

Código:
preview.ibb.co/jEwDDF/6.png


index.view.php

Código:
preview.ibb.co/nxaUna/1.png
preview.ibb.co/nHV6YF/2.png
preview.ibb.co/h0NLtF/3.png


listar.php
Código:

preview.ibb.co/hem27a/4.png


No me deja subir url ni imagenes, agregar a cada imagen https : // al inicio

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Adum



Registrado: 20 May 2017
Mensajes: 4

Mensaje Publicado: Viernes 26 May 2017 07:55

Título del mensaje: Evento youtube javascript para galeria de video youtube

Responder citando

Código:
  1.  
  2. <div class="contenedor1">
  3. <?php
  4. for ($i=1; $i <= $total_post ; $i++) {
  5. $concatenar = "player".$i;
  6. echo "<div id='".$concatenar."' ></div>";
  7. }
  8. ?>
  9. </div>
  10.  


Código:
  1.  
  2. function onYouTubeIframeAPIReady() {
  3.  
  4. __ajax("listar.php","").done(function(info){
  5. var videos = JSON.parse(info);
  6. var contador = videos.data.length;
  7. for(var i in videos.data){
  8. con = (parseInt(i) + parseInt(1));
  9. ids = 'player'+con;
  10. player = new YT.Player(ids, {
  11. height: '150',
  12. width: '250',
  13. videoId:youtube_parser(videos.data[i].imagen),
  14. events: {
  15. 'onStateChange': onPlayerStateChange
  16. }
  17. });
  18. }
  19. });
  20. }
  21. function onPlayerStateChange(event) {
  22. if (event.data == 3) {
  23.  
  24. }
  25. }
  26.  


No se como puedo obtener los ids de los divs de acuerdo este evento onPlayerStateChange(event), prove con .click y nada, necesito saber eso para lograr obtener la redireccion de paginas, por si alguien sabe y me ayuda[/code]

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Pedrolo
Usuario Inquieto


Registrado: 07 May 2017
Mensajes: 50
Ubicación: Posiblemente lejos de ti

Mensaje Publicado: Sábado 27 May 2017 01:19

Título del mensaje:

Responder citando



Ultima edición por Pedrolo el Sábado 27 May 2017 01:25; editado 1 vez
Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor
Pedrolo
Usuario Inquieto


Registrado: 07 May 2017
Mensajes: 50
Ubicación: Posiblemente lejos de ti

Mensaje Publicado: Sábado 27 May 2017 01:20

Título del mensaje:

Responder citando



Ultima edición por Pedrolo el Sábado 27 May 2017 01:25; editado 1 vez
Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor
Pedrolo
Usuario Inquieto


Registrado: 07 May 2017
Mensajes: 50
Ubicación: Posiblemente lejos de ti

Mensaje Publicado: Sábado 27 May 2017 01:21

Título del mensaje: Evento youtube javascript para galeria de video youtube

Responder citando

Yo es que sigo sin entenderlo, quieres recuperar los ids de los divs?

Por lo que veo...
Código:
  1. <?php
  2. for ($i=1; $i <= $total_post ; $i++) {
  3. $concatenar = "player".$i;
  4. echo "<div id='".$concatenar."' ></div>";
  5. }
  6. ?>


Eso te genera etiquetas con id player1, player2, player3, etc... hasta la cantidad indicada en $total_post. Luego el evento que indicas, en js, hace una cosa rarísima y usa un bucle iterado del contenido de videos.data donde asigna un valor u objeto a la variable i. Como no se lo que contiene ese videos.data, no puedo decirte con certeza si lo que hace es correcto o funciona o es causa fallo, pero si la finalidad es recorrer todos los divs con id que comience en player, podrías usar esto para recuperar las id:

Código:
  1. <?php
  2. for ($i=1; $i <= $total_post ; $i++) {
  3. $concatenar = "player".$i;
  4. echo "<div id='".$concatenar."' ></div>";
  5. };
  6. echo "<script>var videos_totales=".$total_post."</script>";
  7. ?>


... y luego en el js...

Código:
  1. function onYouTubeIframeAPIReady() {
  2.  
  3. __ajax("listar.php","").done(function(info){
  4. var videos = JSON.parse(info);
  5. var contador = videos.data.length;
  6. for(var i=1;i<=videos_totales;i++){
  7. ids = 'player'+i; // de esta forma tendriamos todos los ids
  8. player = new YT.Player(ids, {
  9. height: '150',
  10. width: '250',
  11. videoId:youtube_parser(videos.data[i].imagen),
  12. events: {
  13. 'onStateChange': onPlayerStateChange
  14. }
  15. });
  16. }
  17. });
  18. }
  19. function onPlayerStateChange(event) {
  20. if (event.data == 3) {
  21.  
  22. }
  23. }

Volver arriba
Ver perfil del usuario Enviar mensaje privado Visitar sitio web del autor
Adum



Registrado: 20 May 2017
Mensajes: 4

Mensaje Publicado: Domingo 28 May 2017 02:26

Título del mensaje: Evento youtube javascript para galeria de video youtube

Responder citando

Pedrolo escribió:
Yo es que sigo sin entenderlo, quieres recuperar los ids de los divs?

Por lo que veo...
Código:
  1. <?php
  2. for ($i=1; $i <= $total_post ; $i++) {
  3. $concatenar = "player".$i;
  4. echo "<div id='".$concatenar."' ></div>";
  5. }
  6. ?>


Eso te genera etiquetas con id player1, player2, player3, etc... hasta la cantidad indicada en $total_post. Luego el evento que indicas, en js, hace una cosa rarísima y usa un bucle iterado del contenido de videos.data donde asigna un valor u objeto a la variable i. Como no se lo que contiene ese videos.data, no puedo decirte con certeza si lo que hace es correcto o funciona o es causa fallo, pero si la finalidad es recorrer todos los divs con id que comience en player, podrías usar esto para recuperar las id:

Código:
  1. <?php
  2. for ($i=1; $i <= $total_post ; $i++) {
  3. $concatenar = "player".$i;
  4. echo "<div id='".$concatenar."' ></div>";
  5. };
  6. echo "<script>var videos_totales=".$total_post."</script>";
  7. ?>


... y luego en el js...

Código:
  1. function onYouTubeIframeAPIReady() {
  2.  
  3. __ajax("listar.php","").done(function(info){
  4. var videos = JSON.parse(info);
  5. var contador = videos.data.length;
  6. for(var i=1;i<=videos_totales;i++){
  7. ids = 'player'+i; // de esta forma tendriamos todos los ids
  8. player = new YT.Player(ids, {
  9. height: '150',
  10. width: '250',
  11. videoId:youtube_parser(videos.data[i].imagen),
  12. events: {
  13. 'onStateChange': onPlayerStateChange
  14. }
  15. });
  16. }
  17. });
  18. }
  19. function onPlayerStateChange(event) {
  20. if (event.data == 3) {
  21.  
  22. }
  23. }




Gracias por responder, lo que cargo en el listar.php es

Código:
  1.  
  2. <?php
  3.  
  4. require 'funciones.php';
  5.  
  6. $conexion = conexion('galeria_videos','root','');
  7.  
  8. if(!$conexion){
  9. die();
  10. }
  11.  
  12. $statement = $conexion->prepare("SELECT * FROM videos");
  13. $valor = $statement->execute();
  14.  
  15. if ($valor) {
  16. while ($resultado = $statement->fetch(PDO::FETCH_ASSOC)) {
  17. $data["data"][] = $resultado;
  18. }
  19. echo json_encode($data);
  20. }else{
  21. echo "error";
  22. }
  23. $statement->closeCursor();
  24.  
  25. ?>
  26.  


La base de datos es tiene una tabla videos, que tiene un id e imagen(urls)
En videos.data[i].imagen = obtengo la url del video (youtube.com/dadqwewes) desde base de datos
videos.data[i].id = obtengo los identificador de cada video (1,2,3,4) desde base de datos

Ya puedo cargar todos los videos como si fuera una galeria de youtube, esto es con el metodo onYouTubeIframeAPIReady(), eso lo puedo hacer sin problemas. Lo que no puedo solucionar es el evento onPlayerStateChange(event), necesito obtener los id (player1,player2,player3) de los DIV que cargan los iframes o videos de youtube al pulsar un video,(ejemplo si pulso el video que esta en player2, obtener un alert() diciendo player2 ).

Esto para luego asociar el video y poder obtener el identificador en la base de dato y redirigir a otra pagina de acuerdo ese id de la base de datos. (pagina.php?id=2).

Volver arriba
Ver perfil del usuario Enviar mensaje privado
Responder al Tema
Mostrar mensajes anteriores:   
Ir a:  
Todas las horas están en GMT + 2 Horas

Temas relacionados

Tema Autor Foros Respuestas Publicado
El foro no contiene ningún mensaje nuevo

Tutorial Python Rápido para Principiantes

Errodringer Python 0 Viernes 14 Sep 2018 19:38 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Consulta sobre un tipo de PLUGIN para insertar ...

Federico Jose Temas generales 1 Sábado 08 Sep 2018 18:57 Ver último mensaje
El foro no contiene ningún mensaje nuevo

ayuda ayuda para este codigo que me sale error ...

DiegoBV C, C#, Visual C++ 0 Jueves 02 Ago 2018 23:52 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Buscamos Ingeniero de Software para Barcelona

AndresCG Bolsa de trabajo 0 Miércoles 18 Jul 2018 10:14 Ver último mensaje
El tema está bloqueado: no pueden editarse ni agregar mensajes.

Solicito programadores para mi proyecto

alexpin Bolsa de trabajo 0 Miércoles 23 May 2018 22:53 Ver último mensaje
Panel de Control
No puede crear mensajes, No puede responder temas, No puede editar sus mensajes, No puede borrar sus mensajes, No puede votar en encuestas,