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;
    }

下面是link下载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')
    })
}

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

Plyr.js - Events not implementing on multiple video element

javascript

video

plyr