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时导致无限递归的错误。添加有关自动播放的注释。



