Question

我有一个带有容器的页面，该容器通过新的通用嵌入从vimeo中嵌入了几个视频。所有视频都在一个较小的容器中，其中包含iframe嵌入和描述视频的段落。 jQuery最初隐藏了较小的容器，并根据您单击的缩略图动态选择和淡入适当的容器。无论哪个容器处于活动状态，都可以通过单击关闭按钮或容器外部（想想灯箱）淡出。在拥有视频的所有较小容器中，有一个有两个视频，可以通过视频下方的链接切换。加载后，视频#regular显示并点击链接将其淡出然后淡出#behind in。

我遇到的问题是，如果我打开一个视频，关闭它，然后打开隐藏Vimeo播放器的相同或另一个视频。具有单独段落信息的较小容器被完美地引入。

我写的代码一次带来一个容器，与你点击的缩略图有关。我认为问题是它明确地隐藏了视频以适应单个视频切换。

感谢您的帮助！

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();
        });
    });

Answer 1

$('#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();
    });
});

Answer 2

考虑一下代码中发生的事情以及顺序：

#fire元素在前面显示#regular video。
然后#regular video逐渐消失，现在#behind可见
然后#fire消失了，所以它不再可见了。 #regular仍明显淡出。
#fire再次打开。 #regular仍明显淡出，这就是#behind可见的原因。

您应该在显示#fire或关闭时检查#regular是否可见。

淡出容器时jQuery重置可见视频

2 个答案: