YouTube API Target (несколько) существующих iframe (s)

Ответ 1

TL; DR: DEMO: http://jsfiddle.net/KtbYR/5/

YT_ready, getFrameID и onYouTubePlayerAPIReady - это функции, определенные в этом ответе. Оба метода могут быть реализованы без какой-либо предварительно загруженной библиотеки. В моем предыдущем ответе я показал способ реализации функции для одного кадра.

В этом ответе я фокусируюсь на нескольких кадрах.

Код примера HTML (важные теги и атрибуты заглавные буквы, <iframe src id>):

<div>
  <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
  <IFRAME ID="frame1" SRC="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" width="640" height="390" frameborder="0"></IFRAME>
</div>
<div>
  <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
  <IFRAME ID="frame2" SRC="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" width="640" height="390" frameborder="0"></IFRAME>
</div>

JavaScript-код (YT_ready, getFrameID, onYouTubePlayerAPIReady и загрузчик API фрейма YouTube script определены здесь)

var players = {}; //Define a player storage object, to expose methods,
                  //  without having to create a new class instance again.
YT_ready(function() {
    $(".thumb + iframe[id]").each(function() {
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { //If the frame exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onReady": createYTEvent(frameID, identifier)
                }
            });
        }
    });
});

// Returns a function to enable multiple events
function createYTEvent(frameID, identifier) {
    return function (event) {
        var player = players[frameID]; // Set player reference
        var the_div = $('#'+identifier).parent();
        the_div.children('.thumb').click(function() {
            var $this = $(this);
            $this.fadeOut().next().addClass('play');
            if ($this.next().hasClass('play')) {
                player.playVideo();
            }
        });
    }
}

В моем предыдущем ответе я связал событие onStateChange. В этом примере я использовал событие onReady, потому что вы хотите вызывать функции только один раз при инициализации.

Этот пример работает следующим образом:

• Следующие методы определены в этом ответе.

  • API рамки YouTube загружается из http://youtube.com/player_api.
  • Когда этот внешний script завершил загрузку, вызывается onYouTubePlayerAPIReady, который, в свою очередь, активирует все функции, определенные с помощью YT_ready

• Объявление следующих методов показано здесь, но реализовано с помощью этого ответа. Объяснение, основанное на примере:

  • Проходит через каждый объект <iframe id>, который помещается сразу после <.. class="thumb">.
  • В каждом элементе кадра извлекается id и сохраняется в переменной identifier.
  • Внутренний идентификатор iframe извлекается через getFrameID. Это гарантирует, что <iframe> правильно отформатирован для API. В этом примере кода возвращаемый идентификатор равен identifier, потому что я уже привязал идентификатор к <iframe>.
  • Когда существует <iframe> и действительное видео YouTube, создается новый экземпляр игрока, и ссылка сохраняется в объекте players, доступном по ключу frameID.
  • При создании экземпляра игрока определено событие ** onReady *. Этот метод будет вызываться, когда API полностью инициализируется для фрейма.

  • createYTEvent
    Этот метод возвращает динамически создаваемую функцию, которая добавляет функциональность для отдельных игроков. Наиболее важными частями кода являются:

    function createYTEvent(frameID, identifier) {
        return function (event) {
            var player = players[frameID]; // Set player reference
            ...
                    player.playVideo();
        }
    }
    

    • frameID - это идентификатор фрейма, используемый для включения API фрейма YouTube.
    • identifier - это идентификатор, определенный в YT_ready, не обязательно элемент <iframe>. getFrameID попытается найти ближайший соответствующий фрейм для данного идентификатора. То есть, он возвращает идентификатор данного элемента <iframe> или: если данный элемент не является <iframe>, функция ищет дочерний элемент, который является <iframe>, и возвращает идентификатор этого фрейма. Если фрейм не существует, функция поставит заданный идентификатор на -frame.
    • Игроки [playerID] `относятся к инициализированному экземпляру игрока.

Убедитесь, что вы также проверяете этот ответ, поскольку основная функциональность этого ответа основана на этом.

Другие ответы API календаря YouTube. В этих ответах я продемонстрировал различные реализации интерфейса YouTube Frame/JavaScript.