13

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 を使いこなしてきましたが、どのように始めればよいのか混乱しています。

?enablejsapiYouTube の末尾に追加すると、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();
    });
}
4

3 に答える 3

19

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 経由で動的に読み込み、オーバーレイで開くためです。ビデオを再生/一時停止するために、閉じる/開くオーバーレイ機能を設定しました。

于 2013-01-15T23:27:46.067 に答える
13

埋め込み文字列に追加?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 のすべてのイベントを無効にすることをお勧めします。

于 2012-09-20T23:45:38.620 に答える