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

小提琴链接: 源代码-预览-小版本的
更新: 这个小函数只在单个方向上执行代码。如果你想要完全的支持(例如事件监听器/getters) ，可以看看 < a href = “ https://stackoverflow.com/a/7988536/938089? listen-for-Youtube-Event-in-javascript-or-jQuery)”> Listingfor Youtube Event in 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");

可能的问题(及答案) :

Q : 这不管用！
A : “无法工作”不是一个明确的描述。是否收到任何错误消息? 请显示相关代码。

问: playVideo不播放视频。
回放需要用户交互，并且在 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