Неправильное поведение Google Chrome, Flash и z-index

Question

Google Chrome неправильно отображает z-индекс видео Flash.

Взгляните на http://maxusglobal.com/ в Firefox или Internet Explorer.

Теперь взгляните на это в Chrome.

Большое видео в верхней части страницы должно иметь изображение "предварительного просмотра", проиндексированное поверх него. Это происходит в Firefox и Internet Explorer, но не в Google Chrome.

Кажется, это не вещь WebKit, а конкретная ошибка Chrome.

Я перепробовал все wmodes (непрозрачный, оконный и прозрачный), но это не исправило. Я также изменил z-index блока Flash, но он все еще не работает.

Answer 1

Добавлять wmode="transparent" на ваш <embed> тег. Вроде следующего.

<embed wmode="transparent" 
       height="314" width="516"
       type="application/x-shockwave-flash" 
       id="player"
       name="page_player" 
       src="/swfs/player.swf" 
       allowscriptaccess="always"
       allowfullscreen="true" 
       flashvars="file=/attachments/files/u_t_o_N_1.mp4">

И скрыть див hello изображение, если это не нужно.

Надеюсь, это поможет!

Answer 2

Здесь я вижу несколько вариантов:

Опция 1

Используйте тег wmode, и вам нужно установить это как объект, представленный. Добавление позже не будет работать
(ref1) (ref2)

Использование opaque должно позволить вам нацеливать объект с помощью стилей CSS z-index. Имейте в виду, что вы должны установить это значение в <embed> тег, а также как param
(ref3) (ref4)

Вариант 2

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

$('#play_video_box').click(function(){

if(app.isiPhone() == "iphone" || app.isiPhone() == "ipad"){
return true;
}

$(this).fadeOut('fast');
$('#page_video_preview_image').fadeOut('fast');
var player = document.getElementById('player');
player.sendEvent('PLAY');
return false;
});

Я хотел бы изменить одну строку:

$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});

И используйте CSS, чтобы установить видимость скрытой по умолчанию. В зависимости от ваших требований к поддержке javascript вам может потребоваться изменить это.

Третья ссылка, приведенная здесь, является довольно хорошей статьей о wmodes и как они работают - я рекомендую проверить это, если вы решите пойти с вариантом 1 и столкнетесь с проблемами.

Надеюсь, это поможет!

Answer 3

У меня тоже была проблема с z-индексом встроенных объектов Flash при использовании Google Chrome 8. В IE 7 все работало идеально. Lnrbob ударил по голове своим вариантом 1. Я установил wmode на непрозрачный в <embed> тег; но я забыл добавить wmode как <param> тег. Как только я добавил <param name="wmode" value="opaque"/> между <object> тег и <embed> тег, z-index начал отлично работать в Chrome, не нарушая IE.

Answer 4

Следующий код работает в Firefox, Opera, но не работает на Chrome(версия 21)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="250">
<param name="movie" value="http://img.emarbox.com/dsp/img/300x250.swf">
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://img.emarbox.com/dsp/img/300x250.swf" wmode="opaque" allowfullscreen="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="250"></embed>
</object>

<div style="cursor: pointer; margin-top:-250px; width:300px; height:250px; z-index:1; visibility: visible;">
<a href="http://www.emarbox.com" target="_blank" >
<img border="0" src="http://img.emarbox.com/dsp/img/flash_blank.gif" width="300" height="250" border="0" /></a>
</div>

Answer 5

Это не работает в Firefox 3.6 и Opera 10, а также в Windows.

Возможное решение: просто добавьте в свой CSS visibility:hidden; для селектора #both_video_and_preview_image #video_wrapper,

Затем добавьте код jQuery (я вижу, что вы используете библиотеку), поэтому, когда пользователь щелкает изображение предварительного просмотра, тогда видимость для вышеуказанного селектора меняется на видимую.

$("#page_video_preview_image").click(function() {
    $("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})

Answer 6

Вы пытались использовать SWFObject и загрузить его таким образом?