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

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

11 голосов
/ 30 ноября 2010

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

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

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

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

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

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

Ответы [ 6 ]

28 голосов
/ 08 декабря 2010

Добавьте 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, если в этом нет необходимости.

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

4 голосов
/ 08 декабря 2010

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

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

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

2 голосов
/ 25 января 2011

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

0 голосов
/ 30 августа 2012

следующий код работает в ie, 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>
0 голосов
/ 06 декабря 2010

Не работает в 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");
})
0 голосов
/ 01 декабря 2010

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

...