我刚刚从 Vimeo 的 API 切换到 Plyr.js,所以我可以为我的视频选择自定义海报。以前,我对每个 Vimeo 播放器进行了硬编码,因此一旦播放或暂停,我就可以调用任何播放器的父级,并相应地更改其 css。
使用 Plyr,我可以使用数组进行设置来简化很多工作。我唯一的问题是现在我无法访问任何数组元素的父级。
我尝试了几种不同的父方法并通读了 Plyrs 文档,但是我对使用数组相当缺乏经验,所以我确信我缺少一些简单的东西。
<html>
<div class="filterDiv sound show vid" id="none" name="Sound Reel">
<div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-
id="351623699">
</div>
</div>
</html>
<script>
var t;
const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
players.forEach(function(element) {
element.on('play', event => {
parentElement = element.parentElement;
parentElement.setAttribute("id","active");
$('#tail').css('visibility', 'visible');
// Do stuff to parent container
t = setTimeout(function() {
parentElement.setAttribute("id","none");
$('#tail').css('visibility', 'hidden');
}, 3000);
});
element.on('pause', event => {
clearTimeout(t);
parentElement = element.parentElement;
parentElement.setAttribute("id","active");
$('#tail').css('visibility', 'visible');
// Do stuff to parent container
});
});
</script>
我的最终目标是检测我页面上的哪个视频被播放或暂停,然后用 js 更改其容器 div。