Ошибки Google Chrome, Flash и z-index

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

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

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

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

Это не выглядит как WebKit, но особенно ошибка Chrome.

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

Ответ 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">

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

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

Ответ 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 и столкнуться с проблемами.

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

Ответ 3

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

Ответ 4

Он не работает в 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");
})

Ответ 5

следующий код работает, например, 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>

Ответ 6

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