[英]Plyr.js - Events not implementing on multiple video element
I have apply plyr.js with play and pause events to automatically enter and exit fullscreen respectively.我已经将 plyr.js 与播放和暂停事件分别应用到自动进入和退出全屏。
but the events methods not working on multiple videos it only works when I apply single video.但是事件方法不适用于多个视频,它仅在我应用单个视频时才有效。
HTML 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 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 CSS
.video-container {
width: 150px;
margin: 0 auto;
}
.video-container.mini-canvas > .plyr {
filter: blur(2px);
}
.video-container.mini-canvas .plyr__controls {
display: none;
}
Below is the link to download HTML file下面是下载 HTML 文件的链接
https://github.com/Yusufzai/issue-plyer.js-github.git https://github.com/Yusufzai/issue-plyer.js-github.git
Any help would be appreciated任何帮助,将不胜感激
It took me some time but I figure out my mistake what I am doing wrong.我花了一些时间,但我弄清楚我做错了什么。
I am not implementing it in the loop to extract those values我没有在循环中实现它来提取这些值
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')
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.