Skip to main content
actualizar funcionamiento botones videos play
Origen Enlace
hawks
  • 3.5k
  • 1
  • 6
  • 16
// 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'
  }
})

// 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)

      // 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'
  }
})

// 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'
  }
})

Origen Enlace
hawks
  • 3.5k
  • 1
  • 6
  • 16

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)

      // 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'
  }
})