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


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

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

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

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

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

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

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

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

4 137

4 ответа:

Скрипка Ссылки: исходный код -предварительный просмотр -маленькая версия
Обновление: эта небольшая функция будет выполнять код только в одном направлении. Если вы хотите полную поддержку (например, прослушиватели событий / геттеры), посмотрите at прослушивание событий Youtube в jQuery

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

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

/**
 * @author       Rob W <gwnRob@gmail.com>
 * @website      https://stackoverflow.com/a/7513356/938089
 * @version      20131010
 * @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 / 0 = 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 (!domReady ||
               iframe && (!iframe.contentWindow || queue && !queue.ready) ||
               (!queue || !queue.ready) && 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: я встроил видео YouTube с помощью <iframe src="http://www.youtube.com/embed/As2rZGPGKDY" />но функция не выполняет никаких функций!
A: вы должны добавить ?enablejsapi=1 В конце вашего URL:/embed/vid_id?enablejsapi=1.

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

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

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

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

связанный ответ / реализация:Fade-в рамке видео с помощью jQuery
Полная поддержка API: прослушивание событий Youtube в jQuery
Официальный API: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-адресу.

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

посмотреть загрузка видеоплеера

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

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/

моя собственная версия кода Kim T выше, которая сочетается с некоторыми jQuery и позволяет таргетировать конкретные iframes.

$(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 || []
        } ), '*');
    }
}