Plyr.js -未在多个视频元素上实现的事件

Question

我已经应用了带有play和pause事件的plyr.js来分别自动进入和退出全屏。

但events方法不适用于多个视频，只有当我应用单个视频时才有效。

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