Question

我刚刚从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。

Answer 1

我需要做的就是使用element.media而不是element来更改访问父元素的方式。

parentElement = element.media.parentElement.parentElement.parentElement

有没有办法在Plyr数组中找到元素的父级？

1 个答案: