我在我的网页上使用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>
JS
const players = Plyr.setup('.plyr', options);
现在,如果我在页面上播放视频#3,我该如何获取该实例,以便我可以控制播放器并监听该实例事件,以便我可以对其进行其他操作。
该文档仅讨论实例化一个播放器时的单个实例
const player = new Plyr('#player', options);
但我一次实例化了多个......
你应该做的是像这样将你的变量添加到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);
});
});