jQuery reset visible video when fading out a container

问题

I've got a page with a container that has several videos embedded from vimeo via their new universal embed. All of the videos are each in a smaller container which has the iframe embed and a paragraph describing the video. jQuery has the smaller containers initially hidden, and dynamically selects and fades in the appropriate container depending on which thumbnail you click on. Whichever container is active can be faded out by clicking on a close-button or outside of the container (think lightbox). Of all the smaller containers that have a video, there is one that has two videos and they can be toggled between by a link below the video. When loaded, video #regular shows and clicking the link fades it out then fades #behind in.

The issue I'm running into is that if I open a video, close it, then open the same or another video the Vimeo player is hidden. The smaller container with the individual paragraph information is brought in perfectly.

The code I've written brings in one container at a time pertaining to the thumbnail you click on. I think the issue is that it explicitly hides the videos to accomodate that single video toggle.

Thanks for your help!

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

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

回答2:

Just think about what happens in your code and in what order:

The #fire element appears with #regular video in front.
Then #regular video is faded out, so now #behind is visible
Then #fire is faded out, so it is not visible anymore. #regular still explicitly faded out as well.
#fire is opened again. #regular still explicitly faded out, that's why #behind is visible.

You should add a check whether #regular is visible or not either when #fire is shown or when it is closed.

来源：https://stackoverflow.com/questions/5684902/jquery-reset-visible-video-when-fading-out-a-container

标签

jquery

fadein

hidden

fadeout

visible