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

【问题标题】：Plyr.js - Events not implementing on multiple video elementPlyr.js - 事件未在多个视频元素上实现
【发布时间】：2021-12-14 07:53:32
【问题描述】：

我已将 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>

 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

任何帮助将不胜感激

【问题讨论】：

标签： javascript video plyr plyr.js

【解决方案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')
    })
}

【讨论】：