YouTube API Target (несколько) существующих фреймов - PullRequest
Новая
       15

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

16 голосов
/ 21 января 2012

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

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

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

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

1 Ответ

34 голосов
/ 21 января 2012

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

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

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

...