YouTube iframe API：既にHTMLに含まれているiframeプレーヤーを制御するにはどうすればよいですか？
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内に挿入します。次に、「player」を操作して、playVideo()、pauseVideo()などを呼び出すことができます。
しかし、私はすでにページ上にあるiframeプレーヤーで操作できるようにしたいです。
次のようなものを使用して、古い埋め込みメソッドを使用してこれを非常に簡単に行うことができました：
player = getElementById('whateverID');
player.playVideo();
しかし、これは新しいiframeでは機能しません。すでにページにあるiframeオブジェクトを割り当てて、そのAPI関数を使用するにはどうすればよいですか？
フィドルリンク： ソースコード - プレビュー - スモールバージョン
更新：この小さな関数はコードを一方向にのみ実行します。完全なサポート（イベントリスナー/ゲッターなど）が必要な場合は、at jQueryのYoutubeイベントのリッスンをご覧ください。
コードを詳細に分析した結果、関数を作成しました。function callPlayerは、フレーム化されたYouTubeビデオで関数呼び出しを要求します。 YouTube Apiリファレンス を参照して、可能な関数呼び出しの完全なリストを取得してください。説明については、ソースコードのコメントを参照してください。
2012年5月17日に、プレーヤーの準備状態を管理するためにコードサイズが2倍になりました。プレーヤーの準備状態を処理しないコンパクトな関数が必要な場合は、 http://jsfiddle.net/8R5y6/ を参照してください。
/**
* @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");
考えられる質問（＆回答）：
Q：動作しません！
A：「動作しない」は明確な説明ではありません。エラーメッセージは表示されますか？関連するコードを示してください。
Q：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
Q：<iframe src="http://www.youtube.com/embed/As2rZGPGKDY" />を使用してYouTubeビデオを埋め込みましたが、関数は関数を実行しません！
A：URLの最後に?enablejsapi=1を追加する必要があります：/embed/vid_id?enablejsapi=1。
Q：「無効または無効な文字列が指定されました」というエラーメッセージが表示されます。どうして？
A：APIはローカルホスト（file://）で正しく機能しません。 （テスト）ページをオンラインでホストするか、 JSFiddle を使用します。例：この回答の上部にあるリンクを参照してください。
Q：どうやってこれを知ったの？
A：APIのソースを手動で解釈するために時間を費やしました。 postMessage メソッドを使用する必要があると結論付けました。どの引数を渡すかを知るために、メッセージをインターセプトするChrome拡張機能を作成しました。拡張機能のソースコードは こちら からダウンロードできます。
Q：どのブラウザがサポートされていますか？
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日、
&Origin=*をURLから削除するための推奨事項を撤回しました。 - 2019年4月9日、ページの準備が完了する前にYouTubeがロードされると無限再帰が発生するバグを修正しました。自動再生に関するメモを追加します。
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を新しいものに置き換える代わりに使用します。これは、コンストラクターにvideoIdを指定する必要がないことも意味します。
ビデオプレーヤーの読み込み を参照してください。
はるかに少ないコードでこれを行うことができます。
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 || []
}), '*');
}
}
}
上記の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 || []
} ), '*');
}
}