淡出容器时jQuery重置可见视频 [英] jQuery reset visible video when fading out a container

问题描述

我有一个页面，其中包含一个容器，其中通过其新的通用嵌入程序嵌入了多个来自vimeo的视频.所有视频都放在一个较小的容器中，该容器中嵌入了iframe和一段描述该视频的段落. jQuery最初隐藏了较小的容器，并根据您单击的缩略图在适当的容器中动态选择和淡入淡出.可以通过单击关闭按钮或在容器外部将淡出的容器淡入淡出(请考虑灯箱).在所有带有视频的较小容器中，有一个容器包含两个视频，可以通过视频下方的链接在它们之间切换.加载后，视频会显示#regular，然后单击链接将其淡出，然后逐渐淡入#behind.

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.

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

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.

感谢您的帮助！

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:

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

推荐答案

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

这篇关于淡出容器时jQuery重置可见视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！