javascript - 如何分别控制两个嵌入的 iframe youtube 视频？

Question

所以我的最终目标是让两个视频播放器相互叠加，当一个播放器接近尾声时它会逐渐降低音量，并将底层视频的 div 设置在顶部，然后随着新视频逐渐增加音量.

我可以使用 api 成功控制 youtube 播放器，但我不知道从哪里开始说我想专门等待第一个玩家开始事件，而不仅仅是任何玩家开始事件。

有什么想法吗？

例如，我如何获得这个功能来区分两个玩家？

function onPlayerReady(event) {
    event.target.playVideo();
}

Answer 1

YouTube Iframe API 的流程如下:

1. 加载 YouTube API。
2. 加载时，调用全局 onYouTubeIframeAPIReady 方法。
3. 在此方法中，将创建一个包装器以与框架 YouTube 播放器进行交互。

您问题中的 onPlayerReady 方法是步骤 3 的一部分。在我继续之前，我展示了 the example 的一部分。来自官方文档。

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      // ...
      events: {
         'onReady': onPlayerReady // <-------
      // ...

在此示例中，您清楚地看到您 将onPlayerReady 函数绑定(bind)到特定事件。要让两个玩家采取不同的行动，您可以简单地使用不同的函数。

player1 = new YT.Player('id_of_player1', {
    events: {
       'onReady': onPlayerReady1
    } // ...
};
player2 = new YT.Player('id_of_player2', {
    events: {
       'onReady': onPlayerReady2
    } // ...
};