He aplicado plyr.js con eventos de reproducción y pausa para ingresar y salir automáticamente de la pantalla completa, respectivamente.
pero los métodos de eventos no funcionan en varios videos, solo funcionan cuando aplico un solo video.
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; }A continuación se muestra el enlace para descargar el archivo HTML
https://github.com/Yusufzai/issue-plyer.js-github.git
Cualquier ayuda sería apreciada
Me tomó algo de tiempo, pero descubrí mi error, lo que estoy haciendo mal.
No lo estoy implementando en el bucle para extraer esos valores.
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') }) }