YouTube iframe API:如何控制 HTML 中已有的 iframe 播放器?

IT技术 javascript youtube-api youtube-javascript-api
2021-01-29 02:13:10

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

但这不适用于新的 iframe。如何分配页面上已有的 iframe 对象,然后在其上使用 API 函数?

6个回答

小提琴链接:源代码-预览-小版本
更新:这个小功能只会在一个方向上执行代码。如果你想完全支持(如事件监听器/吸气),看看侦听YouTube事件中的jQuery

作为深入代码分析的结果,我创建了一个函数:function callPlayer请求对任何带框的 YouTube 视频进行函数调用。请参阅YouTube Api 参考以获取可能的函数调用的完整列表。阅读源代码中的注释以获得解释。

2012 年 5 月 17 日,代码大小增加了一倍,以照顾玩家的就绪状态。如果您需要一个不处理播放器就绪状态的紧凑函数,请参阅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");

可能的问题(和答案):

:它不起作用!
:“不起作用”不是一个明确的描述。您是否收到任何错误消息?请出示相关代码。

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

Q : 我已经嵌入了一个 YouTube 视频,<iframe src="http://www.youtube.com/embed/As2rZGPGKDY" />但该功能没有执行任何功能!
A : 您必须?enablejsapi=1在 URL 末尾添加/embed/vid_id?enablejsapi=1

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

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

:支持哪些浏览器?
:所有支持JSONpostMessage.

  • 浏览器 8+
  • Firefox 3.6+(实际上是 3.5,但document.readyState在 3.6 中实现)
  • 歌剧 10.50+
  • 野生动物园 4+
  • 铬 3+

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

修订记录

  • 2012 年 5 月 17 日
    实施onYouTubePlayerReadycallPlayer('frame_id', function() { ... })
    当播放器尚未准备好时,函数会自动排队。
  • 2012 年 7 月 24 日
    在支持的浏览器中更新并成功测试(展望未来)。
  • 2013 年 10 月 10 日当函数作为参数传递时,callPlayer强制检查准备情况。这是必需的,因为在callPlayer文档准备好插入 iframe 之后立即调用when ,它无法确定 iframe 是否完全准备好。在 Internet Explorer 和 Firefox 中,这种情况导致过早调用postMessage,而这被忽略了。
  • 2013 年 12 月 12 日,建议&origin=*在 URL 中添加
  • 2014 年 3 月 2 日,撤回了删除&origin=*URL 的建议
  • 2019 年 4 月 9 日,修复了在页面准备就绪之前加载 YouTube 时导致无限递归的错误。添加有关自动播放的注释。
@RobW 感谢这个不错的片段。您是否找到了使用 Message Event 而不是使用 youtube JS API 来添加事件侦听器的任何方法?
2021-03-16 02:13:10
@ffyeahh 我没有看到任何明显的错误。请提出一个带有独立重现步骤的新问题,而不是在此答案的评论中添加问题。
2021-03-17 02:13:10
@MatthewBaker 这需要监听消息事件并解析结果的状态。这不像像 那样简单的调用playVideo那么简单,因此我建议为此使用官方 API。请参阅developer.google.com/youtube/iframe_api_reference#Events
2021-03-18 02:13:10
@brillout.com 该PostMessage方法基于 YT JS API ( ?enablejsapi=1)。如果不启用 JS API,该postMessage方法将不会执行任何操作,请参阅链接的答案以轻松实现事件侦听器。我还创建了但未发布的可读代码来与框架进行通信。我决定不发布它,因为它的效果类似于默认的 YouTube Frame API。
2021-03-26 02:13:10
@RobW 我真的试过了。似乎错误的 JSON 不是脚本中的那个,而是作为 youtube API 的一部分在 iframe 中的。
2021-04-04 02:13:10

看起来 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。

请参阅加载视频播放器

@raven 我想通了。1) 从 iframe url 中删除 &origin=example.com。2) 在 jsfiddle 的“Frameworks & Extensions”部分,将第二个下拉菜单设置为“No wrap in - <head>” 3) 添加 youtube iframe api 作为外部资源 ( youtube.com/iframe_api );我分叉了你的小提琴并应用了这些更改:jsfiddle.net/e97famd1/1
2021-03-14 02:13:10
enablejsapi=1url中是至关重要的。一开始我错过了这个。developer.google.com/youtube/...
2021-03-26 02:13:10
知道什么eventcommand发送到 YT iframe 以停止listening状态吗?
2021-04-03 02:13:10
@raven 您在 url 中缺少 autoplay=1 参数。在您的示例网址中,它将是youtube.com/embed/M7lc1UVf-VE?enablejsapi=1& autoplay=1 &origin= example.com
2021-04-08 02:13:10
@alengel 他不想使用 autoplay-url 参数。相反,他尝试使用 js-API 自动播放功能来启动视频。但出于某种原因,没有调用 onYouTubeIframeAPIReady() 函数。
2021-04-10 02:13:10

你可以用更少的代码做到这一点:

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/

这是 Pen 的代码改编:codepen.io/anon/pen/qERdza 希望对您有所帮助!当您打开视频时,它还可以切换按 ESC 键
2021-03-15 02:13:10
是的 IE 有一些限制,尤其是支持 MessageChannel 而不是 postMessage 的 IE10:caniuse.com/#search=postMessage还要注意任何内容安全策略也会限制使用此功能
2021-03-30 02:13:10
你应该分享指令,可能会有用!
2021-04-01 02:13:10
我真的很喜欢这种方式,只是将其调整为与 Angular 指令一起使用,因此不需要所有循环并根据范围的切换功能传递 func(基本上,如果视频显示 -> 自动播放;否则 -> 暂停该视频)。谢谢!
2021-04-02 02:13:10
这似乎好得令人难以置信!使用此方法是否有任何浏览器/安全限制?
2021-04-09 02:13:10

我自己的上面的 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 || []
        } ), '*');
    }
}
@admj,可以检查一下吗?一些奇怪的行为...... stackoverflow.com/questions/38389802/ ......
2021-03-19 02:13:10
@Hammer 查看 YouTube API 事件部分,特别是OnStateChangedevelopers.google.com/youtube/iframe_api_reference#Events
2021-03-21 02:13:10
如何知道youtube正在播放?来自 youtube iframe 的任何回调,以便外部可以订阅?
2021-03-24 02:13:10

我在上面的例子中遇到了问题,所以相反,我只是在源代码中插入带有自动播放的 JS 的 iframe,它对我来说很好用。我也有 Vimeo 或 YouTube 的可能性,所以我需要能够处理它。

这个解决方案并不神奇,可以清理,但这对我有用。我也不喜欢 jQuery,但该项目已经在使用它,我只是重构现有代码,随时清理或转换为 vanilla 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>'
            );
        }
    }