para una cartera de una página, tengo un código de repetición para cada botón que controla algunos reproductores de video poblados por CMS.

Tendré de 15 a 20 jugadores para controlar con cada uno su propio botón en la página para iniciarlo y el botón de retorno para detener (1 en cada sección). Uso Webflow que limita la cantidad de caracteres para el código.

Me encantaría encontrar la forma más corta/inteligente de escribir esto para cada jugador sin 20 repeticiones en el código.

 ///////// for Player 0 // // Play on click .titre on('#titre-2', 'click', () => { players[0].play(); }); // Stop and back to 0 at end players[0].on('ended', function(event) { players[0].pause(); players[0].currentTime = 0; ////////// for Player 1 // // play on click .titre on('#titre-3', 'click', () => { players[1].play(); }); // stop at end players[1].on('ended', function(event) { players[1].pause(); players[1].currentTime = 0; }); /////// for player 3 //// ...

... y así sucesivamente para 15 a 20 jugadores, hasta el último jugador (la cantidad de jugadores está sujeta a cambios al actualizar la cartera con CMS)

EDITAR: aquí está el código completo desde el principio, con la parte del código para cada jugador al final, que debe mejorarse:

 <script src="https://cdn.plyr.io/3.5.6/plyr.js"></script> <script> document.addEventListener('DOMContentLoaded', () => { const controls = [ 'play-large','restart','play','progress', 'current-time','mute','volume','fullscreen' ]; //init PLAYERS const players = Array.from(document.querySelectorAll('.player_js')).map(p => new Plyr(p,{ controls })); // Expose player so it can be used from the console window.players = players; // Bind event listener function on(selector, type, callback) { document.querySelector(selector).addEventListener(type, callback, false); } ///////// for Player 0 // // Play on click .titre on('#titre-2', 'click', () => { players[0].play(); }); // Stop and back to 0 at end players[0].on('ended', function(event) { players[0].pause(); players[0].currentTime = 0; ////////// for Player 1 // // play on click .titre on('#titre-3', 'click', () => { players[1].play(); }); // stop at end players[1].on('ended', function(event) { players[1].pause(); players[1].currentTime = 0; }); /////// for player 3 //// /// AND SO ON ... });