更智能的代码，避免重复在一个页面中控制多个播放器

Question

对于单页作品集，我为每个控制由 CMS 填充的视频播放器的按钮设置了一些重复代码。

我将有 15 到 20 个玩家来控制，每个玩家在页面上都有自己的按钮来启动它，return 按钮来停止（每个部分 1 个）。我使用限制代码字符数的 Webflow。

我很想找到 shorter/smarter 方法来为每个玩家编写此代码，而无需在代码中重复 20 次。

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

...

... 以此类推 15 到 20 名玩家，直到最后一名玩家（使用 CMS 更新投资组合时，玩家数量可能会发生变化）

编辑：这是从头开始的完整代码，最后是每个玩家的部分代码，需要改进：

    <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 ...

});

Answer 1

你可以循环代码:

for(let x = 0 ; x < 20 ; x ++){
     // Play on click .titre
    on('#titre-' + (x + 2), 'click', () => { 
    players[x].play();
    });
    // Stop and back to 0 at end 
    players[x].on('ended', function(event) {
    players[x].pause();
    players[x].currentTime = 0;
}

但最好的解决方案是创建 class 名玩家

更智能的代码，避免重复在一个页面中控制多个播放器

Smarter code that avoid repetition to control multiple players in one page

javascript

jquery

onclick

media-player

non-repetitive