如何在多个播放器上使用来自 youtube iframe API 的事件

Question

我发现这个小提琴js使用youtube iframe api来检测视频何时结束

http://jsfiddle.net/jakecigar/8tgycb50/14/

我想在多个玩家身上使用这个"onStateChange"。

我已经成功添加了多个玩家，但我不知道如何在他们身上使用事件。

提前谢谢。

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var playerInfoList = [{
id: 'player1',
videoId: 'dOy7vPwEtCw'
}, {
id: 'player2',
videoId: 'QWtsV50_-p4'
}, {
id: 'player3',
videoId: 'y-JqH1M4Ya8'
}, {
id: 'player4',
videoId: 'gH7dMBcg-gE'
}, {
id: 'player5',
videoId: '7wL9NUZRZ4I'
}, {
id: 'player6',
videoId: 'S4R8HTIgHUU'
}];
function onYouTubeIframeAPIReady() {
if (typeof playerInfoList === 'undefined') return;
for (var i = 0; i < playerInfoList.length; i++) {
var curplayer = createPlayer(playerInfoList[i]);
players[i] = curplayer;
}
}
var players = new Array();
function createPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
events: {
'onStateChange': onPlayerStateChange
},
videoId: playerInfo.videoId,
playerVars: {
showinfo: 0,
}
});
}
</script>
<div class="wrapper">
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
</div>
<div class="wrapper">
<div id="player4"></div>
<div id="player5"></div>
<div id="player6"></div>
</div>

Answer 1

我想出了这个解决方案。不确定这是否是正确的方法，但它有效。

首先更新创建添加事件的播放器的函数：

function createPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
events: { 
'onStateChange': function(event) {
onPlayerStateChange(event, playerInfo.id);
}
},
videoId: playerInfo.videoId,
playerVars: {
showinfo: 0,
}
});
}

然后事件函数

function onPlayerStateChange(event, player) {
let playerId = document.getElementById('player');
}