为许多视频初始化时如何获取 Plyr 当前实例答案

【问题标题】：How to get Plyr current instance when initialized for many videos为许多视频初始化时如何获取 Plyr 当前实例
【发布时间】：2019-02-14 05:35:12
【问题描述】：

我在我的网页中使用 Plyr 来播放 Youtube 嵌入。在我的页面中，我有大约 10 个视频/嵌入，以及我当前的设置如下：

HTML

<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID1"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID2"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID3"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID4"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID5"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID6"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID7"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID8"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID9"></div>
<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID10"></div>

const players = Plyr.setup('.plyr', options);

现在，如果我在页面上播放视频 #3，我如何获取该实例，以便我可以控制播放器并收听该实例事件，以便我可以对这些事件执行其他操作。

文档仅在仅实例化一个播放器时讨论单个实例

const player = new Plyr('#player', options);

但我一次实例化了多个...

【问题讨论】：

标签： javascript youtube embed plyr plyr.js

【解决方案1】：

你应该做的是像这样将你的变量添加到data-plyr-config

<div class="plyr" data-plyr-provider="youtube" data-plyr-embed-id="videoID10" data-plyr-config='{ "the_id": "YOUR ID" }'></div>

然后在你的Js代码中就可以得到变量

const plyr = Plyr.setup('. plyr', config);
    plyr.forEach(function (instance) {
        instance.on('playing', function () {
            console.log(instance.config.the_id);
        });
    });

其中 'the_id' 是您刚刚创建的密钥
注意：键名可以是任何名称

【讨论】：