YouTube API Target (несколько) существующих фреймов

Я пытаюсь понять, как настроить таргетинг на существующий iframe с помощью API YouTube (т.е. без создания iframe с помощью скрипта).

Как обычно, Google не дает достаточно примеров API, но объясняет, что это возможно, здесь http://code.google.com/apis/youtube/iframe_api_reference.html

Вот пример того, что я пытаюсь сделать - должно воспроизводиться видео под миниатюрой. Я почти там, но только первое видео играет...

http://jsfiddle.net/SparrwHawk/KtbYR/2/

Источник

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 и загрузчик сценариев YouTube Frame API определены здесь)

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 событие, потому что вы хотите вызвать функции только один раз, при инициализации.

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

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

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

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

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

    6. 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,
      • Players[playerID]`относится к инициализированному экземпляру игрока.

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

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

Источник
Другие вопросы по тегам