javascript - YOUTUBE的多部电影

Question

我有这样的代码:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player_rfIuA8wXD8c;

function onYouTubePlayerAPIReady() {
  player_YdfNuwMhMg4 = new YT.Player('player_rfIuA8wXD8c', {
    height: '435',
    width: '480',
    videoId: 'rfIuA8wXD8c',
    playerVars: {
      'start': 56,
      'autoplay': 0,
      'controls': 1,
      'playlist': 'rfIuA8wXD8c',
      'loop': 1
    }

  });
}

var player_HmZKgaHa3Fg;

function onYouTubePlayerAPIReady() {
  player_HmZKgaHa3Fg = new YT.Player('player_HmZKgaHa3Fg', {
    height: '480',
    width: '640',
    videoId: 'HmZKgaHa3Fg',
    playerVars: {
      'start': 0,
      'autoplay': 0,
      'controls': 1,
      'playlist': 'HmZKgaHa3Fg',
      'loop': 1
    }

  });
}

<div class="content">
  <div id="player_rfIuA8wXD8c" class="swipebox" rel="yt"></div>
  <span>test text</span>
  <div id="player_HmZKgaHa3Fg" class="swipebox" rel="yt"></div>
</div>

...，并且只能播放最后一部电影( HmZKgaHa3Fg)。我尝试了不同的方法，但仍无法拍摄第一部电影。有没有人遇到过类似的问题，可以建议我做错了什么？谢谢你的帮助

Answer 1

您已经声明了两个函数onYouTubePlayerAPIReady()，只需要实例化一个函数，然后在其中声明两个YT.Player:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = new Array();
var players_attr = new Array();

players_attr["player_rfIuA8wXD8c"] = {
  height: '435',
  width: '480',
  videoId: 'rfIuA8wXD8c',
  playerVars: {
    'start': 56,
    'autoplay': 0,
    'controls': 1,
    'playlist': 'rfIuA8wXD8c',
    'loop': 1
  }

};

players_attr["player_HmZKgaHa3Fg"] = {
  height: '480',
  width: '640',
  videoId: 'HmZKgaHa3Fg',
  playerVars: {
    'start': 0,
    'autoplay': 0,
    'controls': 1,
    'playlist': 'HmZKgaHa3Fg',
    'loop': 1
  }
};

function onYouTubeIframeAPIReady() {
  for (key in players_attr) {
    players[key] = new YT.Player(key, players_attr[key]);
  }
}

<div class="content">
  <div id="player_rfIuA8wXD8c" class="swipebox" rel="yt"></div>
  <span>test text</span>
  <div id="player_HmZKgaHa3Fg" class="swipebox" rel="yt"></div>
</div>