web-dev-qa-db-ja.com

JavaScriptでYouTube iFrame APIを一時停止する

ユーザーがimgサムネイルをクリックしたときに一時停止したいスライドショーに埋め込まれたYoutubeビデオがあります。

<li><iframe width="430" height="241" src="http://www.youtube.com/watch?v=XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="my-video"></iframe></li>

私はYoutube APIを使用してきましたが、開始する方法がわかりません。

YouTubeの最後に?enablejsapiを追加すると、API JSが自動的に読み込まれますかvideo id？

ここに私のJSがあります：

var player1 = document.getElementById('my-video');

$('img').click(function () {
  player1.pauseVideo();
})

編集：

以下は、疑問に思う方のために、以下のマットの回答に基づいて私がしたことです：

<li><iframe width="430" height="241" src="http://www.youtube.com/embed/XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-1"></iframe></li>

<li><iframe width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-2"></iframe></li>

そして私のJS：

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Create YouTube player(s) after the API code downloads.
var player1;
var player2;

function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('player-1');
    player2 = new YT.Player('player-2');
}

次にdocument.readyで：

$(document).ready(function () {
    $(".slideshow-1 img").click(function () {
        player1.stopVideo();
    });

    $(".slideshow-2 img").click(function () {
        player2.stopVideo();
    });
}
javascriptjqueryyoutubeyoutube-api
13
Yahreen

埋め込み文字列に_?enablejsapi_を追加しても、APIコードは自動的には含まれません。その特定の埋め込みをAPIに登録するだけです。

ここで最初の例を読みたいと思います： https://developers.google.com/youtube/iframe_api_reference

  1. 非同期コードスニペットは、YT iframe APIをダウンロードして実行します
  2. onYouTubeIframeAPIReady()は、APIの準備ができると発生します
  3. 新しい_YT.Player_オブジェクトを作成する
  4. これで、コードでプレーヤーオブジェクトのpauseVideo()を呼び出すことができます

onYouTubeIframeAPIReady()が呼び出されるまで、imgのイベントを無効にすることをお勧めします。

13
Matt Stone

JSを外部ファイルで使用したい場合：

[〜＃〜] html [〜＃〜]

<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>

[〜＃〜] js [〜＃〜]

var yt_int, yt_players={},
    initYT = function() {
        $(".ytplayer").each(function() {
            yt_players[this.id] = new YT.Player(this.id);
        });
    };
$.getScript("//www.youtube.com/player_api", function() {
    yt_int = setInterval(function(){
        if(typeof YT === "object"){
            initYT();
            clearInterval(yt_int);
        }
    },500);
});

コントロールビデオ

yt_players['player_id'].playVideo();

私がこの方法でこれを行う理由は、CMSを介して動的にビデオを読み込んでいて、それらがオーバーレイで開くためです。動画を再生/一時停止するように、閉じる/開くオーバーレイ機能を設定します。

19
Roi

私は別の解決策を持っています：

<iframe id="player1" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>
<iframe id="player2" class="ytplayer" width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen></iframe>

そして

$('.ytplayer').each(function(){
    //this.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*')
});
1
Rijo K P