栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

jsfiddle链接: 源代码 -
预览 -
小版本


更新:此小功能将仅在单个方向上执行代码。

经过深入的代码分析,我创建了一个函数:

functioncallPlayer
在任何带框架的YouTube视频上请求一个函数调用。

代码大小增加了一倍,以照顾玩家的就绪状态。如果您需要一个不处理播放器就绪状态的紧凑功能,请参见http://jsfiddle.net/8R5y6/。

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        }), "*");    }        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
不播放视频。

:播放需要用户互动以及
allow="autoplay"
iframe上的存在。

:我已经使用嵌入了YouTube视频,

<iframesrc="http://www.youtube.com/embed/As2rZGPGKDY" />
但是该功能没有执行任何功能!
:您必须
?enablejsapi=1
在URL末尾添加
/embed/vid_id?enablejsapi=1

:我收到错误消息“指定了无效或非法的字符串”。为什么?

:API在本地主机(

file://
)上无法正常运行。在线托管您的(测试)页面,或使用JSFiddle。示例:请参见此答案顶部的链接。

:您怎么知道的?

:我花了一些时间来手动解释API的来源。我得出的结论是我必须使用该

postMessage
方法。为了知道要传递哪些参数,我创建了一个Chrome扩展程序来拦截消息。扩展的源代码可以在这里下载。

:支持哪些浏览器?

:每个支持JSON和的浏览器

postMessage

  • IE 8+
  • Firefox 3.6+(实际上是3.5,但
    document.readyState
    已在3.6中实现)
  • Opera 10.50+
  • Safari 4+
  • Chrome 3+

修订记录

  • 于2012年5月17日
    实施

    onYouTubePlayerReady
    callPlayer('frame_id', function() { ... })

    播放器尚未准备就绪时,功能会自动排队。

  • 2012年7月24日,
    更新并在受支持的浏览器中进行了成功测试(请注意)。

  • 2013年10月10日当函数作为参数传递时,

    callPlayer
    强制检查准备情况。这是必需的,因为在
    callPlayer
    文档准备就绪后,在插入iframe之后立即调用时,无法确定iframe是否已完全准备就绪。在Internet Explorer和Firefox中,这种情况导致的调用太早
    postMessage
    ,被忽略了。

  • 2013年12月12日,建议添加
    &origin=*
    URL。
  • 2014年3月2日,撤消了删除
    &origin=*
    该URL的建议。
  • 2019年4月9日,修复了在页面准备就绪之前加载YouTube时导致无限递归的错误。添加有关自动播放的注释。


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/415958.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号