jQuery заменяет Vimeo на вставку и исчезновение - PullRequest
Новая
       39

jQuery заменяет Vimeo на вставку и исчезновение

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

Я хотел бы отключить универсальное встраивание Vimeo (версия iframe), приостановить его, добавить другое и автоматически воспроизвести.Мой код затухает и приостанавливает первое видео, но сразу вводит новое (без затухания) и затем не воспроизводит его автоматически.Я предполагаю, что это проблема синтаксиса.Я использую библиотеку froogaloop js для управления API Vimeo.

Идеи?Спасибо за вашу помощь!

HTML: 

    <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: 

    $('#behind').hide();
    $('#bts').click(function() {
        $('#regular').fadeOut(400);
        var player=$f($('.vid:visible')[0]);
        player.api('pause');
        $('#behind').fadeIn(400);
        player.api('play');
    });

Ответы [ 2 ]

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

jQuery .fadeIn() и .fadeOut() не блокируют дальнейшее выполнение кода во время анимации. Это означает, что, как вы видите, игрок находится в режиме паузы, как только начинается постепенное исчезновение, и сразу после этого начинается постепенное появление, и игрок не останавливается.

Вам необходимо использовать (необязательный) аргумент обратного вызова, если вы хотите использовать исполняемый код после завершения анимации: 

$('#bts').click(function() {
    $('#regular').fadeOut(400, function () {
        $f(this).api('pause');
        $('#behind').fadeIn(400, function () {
            $f(this).api('play');
        });
    });
});
0 голосов
/ 16 апреля 2011

у вас есть определение 

var player=$f($('.vid:visible')[0]);

и выполните действие ( пауза и воспроизведение ) с тем же var player

player.api('pause') player.api('play) `

кстати, что вы делаете с этим кодом 

var player=$f($('.vid:visible')[0]);

UPDATE

Надеюсь, это сработает (необработанный код) 

$('#behind').hide();
$('#bts').live('click',function() {
    $('#regular').fadeOut(400,function(){
        $f(this).api('pause');
    });
    $('#behind:hidden').fadeIn(400,function(){
        $f(this).api('play');
    });      
})

Примечание: благодаря @ Matt Ball

...