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 步的一部分。在继续之前，我展示了官方文档中示例的一部分。

// 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到特定事件。要为两个玩家采取不同的行动，您可以简单地使用不同的功能。

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