JQuery вы можете исчезнуть в видео - PullRequest
1 голос
/ 26 мая 2010

У меня есть файл flv внутри vid.html, который работает нормально, но есть ли способ получить само видео в fadeIn / fadeOut?

<div id="fadeit">
    <div class="video"></div>
</div>

это не работает;

$('.video').hide().fadeIn().load('vid.html');

Завершение в div и исчезновение div тоже не работает;

$('#fadeit').hide().fadeIn(1400);

Ответы [ 3 ]

3 голосов
/ 26 мая 2010

без wmode или wmode прозрачного: FF, Chrome и Safari

wmode непрозрачный, FF, Chrome, Safari и IE8 (только для тестирования имеется ie8)

И тусклая вспышка, и наложение div.

http://jsfiddle.net/WWvmz/2/

2 голосов
/ 26 мая 2010

Вы не можете стилизовать флэш. Вы даже не можете поместить, например, меню над флэш-объектом.

(одна из причин, по которой вспышка должна умереть)

1 голос
/ 08 марта 2013

Способ подражать этому заключается в наложении полностью белого абсолютно позиционированного div на iframe, в который вставлено видео, и затемнения этого div.

Установите стандартный CSS для div на «display: none;» чтобы не показывать видео, если у людей отключен JavaScript и jquery показывает его.

Образец CSS

#video_container {
    position: relative;

    width: 725px;
    height: 430px;
}

#video_overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 725px;
    height: 430px;

    background-color: #FFFFFF;
}

Пример HTML

<div id="video_container">
    <div id="video_overlay"></div>
    <iframe width="725" height="430" src="http://www.youtube.com/embed/TxvpctgU_s8?rel=0&showinfo=0&autoplay=1&loop=1"></iframe>
</div>

1011 * JQuery *

$("#video_overlay").show(); 
setTimeout(function() { 
    $("#video_overlay").fadeOut(1500); 
}, 2500);

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

$("#video_overlay").show(); 
$("#video_overlay").fadeOut(1500);

Чтобы снова исчезнуть

$("#video_overlay").fadeIn(1500);

jsfiddle: http://jsfiddle.net/RPjXv/2/

...