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内に挿入します。それから私は、 "プレイヤーとのコールを操作することができplayVideo()、pauseVideo()それには、など。

しかし、すでにページ上にあるiframeプレーヤーで操作できるようにしたいのですが。

私はこれを古い埋め込みメソッドで非常に簡単に行うことができました：

player = getElementById('whateverID');
player.playVideo();

ただし、これは新しいiframeでは機能しません。すでにページ上にあるiframeオブジェクトを割り当て、そのAPI関数を使用するにはどうすればよいですか？

フィドルリンク：ソースコード - プレビュー - 小さいバージョンの
更新：この小さい関数は、コードを単一方向でのみ実行します。あなたは完全なサポート（例えば、イベントリスナー/ゲッターを）したい場合は、見ていでのjQueryでYouTubeのイベントのためのリスニングを

詳細なコード分析の結果、関数を作成しましたfunction callPlayer。フレーム化されたYouTubeビデオで関数呼び出しを要求します。可能な関数呼び出しの完全なリストを取得するには、YouTube APIリファレンスをご覧ください。説明については、ソースコードのコメントを参照してください。

2012年5月17日、プレーヤーのレディ状態を処理するためにコードサイズが2倍になりました。プレーヤーのレディ状態を処理しないコンパクトな関数が必要な場合は、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：「動作しません」は明確な説明ではありません。エラーメッセージは表示されますか？関連するコードを表示してください。

Q：playVideo動画が再生されません。
A：再生にはユーザーの操作、およびallow="autoplay"iframeの存在が必要です。https://developers.google.com/web/updates/2017/09/autoplay-policy-changesおよびhttps://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guideを参照してください

Q：を使用してYouTubeビデオを埋め込みました<iframe src="http://www.youtube.com/embed/As2rZGPGKDY" />が、関数は何の関数も実行しません！
あ：?enablejsapi=1URLの最後に追加する必要があります：/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
Official API でYoutubeイベントをリッスン：https : //developers.google.com/youtube/iframe_api_reference

改訂履歴

• 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が読み込まれると無限再帰が発生するバグを修正しました。自動再生に関するメモを追加します。

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を指定する必要がないことも意味します。

ビデオプレーヤーのロードを参照してください。

はるかに少ないコードでこれを行うことができます：

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/

上記の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 || []
        } ), '*');
    }
}

Rob Wの回答ありがとうございます。

私はこれをCordovaアプリケーション内で使用して、APIをロードする必要をなくし、動的にロードされるiframeを簡単に制御できるようにしています。

私は常に状態（getPlayerState）や時間（getCurrentTime）などの情報をiframeから抽出できる機能を求めていました。

Rob Wは、postMessageを使用してAPIがどのように機能するかを強調するのに役立ちましたが、もちろんこれは、Webページからiframeへの一方向にのみ情報を送信します。ゲッターにアクセスするには、iframeからポストバックされたメッセージをリッスンする必要があります。

iframeから返されたメッセージをアクティブにして聞くためにRob Wの回答を微調整する方法を理解するには、少し時間がかかりました。メッセージの送受信を担当するコードが見つかるまで、基本的にYouTube iframe内のソースコードを検索しました。

重要なのは、「イベント」を「リスニング」に変更することでした。これにより、基本的に、値を返すように設計されたすべてのメソッドにアクセスできるようになりました。

以下は私の解決策です。ゲッターが要求されたときにのみ「リスニング」に切り替えたことに注意してください。条件を調整して追加のメソッドを含めることができます。

さらに、window.onmessageにconsole.log（e）を追加すると、iframeから送信されたすべてのメッセージを表示できることに注意してください。リスニングがアクティブ化されると、ビデオの現在の時間を含む絶え間ない更新を受け取ることがわかります。getPlayerStateなどのゲッターを呼び出すと、これらの一定の更新がアクティブになりますが、状態が変化したときにのみビデオの状態を含むメッセージが送信されます。

function callPlayer(iframe, func, args) {
    iframe=document.getElementById(iframe);
    var event = "command";
    if(func.indexOf('get')>-1){
        event = "listening";
    }

    if ( iframe&&iframe.src.indexOf('youtube.com/embed') !== -1) {
      iframe.contentWindow.postMessage( JSON.stringify({
          'event': event,
          'func': func,
          'args': args || []
      }), '*');
    }
}
window.onmessage = function(e){
    var data = JSON.parse(e.data);
    data = data.info;
    if(data.currentTime){
        console.log("The current time is "+data.currentTime);
    }
    if(data.playerState){
        console.log("The player state is "+data.playerState);
    }
}