时间戳

首页 > 解决方案 > 有没有办法在 Plyr 数组中找到元素的父级？

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

问题描述

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

标签： javascriptarraysparentplyr.js

解决方案

我需要做的就是改变我访问父元素的方式，element.media而不是仅仅使用element.

parentElement = element.media.parentElement.parentElement.parentElement

推荐阅读