0

¿Como podría añadir a este listener un botón anterior y siguiente?, sería lo suyo si está en el video 1 que no mostrara el botón anterior y si está en el último video lo mismo para el botón siguiente.

Estoy usando la API YouTube Player, el código es de esta Respuesta SOes, lo he personalizado un poco.

Se que se puede crear un playlist en la API YouTube Iframe, pero en mi caso deseo crearlo mediante botones individuales y luego los botones prev/next, ya que la información, temarios, videos a estudiar, etc. los obtengo vía PHP desde mi Base de Datos.

Mi código : JSFiddle

Intente añadirle un value,i para obtener el índice de los botones, vi en la consola que obtengo un NodeList me muestra todo los botones y un length: 4

  console.log(value);

  editButtons.forEach(function(item, idx, value, i) {

Busque como podría recorrer dicha lista para obtener el index actual y así crear los botones anterior o siguiente. Intente esto:

      value.forEach( 
        function(currentValue, currentIndex, listObj) {
            
            console.log(currentValue, currentIndex); 
          },
        );

Obtengo todo los botones otra vez en la consola y con más información (accesskey: "",...,className: "btn-Play".., etc.)

Pero sigue sin entender como podría hacer estas dos funciones, algo como una típica paginación en PHP que lleva esos botones, tengo que decir que tengo conocimientos muy básicos de JavaScript.

EDIT

Añado nuevas pruebas después del comentario de Sal, pero sigue sin funcionar como debería. Logre que funcionara los botones prev/next nada más carga la página, pero ahora viene el error, si hago click en el botón normal, es decir, por ejemplo carga el video 2, me carga dicho video mediante el otro listener, ahora viene el problema, si ahora hago uso del prev/next ya no me tiene en orden los índices de (var vdo = ['LSdmIKtTkpQ', '4Ur0VvNcgPk', '4WLUQ6BTNwk'];), ya que al hacer uso del botón ya no es 0, como podría solucionar para que me coja el correcto índice los botones prev/next?

// Youtube player
document.addEventListener("DOMContentLoaded", function(event) {

// Array con lista de videos disponibles. Este proces lo tendria que hacer con PHP para obtener estos datos
var vdo = ['n7l1oAYRThQ', 'G3P1IJaY6AA', '353B-kOxWz4'];
// current index (indice actual)
var i = 0;
  
// Creamos variable - boton .btn-play
var editButtons = document.querySelectorAll('.btn-Play');

// Buscamos todos los botones existentes para obtener el boton onclick
editButtons.forEach(function(item, idx) {
   // Añadimos evento onclick a nuestro botones
   item.addEventListener('click', function() {
      
     // Obtengo el numero indice actual       
     let index = vdo.findIndex(el=> el ==item.dataset.id);
     //console.log(index);  
     var i = index; // Modifico el indice actual
      
      // Mostramos data-id del boton on click
      //console.log(item.dataset.id);         
      
      //Obtenemos titulo 
      var dataTitle = item.dataset.title;
      //console.log(dataTitle);
      
      //Cambiar HTML layout de un DIV #titulo
      document.getElementById('title_vdo').innerHTML = dataTitle;

      // Pasamos el id del video a reproducir.
      player.loadVideoById(item.dataset.id);
      
      // Dirigimos con scroll hacia nuestro reproductor (#player)          
      $("html, body").animate({
        scrollTop: $('#player').offset().top 
      }, 2000);

   });
});
  
// Selecionamos botones prev/next
var prevBtn = document.querySelector('.btn-Prev');
var nextBtn = document.querySelector('.btn-Next');


// Evento onclick PREV
prevBtn.addEventListener('click', function() {

   // Mostramos data-id del boton on click
   console.log(i);      

   if (i <= 0) i = vdo.length;
     i--;
     return loadVdo();      
   });

  // Evento onclick NEXT
  nextBtn.addEventListener('click', function() {

      // Mostramos data-id del boton on click
      console.log(vdo[i]);      

      if (i >= vdo.length-1) i = -1;
      i++;
      console.log(vdo[i]); 
      return loadVdo();      
   });

   // Pasamos video a la API Youtube Player
   function loadVdo() {
        // Pasamos el id del video a reproducir.
      return player.loadVideoById(vdo[i]);
   }

});

Añado estos botones:

<button class="btn-Prev font20"><i class='far fa-caret-square-left'>&nbsp;</i></button> 
<button class="btn-Next font20"><i class='far fa-caret-square-right'>&nbsp;</i></button> 

Con estos botones se reproducen los videos en el primer evento onclick.

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

Código EDIT: JSFiddle

Después de pelear, logre hacer funcionar los botones prev/next, incluso que me cambie el título, solo me faltaría que desaparece el botón anterior si está en el video 1 y si está en el último video lo mismo para siguiente, lo podría hacer con PHP, aunque me gustaría con JS.

Código actualizado: JSFiddle

¡Les agradecería la ayuda!

3
  • La función de los botones a añadir es diferente, podrían incluso tener una clase distinta; por lo menos, deberían tener un listener distinto.
    – Sal
    el 11 abr. 2021 a las 1:58
  • @Sal entonces debería crear una función nueva? con dichos botones, pero como puedo sacar entonces en el otro evento en que video estoy, que debo crear alguna lista con todo los videos obtenidos, podría crear un array en PHP y crear un json, voy a ver si encuentra más información. Gracias.
    – D.Bulten
    el 11 abr. 2021 a las 9:30
  • stackoverflow.com/a/50957353/5695795 esta respuesta te funciona? el 11 abr. 2021 a las 21:26

1 respuesta 1

1

Ya lo tenias casi. El era problema el uso de la variable i que no la seteabas y actualizabas bien.

Te he actualizado el código con lo necesario para que funcione para tu caso.

He añadido estos 2 método que se encargan de comprobar la visibilidad de los botones prev/next.

  function toggleVisibilityPrev() {
    // se comprueba que si el video que se esta reproduciendo es el inicial (indice 0) se oculta el boton de previo, sino se muestra 
    prevBtn.style.display = currentVideo <= 0 ? 'none' : 'block'
  }

  function toggleVisibilityNext() {
   // se comprueba que si el video que se esta reproduciendo es el final se oculta el boton de previo
    nextBtn.style.display = currentVideo >= totalVideos ? 'none' : 'block'
  }
// Youtube player
document.addEventListener('DOMContentLoaded', function (event) {
  // Array con lista de videos disponibles. Este proces lo tendria que hacer con PHP para obtener estos datos
  //var vdo = ['n7l1oAYRThQ', 'G3P1IJaY6AA', '353B-kOxWz4'];

  var vdo = [
    { id: 'n7l1oAYRThQ', title: 'Video 1' },
    { id: 'G3P1IJaY6AA', title: 'Video 2' },
    { id: '353B-kOxWz4', title: 'Video 3' }
  ]

  const totalVideos = vdo.length - 1
  // Selecionamos botones prev/next
  var prevBtn = document.querySelector('.btn-Prev')
  var nextBtn = document.querySelector('.btn-Next')

  // current index (indice actual)
  var currentVideo = 0
  // Se usan para comprobar la visibilidad de los botones prev/next
  toggleVisibilityPrev()
  toggleVisibilityNext()

  // Creamos variable - boton .btn-play
  var editButtons = document.querySelectorAll('.btn-Play')

  // Buscamos todos los botones existentes para obtener el boton onclick
  editButtons.forEach(function (item, idx) {
    // Añadimos evento onclick a nuestro botones
    item.addEventListener('click', function (e) {
      // Obtengo numero index actual
      //let index = vdo.findIndex(el=> el ==item.dataset.id);
      
      // en vez de usare el item para comparar el id puedes usar el e.target que hace referencia al botón clicado
      let index = vdo.findIndex((el) => el.id == e.target.dataset.id)
      // Actualizo current index
      currentVideo = index

      //Obtenemos titulo
      var dataTitle = e.target.dataset.title
      //Cambiar HTML layout de un DIV #titulo
      document.getElementById('title_vdo').innerHTML = dataTitle

      // Pasamos el id del video a reproducir.
      player.loadVideoById(e.target.dataset.id)
      toggleVisibilityNext()
      toggleVisibilityPrev()

      // Dirigimos con scroll hacia nuestro reproductor (#player)
      $('html, body').animate({
        scrollTop: $('#player').offset().top
      }, 2000)
    })
  })

  // Evento onclick PREV
  prevBtn.addEventListener('click', function (e) {
    currentVideo = currentVideo - 1
    console.log(currentVideo)

    toggleVisibilityNext()
    toggleVisibilityPrev()
    loadVdo()
  })

  // Evento onclick NEXT
  nextBtn.addEventListener('click', function (e) {
    // Mostramos data-id del boton on click
    currentVideo = currentVideo + 1
    console.log(currentVideo)

    toggleVisibilityNext()
    toggleVisibilityPrev()
    loadVdo()
  })

  // Pasamos video a la API Youtube Player
  // Ahora tambien se encarga de actualizar el nombre del video que se va a reproducir
  function loadVdo() {
    const video = vdo[currentVideo]
    document.getElementById('title_vdo').innerHTML = video.title
    // Pasamos el id del video a reproducir.
    return player.loadVideoById(video.id)
  }

  function toggleVisibilityPrev() {
    // se comprueba que 
    prevBtn.style.display = currentVideo <= 0 ? 'none' : 'block'
  }

  function toggleVisibilityNext() {
    nextBtn.style.display = currentVideo >= totalVideos ? 'none' : 'block'
  }
})

4
  • Muchas gracias, lo acabo de probar en JSFiddle y funciona de maravilla las adaptaciones que has hecho al código :), llevaba todo el día para lograr crear algo funcional, solo tengo conocimientos básicos en JavaScript. Ya estudiare las adaptaciones que has hecho. Un saludo.
    – D.Bulten
    el 11 abr. 2021 a las 20:55
  • Acabo de ver que solo hay un pequeño error, mira los botones prev/next funciona bien si se usan nada más cargar la página, en cambio si hacemos uso de los otros botones para cargar los videos individualmente (.btn-play) y cargo el video 2, me sigue mostrando solo el botón next y debería de mostrar allí también el prev, lo mismo sucede si selecciono el ultimo video mediante los botones normales me muestra solo next. ¿Sabías solucionarlo?
    – D.Bulten
    el 11 abr. 2021 a las 21:33
  • 1
    he actualizado la respuesta espero que sea eso lo que dices
    – hawks
    el 11 abr. 2021 a las 21:39
  • Ahora sí, era gusto eso. Un pequeño detalle. Gracias de nuevo.
    – D.Bulten
    el 11 abr. 2021 a las 21:44

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.