Plyr.js - 事件未在多個視頻元素上實現

Question

我已經將 plyr.js 與播放和暫停事件分別應用到自動進入和退出全屏。

但是事件方法不適用於多個視頻，它僅在我應用單個視頻時才有效。

HTML

<div class="video-container mini-canvas">
   <video id="player" playsinline class="js-player">
     <source src="./background-image3.mp4" type="video/mp4" />
   </video>

 </div>

 <div class="video-container mini-canvas">
     <video id="player" playsinline class="js-player">
         <source src="./background-image3.mp4" type="video/mp4" />
     </video>

 </div>

JS

 const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p, {
    clickToPlay: true,
 }));



 players.on('play', function() {
    console.log('Play')
    players.fullscreen.enter();
    document.querySelector('.video-container').classList.remove('mini-canvas')
 })
   
 players.on('pause', function() {
    console.log('Pause')
    players.fullscreen.exit();
    document.querySelector('.video-container').classList.add('mini-canvas')
 })

CSS

   .video-container {
        width: 150px;
        margin: 0 auto;
    }
    .video-container.mini-canvas > .plyr {
        filter: blur(2px);
        
    }
    .video-container.mini-canvas .plyr__controls {
        display: none;
    }

下面是下載 HTML 文件的鏈接

https://github.com/Yusufzai/issue-plyer.js-github.git

任何幫助，將不勝感激

Answer 1

我花了一些時間，但我弄清楚我做錯了什么。

我沒有在循環中實現它來提取這些值

for (let index = 0; index < players.length; index++) {
    players[index].on('play', function() {
        console.log('Play')
        players[index].fullscreen.enter();
        document.querySelector('.video-container').classList.remove('mini-canvas')
    })

    players[index].on('pause', function() {
        console.log('Pause')
        players[index].fullscreen.exit();
        document.querySelector('.video-container').classList.add('mini-canvas')
    })
}