javascript - 通过YouTube API动态添加/循环播放多个视频，播放器名称和事件？

Question

我正在尝试使一系列玩家传递给新的YT.Player。我一直未定义'player1'，并且从未将iFrame添加到声明的'playerInfo.id'中。

我的代码，为了简单起见，不包含player2或player3:

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 = [
{playerName: 'player1', id: 'container1', videoId: 'WPvGqX-TXP0', eventId: 'playerOneReady'},
{playerName: 'player2', id: 'container2', videoId: 'Yj0G5UdBJZw', eventId: 'playerTwoReady'},
{playerName: 'player3', id: 'container3', videoId: '9gTw2EDkaDQ', eventId: 'playerThreeReady'}]; 

var players = new Array();

function onYouTubeIframeAPIReady() {
    if (typeof playerInfoList === 'undefined') return;

    for (var i = 0; i < playerInfoList.length; i++) {
        var generatePlayers = createPlayer(playerInfoList[i]);
        players[i] = generatePlayers;
    }
}

function createPlayer(playerInfo) {
    playerInfo.playerName = new YT.Player(playerInfo.id, {
        height: '390',
        width: '640',
        videoId: playerInfo.videoId,
        events: {
            'onReady': playerInfo.eventId
        }
    });
}

// When the Players are ready.
var duration1;

function playerOneReady() {
    duration1 = player1.getDuration();
}

function play(playerNum) {
    playerNum.seekTo(0);
    playerNum.playVideo();
}

$('#player1-trigger').click(function(){
   play(player1);
}

我不确定为什么它会继续以未定义的形式返回。我有一个更简单的结构，可以很好地工作，但是它涉及到手动添加每个玩家，并且我试图使其更加动态/高效。尽管这比动态更有效。

Answer 1

据我所见，您在函数createPlayer中犯了一个错误。当您尝试使用名称player1制作玩家时，实际上是将新的YT.player保存在playerInfo.playername的位置上。最好像这样直接保存在玩家列表中:

function onYouTubeIframeAPIReady() {
 if (typeof playerInfoList === 'undefined') return;

 for (var i = 0; i < playerInfoList.length; i++) {
     var generatePlayers = createPlayer(playerInfoList[i],i);
 }
}

function createPlayer(playerInfo, locationInList) {
players[locationInList] = new YT.Player(playerInfo.id, {
    height: '390',
    width: '640',
    videoId: playerInfo.videoId,
    events: {
        'onReady': playerInfo.eventId
    }
});
}

然后在 call 玩家时使用:

$('#player1-trigger').click(function(){
 play(players[1]);
}

对于将来，我建议在使代码更有效/更动态/更易读时，进行多个较小的更改，并在每次更改后测试代码是否仍然有效。这样一来，更容易找到损坏的地方。