Google Chrome неправильно отображает z-индекс Flash-видео.
Взгляните на http://maxusglobal.com/ в Firefox или Internet Explorer.
Теперь взгляните на него в Chrome.
Большое видео в верхней части страницы должно иметь "предварительный" образ z-indexed поверх его. Это происходит в Firefox и Internet Explorer, но не в Google Chrome.
Это не выглядит как WebKit, но особенно ошибка Chrome.
Я пробовал все wmodes (непрозрачный, оконный и прозрачный), но это не исправляет. Я также изменил z-индекс флэш-памяти, но он все еще не работает.
Добавьте 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, если это не нужно.
Надеюсь, это поможет!
Здесь есть несколько вариантов, которые я вижу:
Вариант 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 и столкнуться с проблемами.
Надеюсь, что это поможет!
У меня также возникла проблема с 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.
Он не работает в 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");
})
следующий код работает, например, 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>
Вы пытались использовать SWFObject и загружать его так?