0

新しいユニバーサル埋め込みを介して vimeo からいくつかのビデオが埋め込まれたコンテナを含むページがあります。すべてのビデオはそれぞれ、iframe 埋め込みとビデオを説明する段落を含む小さなコンテナー内にあります。jQuery では、最初は小さいコンテナーが非表示になっており、クリックしたサムネイルに応じて適切なコンテナーが動的に選択され、フェードインされます。アクティブなコンテナーは、閉じるボタンまたはコンテナーの外側 (ライトボックスを考えてください) をクリックすることでフェードアウトできます。ビデオを含むすべての小さなコンテナーの中に、2 つのビデオを含むコンテナーがあり、ビデオの下のリンクで切り替えることができます。読み込まれると、ビデオ #regular が表示され、リンクをクリックするとフェードアウトしてから #behind in になります。

私が直面している問題は、ビデオを開いて閉じてから、同じビデオまたは別のビデオを開くと、Vimeo プレーヤーが非表示になっていることです。個々の段落情報を含む小さいコンテナーが完全に取り込まれます。

私が書いたコードは、クリックしたサムネイルに関連するコンテナを一度に 1 つ取り込みます。問題は、その単一のビデオ切り替えに対応するためにビデオを明示的に非表示にしていることだと思います.

ご協力いただきありがとうございます！

HTML:

<div id="container">
    <div id="close"></div>
    <div id="tide" class="vim">
        <iframe class="vid" src="http://player.vimeo.com/video/1747304?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p>
            "It's High Tide Baby!"<br />
            The Blackout feat. Ian Watkins (Lostprophets)<br />
            Fierce Panda
        </p>
    </div>
    <div id="knew" class="vim">
        <iframe class="vid" src="http://player.vimeo.com/video/4622464?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p>
            "If Only They Knew"<br />
            A Rocket To The Moon<br />
            Fueled by Ramen/Atlantic Records
        </p>
    </div>
    <div id="fire" class="vim">
        <iframe id="regular" class="vid" src="http://player.vimeo.com/video/22327264?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <iframe id="behind" class="vid" src="http://player.vimeo.com/video/22466069?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p style="float:left">
            "Sound of Fire"<br />
            This Century<br />
            Warner Brothers Records
        </p>
        <p id="bts" style="float:right;color:#000000;cursor:pointer;">
            &nbsp;<br />
            Click to launch the "Sound of Fire" behind the scenes video!<br />
            &nbsp;
        </p>
    </div>

JavaScript:

//Hide containers
$('.vim, #behind, #close, #container, #underlay').hide();

//Fade in video corresponding to thumbnail
$('.thumbnail').click(function() {
    var id = $(this).attr("id").replace("show_","").toLowerCase();
    $('#' + id + ', #close, #container, #underlay').fadeIn(400);
    var player=$f($('.vid:visible')[0]);
    player.api("seekTo", "0").api('play');

});

//Toggle between videos in the #fire div
$('#bts').click(function() {
    $('#regular').fadeOut(400, function () {
        $f(this).api('pause');
        $('#behind').fadeIn(400, function () {
            $f(this).api('play');
        });
    });
});

//Close whichever video is visible
$('#close, #underlay').click(function() {
    var $videos = $('.vid');
    $f($videos.filter(':visible')[0]).api('pause');
    $videos.hide();
    $('.vim, #close, #container, #underlay').fadeOut(400, function() {
        $videos.first().show();
    });
});

    $('#close, #underlay').click(function() {
        var $videos = $('.vid');
        $f($videos.filter(':visible')[0]).api('pause');
        $('.vim, #close, #container, #underlay').fadeOut(400, function() {
            $('#behind').hide();
            $('#regular').show();
        });
    });
4

2 に答える 2

2 
$('#close, #underlay').click(function() {
    var $videos = $('.vid');
    $f($videos.filter(':visible')[0]).api('pause');
    $videos.hide();
    $('.vim, #close, #container, #underlay').fadeOut(400, function () {
        $videos.first().show();
    });
});
于 2011-04-16T06:33:41.527 に答える
0

コードで何が起こるか、どのような順序で起こるかを考えてみてください。

  1. #fire 要素は #regular video の前に表示されます。
  2. すると #通常の動画 がフェードアウトして #後ろが見えるようになりました
  3. すると #fire がフェードアウトして見えなくなります。#regular も明示的にフェードアウトしています。
  4. #また火がついた。#regular はまだ明示的にフェードアウトしているため、#behind が表示されます。

#fire が表示されているとき、または閉じているときに #regular が表示されているかどうかのチェックを追加する必要があります。

于 2011-04-16T06:54:20.767 に答える