Javascript 使用youtube api加载多个视频播放器

我需要用youtube的API加载多个视频。这是我第一次使用它，所以我不确定我做错了什么，但这就是我正在尝试的：

  var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      videoId: 'hdy78ehsjdi'
    });
    player2 = new YT.Player('player', {
      videoId: '81hdjskilct'
    });
  }

---

new YT.Player的第一个参数需要是HTML元素（f.e.a DIV）的id，该元素将被替换为视频的iframe。 当您对这两个对象使用“player”时，您将把它们加载到同一个元素中

<div id="ytplayer1"></div>
<div id="ytplayer2"></div>

<script>
  var player;
  var player2;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer1', {
      height: '390',
      width: '640',
      videoId: 'hdy78ehsjdi'
    });
    player2 = new YT.Player('ytplayer2', {
      height: '390',
      width: '640',
      videoId: '81hdjskilct'
    });
  }
</script>

var播放器；
var-player2；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer1'{
高度：“390”，
宽度：“640”，
videoId:'hdy78ehsjdi'
});
player2=新的YT.Player（'ytplayer2'{
高度：“390”，
宽度：“640”，
videoId:'81hdjskilct'
});
}

---

Youtube API文档中描述了函数的参数：
（编辑：更改为右链接）

因为

onYouTubeIframeAPIReady

函数应该仅在使用以下方法时调用：

• 初始化并保存视频播放器信息 阵列中的（

  控件ID、宽度、高度、视频ID

  ）

• 调用

  onyoutubeiframeapiredy

  函数创建所有视频 球员

例子

var playerFolist=[{id:'player'，高度：'390'，宽度：'640'，视频id:'M7lc1UVf-VE'}，{id:'player1'，高度：'390'，宽度：'640'，视频id:'M7lc1UVf-VE'}]；
函数onyoutubeiframeapiredy（）{
如果（playerFolist的类型==='undefined'）
返回；
对于（变量i=0；i

我在React中也需要同样的东西。扩展瓦迪姆的答案，你可以做如下的事情，并将它们添加到一个对象中，然后创建一个玩家，如果你不知道玩家数组会是什么样子

const YoutubeAPILoader = {
  _queue: [],
  _isLoaded: false,

  load: function (component) {
    // if the API is loaded just create the player
    if (this._isLoaded) {
      component._createPlayer()
    } else {
      this._queue.push(component)

      // load the Youtube API if this was the first component added
      if (this._queue.length === 1) {
        this._loadAPI()
      }
    }
  },

  _loadAPI: function () {
    // load the api however you like
    loadAPI('//youtube.com/player_api')

    window.onYouTubeIframeAPIReady = () => {
      this._isLoaded = true
      for (let i = this._queue.length; i--;) {
        this._queue[i]._createPlayer()
      }
      this._queue = []
    }
  }
}

---

我有一个更广泛的问题，可以归结为同一个问题。我的要求是编写一个JS类来管理一个或多个（数量可以从1到无穷多个）视频嵌入。后端系统是ExpressionEngine（但这与此无关）。主要目标是建立一个分析框架，将单个数据推送到我们的Adobe analytics平台。这里显示的只是一部分，让发挥计数，它可以从这里扩展很多

CMS允许编辑在页面上创建显示视频的模块。每个模块一个视频。每个模块基本上都是通过Bootstrap3排列的HTML的一部分（与此答案无关）

相关的HTML如下所示：

HTML

<div data-id="youtubevideoidhere" class="video"></div>
<div data-id="youtubevideoidhere" class="video"></div>
<div data-id="youtubevideoidhere" class="video"></div>

然后，制作这样的视频

var videos = new Videos();
$('.video').each( function () {
    videos.add( $(this) );
})
videos.loadApi();

---

加载多个视频时，我所做的是在视频外部单击时销毁iframe（您可以使用所需的事件），然后我再次创建了div，以便您可以使用另一个视频ID重新使用该div。不过，看起来不需要玩家变量。你是对的mbee，他们可以被排除在外。我只是更正了OPs代码段。您是否使用事件尝试过此操作？由于某些原因，我无法使我的活动正常进行<代码>函数createPlayer（playerInfo）{返回新的YT.Player（playerInfo.id，{videoId:playerInfo.videoId，事件：{'onReady'：onPlayerReady，'onStateChange'：onPlayerStateChange}}；}函数onPlayerReady（事件）{console.log（'ready'）；}注意：我已经修复了一个bug。。。。。您需要过滤YouTube ID中的破折号，因为这些破折号会破坏脚本。例如：innovYouTube{innov_mod_ytplayer:id}，其中id类似于xyz123-123，因为这将使innovYouTube_xyz123-123的变量名明显无效。只是想把它扔出去，格雷西亚斯。阿尤达港。我能解决你的问题。SaludosThis正是我所需要的，但是我怎样才能通过点击按钮播放视频呢？”player.playVideo（）；'似乎不起作用。你有这个的密码笔吗？

// CREATE VIDEOS "CLASS" to handler videos
var Videos = (function() {
    // VARIABLES
    var $   = jQuery,   // The jquery
    players = [],       // players array (to coltrol players individually)
    queue   = [];       // videos queue (once api is ready, transform this into YT player)

    // Constructor
    function Videos() {}

    // METHODS
    // Add elements to queue
    Videos.prototype.add = function($video) {
        queue.push($video);
    };

    // Load YT API
    Videos.prototype.loadApi = function() {
        // jQuery get script
        $.getScript("//www.youtube.com/iframe_api", function() {
            // once loaded, create the onYouTubeIframeAPIReady function
            window.onYouTubeIframeAPIReady = function() {
                queue.forEach(function($video) {
                    // Create the YT player
                    var player = new YT.Player($video.get(0), {
                        'width': "100%",
                        'height': "100%",
                        'videoId': $video.data("id")
                    });
                    // add to players array
                    players.push(player);
                });
            };
        });
    };

    return Videos;

})();

var videos = new Videos();
$('.video').each( function () {
    videos.add( $(this) );
})
videos.loadApi();