如何单独控制两个嵌入式iframe YouTube视频?

时间:2012-11-11 14:55:46

标签: javascript youtube youtube-api

所以我的最终目标是让两个视频播放器相互叠加,当一个接近结束时它会淡化音量,并将底层视频的div设置在顶部,然后用新视频淡化音量

我可以使用api成功控制youtube播放器,但我不知道从哪里开始说我想特别等待第一个玩家开始活动而不是任何玩家开始活动。

任何想法?

例如我如何使用此功能区分两个玩家?

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

1 个答案:

答案 0 :(得分:1)

YouTube Iframe API的流程如下:

  1. 加载YouTube API。
  2. 加载后,将调用全局onYouTubeIframeAPIReady方法。
  3. 在此方法中,创建了一个包装器以与带框架的YouTube播放器进行交互。
  4. 问题中的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函数绑定到特定事件。要对两个玩家采取不同的行动,您可以简单地使用不同的功能。

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