web-dev-qa-db-ja.com

既存のYouTubeプレーヤーへの参照を取得するにはどうすればよいですか？

_<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>_

上記のようなソースコードを使用してYouTubeビデオを埋め込むとどうなるかについて、いくつか質問があります。このコードは、ユーザーが好きな方法でビデオを処理するYouTubeプレーヤーオブジェクトを生成する必要があります。 （埋め込みコードを使用する代わりに）Youtube Player APIを使用して自分でYoutube Playerを生成すると、その上で関数を呼び出すことができます。

_var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//player.playVideo(); will play the video.
_

私の質問は、埋め込みコードによって生成されたプレーヤーオブジェクトをどのように制御するのですか？別の言い方をすれば、ページ http://www.youtube.com/watch?v=M7lc1UVf-VE から、SOMEPlayer.playVideo()を呼び出してビデオを再生するにはどうすればよいですか？ URLにアクセスすると、ytplayerオブジェクトが使用可能ですが、必要な機能が含まれていないようです。

この質問は this の重複である可能性があります。

javascriptiframeyoutubeyoutube-api
22
Maximus S

これは次のように実行できます。

一般的なYouTube埋め込みソースコードがある場合：

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>

a。 enablejsapiパラメーターを追加し、src URLでtrueに設定します

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

b。一意のIDを指定します

<iframe id="youtube-video" width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

c。 YouTube iFrame APIを読み込む

<script src="https://www.youtube.com/iframe_api"></script>

d。既存のiFrameを参照するプレーヤーを作成します

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady() {
  console.log("hey Im ready");
  //do whatever you want here. Like, player.playVideo();

}

function onPlayerStateChange() {
  console.log("my state changed");
}
29
Maximus S
var player = YT.get('id-of-youtube-iframe');
26
user2909143

Maximus Sは完全に正しい答えを出しました。公式の YouTube IFrame Player API のドキュメントでは、iframeの一意のIDを使用してプレーヤーを初期化して、ビデオをvar yPlayer = new YT.Player('unique-id');として提案しています。

この質問の今後の読者は、IDなしのiframe要素への参照からYouTubeプレーヤーを生成する方法を探しています（自分として）、type="text/html"属性を追加する場合はvar yPlayer = new YT.Player(iframeElement);を実行することで可能ですiframe要素とsrc属性のenablejsapi=1パラメーターの設定：

<iframe type="text/html" height="360" width="640" src="https://www.youtube.com/embed/jNQXAC9IVRw?enablejsapi=1"></iframe>

フルスニペット

5
Tim Osadchiy

親ウィンドウにIFrame APIをロードせずにこれを行うには、IFrameからオブジェクトを取得するのが最適な方法です。

var ytplayer_window = document.getElementById("playerIFrame").contentWindow;
var player = ytplayer_window.yt.player.getPlayerByElement(ytplayer_window.player);
2
Thnesko

最良の答えはほぼ正しいです。 iframe srcに「enablejsapi = 1」を配置する必要があります。何かのようなもの：

<iframe id="youtube-video" width="560" height="315" 
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" 
        allowfullscreen>
</iframe>
0
faabiopontes