¿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'> </i></button>
<button class="btn-Next font20"><i class='far fa-caret-square-right'> </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!
PHP
y crear unjson,
voy a ver si encuentra más información. Gracias.