27

<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オブジェクトは利用可能ですが、必要な機能が含まれていないようです。

この質問は、これと重複している可能性があります。

4

5 に答える 5

37

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

一般的な YouTube 埋め込みソース コードの場合:

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

を。クエリ パラメータを追加enablejsapiし、src URL で 1 に設定します

<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");
}
于 2013-10-26T08:42:55.380 に答える
36 
var player = YT.get('id-of-youtube-iframe');
于 2016-04-01T22:25:13.657 に答える
6

Maximus S は完全に正しい答えを出しました。公式のYouTube IFrame Player API ドキュメントでは、動画をvar yPlayer = new YT.Player('unique-id');.

この質問の将来の読者は、id のない iframe 要素への参照から YouTube プレーヤーを生成する方法を探しています (私自身のように) 。iframe 要素に属性をvar yPlayer = new YT.Player(iframeElement);追加し、パラメーターを設定する場合は、実行することで実行できます。属性:type="text/html"enablejsapi=1src

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

完全なスニペット

于 2016-12-21T21:05:01.690 に答える