1

最新バージョンの Twitter Bootstrap を使用し、iframe を介して Vimeo ビデオを埋め込む... BootSnipp (Extend Carousel) を使用して単純なカルーセルを構築し、画像のサムネイルを配置するのではなく、ビデオを追加しました。ただし、最初のビデオを再生して別のビデオをクリックすると、最初のビデオが再生され続けるという問題が発生しました。別のビデオがクリックされたときにビデオを停止する必要があります。

YouTube との他の多くの投稿取引や、私が Vimeo で見たものは役に立たないようです。

4

1 に答える 1

4

BootSnipp は使用していませんが、以下はバニラ Bootstrap で動作します。

Bootstrap カルーセルが次のスライドにスライドするときにビデオを手動で一時停止するには、 Vimeo JavaScript APIを使用する必要があります。これは、Vimeo のFroogaloop ライブラリを使用する最も簡単な方法です。

各 Vimeo プレーヤー<iframe>に一意の ID を与え、その ID を「player_id」として渡し、Bootstrap の"slide.bs.carousel"イベントにリスナーを追加し(Bootstrap v3.0 で、これは v2.3.2 だけだっ"slide"たと思います)、Froogaloop.api("pause" を呼び出します。 ) 対応する Vimeo プレーヤーで。

idカルーセルで Vimeo スライドを作成する場合、各 Vimeo プレーヤーはこの基本設定に従う必要があります (わかりやすくするために、 and以外のオプション/属性は含めていません。Vimeo JavaScript API を有効にするために属性に必須のクエリ変数であることにsrc注意してください)。 :api=1src

<iframe id="player-id-N" src="http://player.vimeo.com/video/yourVideoIDHere?player_id=player-id-N&api=1"></iframe>

(ここで、N は一意の ID であり、おそらくイテレータ インデックスです。)

(編集: この手法では<iframe> idとplayer_idは必要ありませんが、セットアップによっては便利な場合があります。 )

カルーセルが作成されたら、ハンドラーをスライド イベントにバインドします。

$myCarousel.on("slide.bs.carousel", function (event) {
    // Bootstrap carousel marks the current slide (the one we're exiting) with an 'active' class
    var $currentSlide = $myCarousel.find(".active iframe");

    // exit if there's no iframe, i.e. if this is just an image and not a video player
    if (!$currentSlide.length) { return; }

    // pass that iframe into Froogaloop, and call api("pause") on it.
    var player = Froogaloop($currentSlide[0]);
    player.api("pause");

});

上記の編集で述べたように、 <iframe> idorを使用しない作業中の JSFiddleを次に示します。player_id

于 2013-08-24T07:17:44.567 に答える