2

He modificado mi pregunta tras los comentarios de A.Cedano.

Estoy tratando de implementar la API YouTube Player, la implementación funciona correctamente, si hago click en cualquier button la primera vez, si funciona y inicia el video, ahora el problema viene si hago un segundo onclick para abrir otro video, este no cambia y el video anterior se sigue reproduciéndose y no cambia, en cambio el alert si me muestra el nuevo data-id obtenido para reproducir el nuevo video.

¿Como podría parar el video que se está reproduciendo y recargar el nuevo video en cada onclick?

Para obtener el data-id he usado este ejemplo: Soes

<head>    
<script>      
    /*
      Con querySelectorAll haremos un alcance más específico
      el selector usado aquí signfica simplemente:
      "selecciona todos los elementos de tipo button
       que tengan la clase btn-Editar"
       Significa que otros botones quedarán aislados de esta escucha
       así como otros elementos que tengan esa clase, pero no sean button
    */
    var editButtons = document.querySelectorAll('button.btn-Play');

    /*
      A los elementos alcanzados por el criterio antes indicado
      le asignamos un listener...
      Significa que el click en cualquiera de esos elementos
      ejecutará el código contenido en la función
      en este caso recuperar el data-id
    */
    editButtons.forEach(function(item, idx) {
      item.addEventListener('click', function() {
        /*
           Usaremos la forma que existe para leer los atributos data
           que es dataset
        */
        //console.log(item.dataset.id);
        Player(item.dataset.id);
      });
    });      
</script>
</head>
<body>    

<!-- Reproductor Youtube -->
<div id='player'></div>

<button class="btn-Play" data-id="n7l1oAYRThQ">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4">Video 3</button>
//Etc..

<script>
function Player(id) {
    // alert(id);

    // Api Youtube Player
    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;                   
                   

    window.onYouTubeIframeAPIReady = function() {
        //      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: id,
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }  
                  
    function onPlayerReady(event) {
        event.target.playVideo();
    }
                      
    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
            //setTimeout(stopVideo, 6000);
            done = true;
        }
    }

    function stopVideo() {
        player.stopVideo();
    }
}
</script>
</body>

/*
          Con querySelectorAll haremos un alcance más específico
          el selector usado aquí signfica simplemente:
          "selecciona todos los elementos de tipo button
           que tengan la clase btn-Editar"
           Significa que otros botones quedarán aislados de esta escucha
           así como otros elementos que tengan esa clase, pero no sean button
        */
var editButtons = document.querySelectorAll('button.btn-Play');

/*
  A los elementos alcanzados por el criterio antes indicado
  le asignamos un listener...
  Significa que el click en cualquiera de esos elementos
  ejecutará el código contenido en la función
  en este caso recuperar el data-id
*/
editButtons.forEach(function(item, idx) {
  item.addEventListener('click', function() {
    /*
       Usaremos la forma que existe para leer los atributos data
       que es dataset
    */
    //console.log(item.dataset.id);
    Player(item.dataset.id);
  });
});
<!-- Reproductor Youtube -->
<div id='player'></div>

<button class="btn-Play" data-id="n7l1oAYRThQ">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4">Video 3</button>


<script>
  function Player(id) {
    alert(id);

    // Api Youtube Player
    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;


    window.onYouTubeIframeAPIReady = function() {
      //      function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: id,
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    function onPlayerReady(event) {
      event.target.playVideo();
    }

    var done = false;

    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING && !done) {
        //setTimeout(stopVideo, 6000);
        done = true;
      }
    }

    function stopVideo() {
      player.stopVideo();
    }
  }
</script>

También me gustaría redirigir cuando se hace el onclick en cada boton que se vaya al reproductor ya que este es cargado más arriba (<div id='player'></div>).

Luego, ¿Al usar onlick para reproducir los videos, existe alguna opción de iniciar el video numero 1 al cargar la página?

12
  • Una pregunta, siendo que la API puede funcionar completamente desde el cliente, ¿por qué necesitas ir al servidor mediante Ajax?
    – A. Cedano
    Commented el 6 abr. 2021 a las 22:35
  • @A.Cedano porque muestro los videos sin lista de reproducción, y en cada petición desde el paginado obtengo desde la Base de Datos el data-id de YouTube correspondiente a reproducir, tampoco conozco mucho la API en sí. Encontré el ejemplo tuyo del SOes.
    – D.Bulten
    Commented el 6 abr. 2021 a las 22:43
  • Pues en ese caso puedes crear una función (en JS) para reproducir los vídeos y llamar a esa función pasándole el id del vídeo que obtienes en la petición Ajax. No sé por qué mezclas el código de la reproducción de YouTube con código PHP (eso no tiene ningún sentido cuando usas Ajax). Creo que más que nada tienes un problema de organización de código.
    – A. Cedano
    Commented el 6 abr. 2021 a las 22:58
  • @A.Cedano Lo hago con PHP porque tengo conocimientos básicos de jQuery, está claro que suena mejor tu opción, podría crear un array en PHP con todos los data ID de los videos al cargar la página por primera vez y convertirlo en un Json y trabajar con él a lado del cliente, ya que la información siempre es igual, solo página los videos ¡pero allí me pierdo XD !Por ese motivo obtengo en una url mediante PHP los videos.
    – D.Bulten
    Commented el 6 abr. 2021 a las 23:11
  • 1
    Pues si ya tienes todo lo que necesitas del servidor al cargar la página por primera vez no necesitas estar usando Ajax para esto, como bien dices, puedes guardar los id en un array o en otra estructura en el cliente e ir mostrando los vídeos. Creo que no se trata ni siquiera de una paginación propiamente dicha, sino de algo así como un evento que cambia de algún modo en el cliente, tomando un nuevo vídeo de los que obtuviste de entrada desde el servidor.
    – A. Cedano
    Commented el 6 abr. 2021 a las 23:17

1 respuesta 1

3

La doc de la API dice que puedes llamar un nuevo vídeo usando Funciones de fila. Necesitas por tanto modificar un poco el código, pasando el ID del vídeo a un método loadVideoById() que se encargará de detener el vídeo que pueda estarse reproduciendo e iniciar el nuevo.

Edit 1

Para poner un vídeo por defecto, podrías tener su id cargado (en este caso uso un input oculto con el que será el id por defecto), lo recuperamos en la variable previewID y pasamos esa variable como parámetro al crear el reproductor.

JS

document.addEventListener("DOMContentLoaded", function(event) {


  /*
            Con querySelectorAll haremos un alcance más específico
            el selector usado aquí signfica simplemente:
            "selecciona todos los elementos de tipo button
             que tengan la clase btn-Editar"
             Significa que otros botones quedarán aislados de esta escucha
             así como otros elementos que tengan esa clase, pero no sean button
          */
  var editButtons = document.querySelectorAll('button.btn-Play');


  /*
    A los elementos alcanzados por el criterio antes indicado
    le asignamos un listener...
    Significa que el click en cualquiera de esos elementos
    ejecutará el código contenido en la función
    en este caso recuperar el data-id
  */
  editButtons.forEach(function(item, idx) {
    item.addEventListener('click', function() {
      /*
         Usaremos la forma que existe para leer los atributos data
         que es dataset
      */
      //console.log(item.dataset.id);
      player.loadVideoById(item.dataset.id);
      //Player(item.dataset.id);
    });
  });
});

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;
var previewID = document.getElementById('preview').value;

function onYouTubeIframeAPIReady() {
  console.log(previewID);
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: previewID,
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

var done = false;

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    done = true;
  }
}

function stopVideo() {
  player.stopVideo();
}

HTML

<div id='player'></div>

<button class="btn-Play" data-id="n7l1oAYRThQ">Video 1</button>
<button class="btn-Play" data-id="G3P1IJaY6AA">Video 2</button>
<button class="btn-Play" data-id="353B-kOxWz4">Video 3</button>
<input id="preview" value="n7l1oAYRThQ" hidden /> 

Edit 2: Cambiar los botones por imágenes

Youtube te permite acceder a imágenes del vídeo mediante una URL como esta http://i.ytimg.com/vi/VIDEO-ID/0.jpg, sólo tienes que cambiar VIDEO-ID por el ID del vídeo. Puede que el código quede más elegante si pones algo como esto:

 <input id="preview" value="n7l1oAYRThQ" hidden /> 

<img class="btn-Play" data-id="n7l1oAYRThQ" width="200" height="200" src="http://i.ytimg.com/vi/n7l1oAYRThQ/0.jpg"/>Título 1<br>
<img class="btn-Play" data-id="G3P1IJaY6AA" width="200" height="200" src="http://i.ytimg.com/vi/G3P1IJaY6AA/0.jpg"/>Título 2<br>
<img class="btn-Play" data-id="353B-kOxWz4" width="200" height="200" src="http://i.ytimg.com/vi/353B-kOxWz4/0.jpg"/>Título 3<br>

Los vídeos se mostrarían al hacer clic en cada imagen y no hay que cambiar nada en el códgo Javascript.

Para más detalles sobre esa posibilidad de obtener miniaturas de los vídeos puedes consultar esta pregunta y sus respuestas.


@deprecated

El único engorro aquí es que de entrada te muestra la pantalla en negro con mensaje de error (porque se le pasa un videoid en blanco la primera vez que se crea). Estuve mirando en la API si había forma de llamar el iframe en negro o algo así pero no encontré nada al respecto. Pero seguro que habrá alguna forma de solventar esto. Una opción interesante sería iniciar con un vídeo por defecto, pero no sé si eso aplicaría para tu contexto.

12
  • Más tarde lo pruebo, muchas gracias. Si me gustaría implementar un video por defecto al cargar la página y luego el usuario podrá seleccionar con los botones, digamos el video por defecto sería el video número 1 o según BD (usuario podría seleccionar un video para reproducir más tarde). Podrías añadir un ejemplo como solucionar ese problema y añadir un video por defecto.
    – D.Bulten
    Commented el 7 abr. 2021 a las 20:17
  • Funciona bien, ahora si lo carga, mira que he estado leyendo la documentación y no veía ningún ejemplo, probé con player.stopVideo(); pero no solucionaba el problema. Ahora solo lo que has comentado que al inicio se ve el mensaje de error, si podrías poner algún ejemplo de cómo poner un video por defecto seria de gran ayuda.
    – D.Bulten
    Commented el 7 abr. 2021 a las 20:26
  • @Diablo puedes tener un id por defecto en un 'input` oculto por ejemplo y pasarlo al crear el reproductor. Revisa la respuesta editada.
    – A. Cedano
    Commented el 7 abr. 2021 a las 20:33
  • Luego existe alguna forma cuando se haga clic en el botón después de ser llamado el video, este es automático redirigido hacia la ubicación del video, en este caso sería <div id='player'></div>
    – D.Bulten
    Commented el 7 abr. 2021 a las 20:33
  • He probado el ejemplo con el input hidden localmente, en este caso lo he puesto gusto debajo del video, pero me sigue apareciendo la pantalla con el mensaje de error :(, lo he también intentado colocarlo debajo del ultimo botón, pero tampoco. Parece que lo carga y enseguida se sobrepone el mensaje de error. Lo e subido al servidor que tengo un dominio de pruebas y me hace lo mismo.
    – D.Bulten
    Commented el 7 abr. 2021 a las 20:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.