YouTube iframe API：如何控制 HTML 中已有的 iframe 播放器？

Question

我希望能够控制基于 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
        }
    });
}

该代码创建一个新的播放器对象并将其分配给“player”，然后将其插入 #container div 内。然后我可以对“播放器”进行操作并对其调用 playVideo()、pauseVideo() 等。

但是我希望能够在页面上已有的 iframe 播放器上进行操作。

我可以使用旧的嵌入方法轻松地完成此操作，例如：

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

但这不适用于新的嵌入方法iframe。如何分配页面上已有的 iframe 对象，然后在其上使用 API 函数？

Answer 1

Fiddle 链接：源代码 - 预览 - 小版本
更新：这个小函数只会在一个方向上执行代码。如果您需要全面支持（例如事件监听器/获取器），请查看 在 jQuery 中监听 Youtube 事件

经过深入的代码分析，我创建了一个函数：function callPlayer 请求函数调用在任何带框的 YouTube 视频。请参阅 YouTube Api 参考，获取可能的函数调用的完整列表。阅读源代码中的注释以获得解释。

2012 年 5 月 17 日，代码大小增加了一倍，以照顾玩家的就绪状态。如果您需要一个不处理玩家就绪状态的紧凑函数，请参阅 http://jsfiddle.net/8R5y6/< /a>.

/**
 * @author       Rob W <[email protected]>
 * @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");

可能的问题（和答案）：

问：它不起作用！
A：“不起作用”不是一个明确的描述。您收到任何错误消息吗？请出示相关代码。

问：playVideo无法播放视频。
A：播放需要用户交互，并且 iframe 上存在 allow="autoplay"。请参阅 https://developers.google.com/web/updates/ 2017/09/autoplay-policy-changes 和 https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

问：我使用 嵌入了 YouTube 视频但该函数不执行任何函数！
A：您必须在网址末尾添加 ?enablejsapi=1：/embed/vid_id?enablejsapi=1。

问：我收到错误消息“指定了无效或非法的字符串”。为什么？
A：API 在本地主机 (file://) 上无法正常运行。在线托管您的（测试）页面，或使用 JSFiddle。示例：请参阅此答案顶部的链接。

问：你是怎么知道的？
A：我花了一些时间手动解释 API 的源代码。我的结论是我必须使用 postMessage 方法。为了知道要传递哪些参数，我创建了一个拦截消息的 Chrome 扩展。可以在此处下载该扩展的源代码。

问：支持哪些浏览器？
A：支持 JSON 和 postMessage。

• IE 8+
• Firefox 3.6+ （实际上是 3.5，但 document.readyState 是在 3.6 中实现的）
• Opera 10.50+
• Safari 4+
• Chrome 3+

相关答案/实现：淡入带帧视频使用 jQuery
完整的 API 支持：在 jQuery 中监听 Youtube 事件
官方 API：https://developers.google.com/youtube/iframe_api_reference

修订历史记录

• 2012 年 5 月 17 日
  已实现 onYouTubePlayerReady：callPlayer('frame_id', function() { ... })。
  当玩家尚未准备好时，函数会自动排队。
• 2012 年 7 月 24 日
  已更新并在支持的浏览器中成功测试（展望未来）。
• 2013 年 10 月 10 日
  当函数作为参数传递时，callPlayer 会强制检查准备情况。这是必需的，因为当在文档准备好时插入 iframe 后立即调用 callPlayer 时，它无法确定 iframe 是否已完全准备好。在 Internet Explorer 和 Firefox 中，这种情况导致过早调用 postMessage，该调用被忽略。
• 2013年12月12日，建议在URL中添加&origin=*。
• 2014 年 3 月 2 日，撤回了删除 URL 中的 &origin=* 的建议。
• 2019 年 4 月 9 日，修复了在页面准备好之前加载 YouTube 时导致无限递归的错误。添加有关自动播放的注释。

Answer 2

看起来 YouTube 已经更新了他们的 JS API，所以默认情况下可用！ 使用现有的 YouTube iframe 的 ID...

<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，而不是用新的 iframe 替换它。这也意味着您不必向构造函数指定 videoId。

请参阅加载视频播放器

Answer 3

您可以使用更少的代码来完成此操作：

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/

Answer 4

我自己的 Kim T 代码版本与上面的一些 jQuery 相结合，并允许针对特定的 iframe。

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

Answer 5

谢谢 Rob W 的回答。

我一直在 Cordova 应用程序中使用它，以避免加载 API，这样我就可以轻松控制动态加载的 iframe。

我一直希望能够从 iframe 中提取信息，例如状态 (getPlayerState) 和时间 (getCurrentTime)。

Rob W 帮助强调了 API 如何使用 postMessage 工作，但当然，这只能向一个方向发送信息，从我们的网页到 iframe。访问 getter 需要我们监听从 iframe 发回给我们的消息。

我花了一些时间才弄清楚如何调整 Rob W 的答案以激活并侦听 iframe 返回的消息。我基本上搜索了 YouTube iframe 中的源代码，直到找到负责发送和接收消息的代码。

关键是将“事件”更改为“监听”，这基本上可以访问所有旨在返回值的方法。

以下是我的解决方案，请注意，仅当请求 getter 时我才切换为“监听”，您可以调整条件以包含额外的方法。

进一步注意，您可以通过将 console.log(e) 添加到 window.onmessage 来查看从 iframe 发送的所有消息。您会注意到，一旦激活收听，您将收到不断的更新，其中包括视频的当前时间。调用诸如 getPlayerState 之类的 getter 将激活这些持续更新，但只会在状态发生更改时发送涉及视频状态的消息。

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);
    }
}

Answer 6

我在使用上面的示例时遇到了问题，因此，我只是在源代码中使用带有自动播放功能的 JS 单击时插入了 iframe，它对我来说效果很好。我还可以使用 Vimeo 或 YouTube，所以我需要能够处理这个问题。

这个解决方案并不令人惊奇，可以清理，但这对我有用。我也不喜欢 jQuery，但项目已经在使用它，我只是重构现有代码，随意清理或转换为普通 JS :)

<!-- HTML -->
<div class="iframe" data-player="viemo" data-src="$PageComponentVideo.VideoId"></div>


<!-- jQuery -->
$(".btnVideoPlay").on("click", function (e) {
        var iframe = $(this).parents(".video-play").siblings(".iframe");
        iframe.show();

        if (iframe.data("player") === "youtube") {
            autoPlayVideo(iframe, iframe.data("src"), "100%", "100%");
        } else {
            autoPlayVideo(iframe, iframe.data("src"), "100%", "100%", true);
        }
    });

    function autoPlayVideo(iframe, vcode, width, height, isVimeo) {
        if (isVimeo) {
            iframe.html(
                '<iframe width="' +
                    width +
                    '" height="' +
                    height +
                    '" src="https://player.vimeo.com/video/' +
                    vcode +
                    '?color=ff9933&portrait=0&autoplay=1" frameborder="0" allowfullscreen wmode="Opaque"></iframe>'
            );
        } else {
            iframe.html(
                '<iframe width="' +
                    width +
                    '" height="' +
                    height +
                    '" src="https://www.youtube.com/embed/' +
                    vcode +
                    '?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>'
            );
        }
    }

Answer 7

如果请求不是问题，并且您想要这种行为（例如显示/隐藏视频），一种快速解决方案是删除/添加 iframe，或者清理并填充 源代码。

const stopPlayerHack = (iframe) => {
    let src = iframe.getAttribute('src');
    iframe.setAttribute('src', '');
    iframe.setAttribute('src', src);
}

iframe 将被删除，停止播放，然后立即加载。就我而言，我改进了代码，仅在打开灯箱时再次设置 src，因此仅当用户要求查看视频时才会发生加载。