Google ChromeでFlashビデオのZ-インデックスが正しく表示されません。Google Chrome、Flash、およびZ-インデックスが正しく動作しない
FirefoxまたはInternet Explorerでhttp://maxusglobal.com/をご覧ください。
今Chromeで見てみましょう。
ページの上部にある大きなビデオは、その上にz-索引付けされた「プレビュー」画像を持つ必要があります。 FirefoxやInternet Explorerでは動作しますが、Google Chromeでは動作しません。
これはWebKitのものではありませんが、特にChromeのバグです。
すべてのwmodeを試しましたが（不透明なウィンドウと透明）、これは修正されません。私はまた、フラッシュボックスのZインデックスを変更しましたが、まだ動作していません。
あなた<embed>タグにwmode="transparent"を追加します。以下のように。
<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イメージのdivを非表示にします。
私はこれが助けてくれることを願っています！
Firefox 3.6およびOpera 10、Windowsでも動作しません。
解決策：セレクタ#both_video_and_preview_image #video_wrapperの場合は、visibility:hidden;をCSSに追加してください。
jQueryコードを追加すると（ライブラリを使用していることがわかります）、ユーザーがプレビュー画像をクリックすると、上のセレクタの可視性が表示されます。
$("#page_video_preview_image").click(function() {
$("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})
私はそれらを見るようにオプションのカップルがここにあります
オプション1
はWMODEタグを使用して、あなたは、オブジェクトがレンダリングされるようにこれを設定する必要があります。後で追加すると機能しません。
(ref1)(ref2)
opaqueを使用すると、CSSのzインデックススタイルでオブジェクトをターゲットにすることができます。あなたは<embed>タグならびにparam
(ref3)(ref4)
オプション2
としてこの値を設定する必要があることに注意してくださいユーザーがプレビューボタンをクリックしたまでオブジェクトを非表示にします。私はSotirisが同じことを言っていたことに気づく前に、あなたが使用した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;
});
私は1つの行を修正します：
$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});
、デフォルトでは非表示に可視性を設定するためにCSSを使用して、私は、これはここにあなたのコードであると考えています。あなたのjavascriptサポート要件に応じて、それを変更する必要があるかもしれません。
ここで提供されている3番目のリンクは、wmodeとその仕組みに関するかなり良い記事です。オプション1を使用して問題が発生した場合は、その点を確認することをおすすめします。
希望に役立ちます！
最初の点は再考する価値があります：オブジェクトがレンダリングされた後にwmodeを追加することはできません。あなたはあらかじめそれをキャッチしなければなりません。だからFirebugと親族のそれを乱すことのない量はどこにでもあなたを得るでしょう。 – ksenzee
Google Chrome 8を使用すると、埋め込みFlashオブジェクトのZ-インデックスにも問題がありました。IE 7ではすべてがうまく機能しました.lnrbobはオプション1のソリューションで頭に釘を打ちました。私は<embed>タグでwmodeを不透明に設定しました。 wmodeを<param>タグとして追加することは怠りました。 <object>タグと<embed>タグの間に<param name="wmode" value="opaque"/>を追加すると、z-indexがIEを壊すことなくChromeで完全に機能するようになりました。
次のコードはつまり、Firefoxの、オペラではなく、リンク、または完全なマークアップ、私たちは野生の推測で言う何もせずにクロム（バージョン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>
div位置を追加：相対クロムが機能します。 – jiucai
に取り組んで動作します。 – Rob
そこにリンクがあります... – Smickie
Firefoxのバージョンをチェックしていますか？ IEで正常に動作しているかどうかを確認しましたが、FFとChromeでプレビュー画像が表示されません。 –