jQuery сбрасывает видимое видео при исчезновении контейнера - PullRequest
Новая
       23

jQuery сбрасывает видимое видео при исчезновении контейнера

0 голосов
/ 16 апреля 2011

У меня есть страница с контейнером, в котором есть несколько видео, встроенных из 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();
        });
    });

Ответы [ 2 ]

2 голосов
/ 16 апреля 2011 
$('#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();
    });
});
0 голосов
/ 16 апреля 2011

Просто подумайте о том, что происходит в вашем коде и в каком порядке:

  1. Элемент #fire появляется с #regular video впереди.
  2. Затем # Regular video исчезает, так что теперь #behind видимый
  3. Тогда #fire исчезает, поэтому он больше не виден.#regular все еще явно исчезает.
  4. # огонь снова открыт.#regular по-прежнему явно исчезает, поэтому #behind видим.

Вы должны добавить проверку, является ли #regular видимым или нет, когда #fire отображается или когда он закрыт.

...