API iframe YouTube: как мне управлять плеером iframe, который уже находится в HTML?

Я хочу иметь возможность контролировать плееры YouTube на основе iframe. Эти игроки уже будут в HTML, но я хочу контролировать их через JavaScript API.

Я читал документацию по API iframe, в которой объясняется, как добавить новое видео на страницу с помощью API, а затем управлять им с помощью функций проигрывателя YouTube:

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('container', {
        height: '390',
        width: '640',
        videoId: 'u1zgFlCw8Aw',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

Этот код создает новый объект player и назначает его «player», а затем вставляет его в div #container. Тогда я могу работать на «игрок» и вызов playVideo(), pauseVideo()и т.д. на нем.

Но я хочу иметь возможность работать с игроками iframe, которые уже есть на странице.

Я мог бы сделать это очень легко с помощью старого метода встраивания, что-то вроде:

player = getElementById('whateverID');
player.playVideo();

Но это не работает с новыми фреймами. Как я могу назначить объект iframe уже на странице и затем использовать функции API на нем?

Скриптовые ссылки: Исходный код - Предварительный просмотр - Маленькая версия
Обновление: эта небольшая функция будет выполнять код только в одном направлении. Если вам нужна полная поддержка (например, прослушиватели / получатели событий), взгляните на Listening for Youtube Event в jQuery

В результате глубокого анализа кода я создал функцию: function callPlayerзапрашивает вызов функции для любого видео на YouTube с кадрами. См. Ссылку YouTube Api, чтобы получить полный список возможных вызовов функций. Прочитайте комментарии в исходном коде для объяснения.

17 мая 2012 года размер кода был удвоен, чтобы позаботиться о состоянии готовности игрока. Если вам нужна компактная функция, которая не связана с состоянием готовности проигрывателя, см. Http://jsfiddle.net/8R5y6/ .

/**
 * @author       Rob W <gwnRob@gmail.com>
 * @website      https://stackoverflow.com/a/7513356/938089
 * @version      20190409
 * @description  Executes function on a framed YouTube video (see website link)
 *               For a full list of possible functions, see:
 *               https://developers.google.com/youtube/js_api_reference
 * @param String frame_id The id of (the div containing) the frame
 * @param String func     Desired function to call, eg. "playVideo"
 *        (Function)      Function to call when the player is ready.
 * @param Array  args     (optional) List of arguments to pass to function func*/
function callPlayer(frame_id, func, args) {
    if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
    var iframe = document.getElementById(frame_id);
    if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
        iframe = iframe.getElementsByTagName('iframe')[0];
    }

    // When the player is not ready yet, add the event to a queue
    // Each frame_id is associated with an own queue.
    // Each queue has three possible states:
    //  undefined = uninitialised / array = queue / .ready=true = ready
    if (!callPlayer.queue) callPlayer.queue = {};
    var queue = callPlayer.queue[frame_id],
        domReady = document.readyState == 'complete';

    if (domReady && !iframe) {
        // DOM is ready and iframe does not exist. Log a message
        window.console && console.log('callPlayer: Frame not found; id=' + frame_id);
        if (queue) clearInterval(queue.poller);
    } else if (func === 'listening') {
        // Sending the "listener" message to the frame, to request status updates
        if (iframe && iframe.contentWindow) {
            func = '{"event":"listening","id":' + JSON.stringify(''+frame_id) + '}';
            iframe.contentWindow.postMessage(func, '*');
        }
    } else if ((!queue || !queue.ready) && (
               !domReady ||
               iframe && !iframe.contentWindow ||
               typeof func === 'function')) {
        if (!queue) queue = callPlayer.queue[frame_id] = [];
        queue.push([func, args]);
        if (!('poller' in queue)) {
            // keep polling until the document and frame is ready
            queue.poller = setInterval(function() {
                callPlayer(frame_id, 'listening');
            }, 250);
            // Add a global "message" event listener, to catch status updates:
            messageEvent(1, function runOnceReady(e) {
                if (!iframe) {
                    iframe = document.getElementById(frame_id);
                    if (!iframe) return;
                    if (iframe.tagName.toUpperCase() != 'IFRAME') {
                        iframe = iframe.getElementsByTagName('iframe')[0];
                        if (!iframe) return;
                    }
                }
                if (e.source === iframe.contentWindow) {
                    // Assume that the player is ready if we receive a
                    // message from the iframe
                    clearInterval(queue.poller);
                    queue.ready = true;
                    messageEvent(0, runOnceReady);
                    // .. and release the queue:
                    while (tmp = queue.shift()) {
                        callPlayer(frame_id, tmp[0], tmp[1]);
                    }
                }
            }, false);
        }
    } else if (iframe && iframe.contentWindow) {
        // When a function is supplied, just call it (like "onYouTubePlayerReady")
        if (func.call) return func();
        // Frame exists, send message
        iframe.contentWindow.postMessage(JSON.stringify({
            "event": "command",
            "func": func,
            "args": args || [],
            "id": frame_id
        }), "*");
    }
    /* IE8 does not support addEventListener... */
    function messageEvent(add, listener) {
        var w3 = add ? window.addEventListener : window.removeEventListener;
        w3 ?
            w3('message', listener, !1)
        :
            (add ? window.attachEvent : window.detachEvent)('onmessage', listener);
    }
}

Использование:

callPlayer("whateverID", function() {
    // This function runs once the player is ready ("onYouTubePlayerReady")
    callPlayer("whateverID", "playVideo");
});
// When the player is not ready yet, the function will be queued.
// When the iframe cannot be found, a message is logged in the console.
callPlayer("whateverID", "playVideo");

Возможные вопросы (и ответы):

Q : это не работает!
A : «Не работает» не является четким описанием. Вы получаете какие-либо сообщения об ошибках? Пожалуйста, покажите соответствующий код.

Q : playVideoне воспроизводит видео.
A : Воспроизведение требует взаимодействия с пользователем и наличия allow="autoplay"на iframe. См. Https://developers.google.com/web/updates/2017/09/autoplay-policy-changes и https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide.

Q : Я добавил видео на YouTube, <iframe src="http://www.youtube.com/embed/As2rZGPGKDY" />но эта функция не выполняет никаких функций! : Вы должны добавить в конце вашего URL: .
?enablejsapi=1/embed/vid_id?enablejsapi=1

Q : Я получаю сообщение об ошибке «Указана неверная или недопустимая строка». Зачем?
A : API не работает должным образом на локальном хосте ( file://). Разместите свою (тестовую) страницу в Интернете или используйте JSFiddle . Примеры: см. Ссылки в верхней части этого ответа.

Q : Как вы узнали это?
О : Я потратил некоторое время на ручную интерпретацию источника API. Я пришел к выводу, что я должен был использовать postMessageметод. Чтобы узнать, какие аргументы передать, я создал расширение Chrome, которое перехватывает сообщения. Исходный код расширения можно скачать здесь .

Q : Какие браузеры поддерживаются?
A : Каждый браузер, который поддерживает JSON и postMessage.

• IE 8+
• Firefox 3.6+ (фактически 3.5, но document.readyStateбыл реализован в 3.6)
• Опера 10.50+
• Safari 4+
• Chrome 3+

Соответствующий ответ / реализация: добавление видео в рамке с помощью
полной поддержки jQuery API: прослушивание события Youtube в
официальном API jQuery : https://developers.google.com/youtube/iframe_api_reference

Лист регистраций изменений

• 17 мая 2012
  Реализовано onYouTubePlayerReady: callPlayer('frame_id', function() { ... }).
  Функции автоматически ставятся в очередь, когда игрок еще не готов.
• 24 июля 2012
  Обновлен и успешно протестирован в поддерживаемых браузерах (смотри вперед).
• 10 октября 2013 г. Когда функция передается в качестве аргумента, вызывает callPlayerпроверку готовности. Это необходимо, потому что когда callPlayerвызывается сразу после вставки iframe, когда документ готов, он не может точно знать, что iframe полностью готов. В Internet Explorer и Firefox этот сценарий приводил к слишком раннему вызову postMessage, который игнорировался.
• 12 декабря 2013 года, рекомендуется добавить &origin=*в URL.
• 2 марта 2014 года отозвана рекомендация удалить &origin=*по URL.
• 9 апреля 2019 г. - исправлена ​​ошибка, приводившая к бесконечной рекурсии, когда YouTube загружался до того, как страница была готова. Добавить заметку об автоигре.

Похоже, YouTube обновил свой JS API, поэтому он доступен по умолчанию! Вы можете использовать существующий идентификатор iframe на YouTube ...

<iframe id="player" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>

... в вашем JS ...

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange() {
  //...
}

... и конструктор будет использовать ваш существующий iframe вместо его замены новым. Это также означает, что вам не нужно указывать videoId для конструктора.

Смотрите раздел Загрузка видеоплеера

Вы можете сделать это с гораздо меньшим количеством кода:

function callPlayer(func, args) {
    var i = 0,
        iframes = document.getElementsByTagName('iframe'),
        src = '';
    for (i = 0; i < iframes.length; i += 1) {
        src = iframes[i].getAttribute('src');
        if (src && src.indexOf('youtube.com/embed') !== -1) {
            iframes[i].contentWindow.postMessage(JSON.stringify({
                'event': 'command',
                'func': func,
                'args': args || []
            }), '*');
        }
    }
}

Рабочий пример: http://jsfiddle.net/kmturley/g6P5H/296/

Моя собственная версия приведенного выше кода Ким Т, которая сочетается с некоторыми jQuery и позволяет нацеливать определенные фреймы.

$(function() {
    callPlayer($('#iframe')[0], 'unMute');
});

function callPlayer(iframe, func, args) {
    if ( iframe.src.indexOf('youtube.com/embed') !== -1) {
        iframe.contentWindow.postMessage( JSON.stringify({
            'event': 'command',
            'func': func,
            'args': args || []
        } ), '*');
    }
}

Спасибо Rob W за ваш ответ.

Я использую это в приложении Cordova, чтобы избежать необходимости загружать API и чтобы я мог легко контролировать iframes, которые загружаются динамически.

Я всегда хотел иметь возможность извлекать информацию из iframe, такую ​​как состояние (getPlayerState) и время (getCurrentTime).

Роб В помог нам осветить, как работает API с использованием postMessage, но, конечно, это только отправляет информацию в одном направлении с нашей веб-страницы в iframe. Доступ к получателям требует от нас прослушивания сообщений, отправленных нам из iframe.

Мне потребовалось некоторое время, чтобы выяснить, как настроить ответ Роба В., чтобы активировать и прослушать сообщения, возвращаемые iframe. Я в основном искал исходный код в iframe YouTube, пока не нашел код, отвечающий за отправку и получение сообщений.

Ключ изменял «событие» на «прослушивание», это в основном давало доступ ко всем методам, которые были предназначены для возврата значений.

Ниже приведено мое решение, обратите внимание, что я переключился на «прослушивание» только при запросе геттеров, вы можете изменить условие, добавив дополнительные методы.

Также обратите внимание, что вы можете просмотреть все сообщения, отправленные из iframe, добавив console.log (e) в window.onmessage. Вы заметите, что после активации прослушивания вы будете получать постоянные обновления, которые включают текущее время видео. Вызов геттеров, таких как getPlayerState, активирует эти постоянные обновления, но отправит сообщение с состоянием видео, только когда состояние изменилось.

function callPlayer(iframe, func, args) {
    iframe=document.getElementById(iframe);
    var event = "command";
    if(func.indexOf('get')>-1){
        event = "listening";
    }

    if ( iframe&&iframe.src.indexOf('youtube.com/embed') !== -1) {
      iframe.contentWindow.postMessage( JSON.stringify({
          'event': event,
          'func': func,
          'args': args || []
      }), '*');
    }
}
window.onmessage = function(e){
    var data = JSON.parse(e.data);
    data = data.info;
    if(data.currentTime){
        console.log("The current time is "+data.currentTime);
    }
    if(data.playerState){
        console.log("The player state is "+data.playerState);
    }
}