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


149

Я хочу иметь возможность контролировать плееры 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 на нем?


Я написал абстракцию для работы с YouTube IFrame API github.com/gajus/playtube
Gajus

Ответы:


316

Скриптовые ссылки: Исходный код - Предварительный просмотр - Маленькая версия
Обновление: эта небольшая функция будет выполнять код только в одном направлении. Если вам нужна полная поддержка (например, прослушиватели / получатели событий), взгляните на 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 загружался до того, как страница была готова. Добавить заметку об автоигре.

@RobW Я попробовал это на самом деле. Похоже, что JSON по ошибке не тот, что в вашем скрипте, а внутри iframe как часть API youtube.
Fresheyeball

@RobW спасибо за этот хороший фрагмент. Нашли ли вы какие-либо способы использовать Message Event вместо JS API youtube для добавления прослушивателя событий?
Brillout

@ brillout.com PostMessageМетод основан на API YT JS ( ?enablejsapi=1). Без включения JS API postMessageметод не будет ничего делать. См. Связанный ответ для простой реализации прослушивателей событий. Я также создал, но не опубликовал читаемый код для связи с фреймом. Я решил не публиковать его, поскольку его эффект аналогичен стандартному API кадров YouTube.
Роб W

1
@MatthewBaker Для этого необходимо прослушать событие сообщения и проанализировать состояние результата. Это не так просто, как простые звонки playVideo, поэтому я рекомендую использовать официальный API для этого. См. Developers.google.com/youtube/iframe_api_reference#Events .
Роб W

1
@ffyeahh Я не вижу очевидной ошибки. Пожалуйста, задайте новый вопрос с отдельными шагами для воспроизведения вместо добавления вопросов в комментариях к этому ответу.
Роб Вт

33

Похоже, 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 для конструктора.

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


1
@raven Вы пропустили параметр autoplay = 1 в URL. В вашем примере URL это будет youtube.com/embed/M7lc1UVf-VE?enablejsapi=1& autoplay = 1 & origin = example.com
alengel

@alengel он не хочет использовать параметр autoplay-url. Вместо этого он пытается запустить видео с помощью функции автозапуска js-API. Но по какой-то причине функция onYouTubeIframeAPIReady () не вызывается.
Humppakäräjät

@ raven Я понял это. 1) удалите & origin = example.com из URL-адреса iframe. 2) в разделе «Frameworks & Extensions» вашего jsfiddle установите второе выпадающее меню на «No wrap in - <head>» 3) добавьте в качестве внешнего ресурса API iframe youtube ( youtube.com/iframe_api ); Я раздвоил твою скрипку и применил эти изменения: jsfiddle.net/e97famd1/1
Humppakäräjät

Любая идея, что eventили commandотправить в YT iframe, чтобы остановить listeningстатус?
mkhatib

@CletusW: Я получаю эту ошибку: Uncaught (в обещании) DOMException: запрос play () был прерван вызовом pause (). Обещание (асинхронное) (анонимно) @ scripts.js: 20 dispatch @ jquery-1.12.4.js: 5226 elemData.handle @ jquery-1.12.4.js: 4878 cast_sender.js: 67 Неудачное DOMException: Не удалось создать PresentationRequest ': Презентация небезопасного документа [cast: 233637DE ?abilities = video_out% 2Caudio_out & clientId = 153262711713390989 & autoJoinPolicy = tab_and_origin_scoped & defaultActionPolicy = cast_this_tab & launchTimeout = 30000] запрещена в безопасном контексте.
LauraNMS

20

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

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/


Мне очень понравился этот способ, я просто адаптировал его для работы с директивой Angular, поэтому не нужно было выполнять весь цикл и передавать функцию в зависимости от функции переключения с областью действия (в основном, если отображается видео -> автозапуск; еще -> пауза Видео). Спасибо!
ДД.

Вы должны поделиться директивой, может быть полезным!
Ким Т

1
Вот адаптация кода для пера: codepen.io/anon/pen/qERdza Надеюсь, это поможет! Это также переключает нажатие клавиши ESC, когда у вас есть видео
DD.

Это кажется слишком хорошим, чтобы быть правдой! Есть ли какие-либо ограничения браузера / безопасности для использования этого метода?
Дан

Да, IE имеет несколько ограничений, особенно IE10, который поддерживает MessageChannel вместо postMessage: caniuse.com/#search=postMessage также следует помнить, что любые политики безопасности контента также будут ограничивать использование этой функции
Kim T

5

Моя собственная версия приведенного выше кода Ким Т, которая сочетается с некоторыми 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 || []
        } ), '*');
    }
}

Как узнать, что YouTube играет? любой обратный вызов от iframe YouTube, так что снаружи можно подписаться?
Молоток

@Hammer Ознакомьтесь с разделом «События API YouTube», в частности OnStateChange: developers.google.com/youtube/iframe_api_reference#Events
adamj,

@admj, можешь это проверить? Некоторое странное поведение ... stackoverflow.com/questions/38389802/…
Хаммер

0

Спасибо 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);
    }
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.