FireFoxでswfobject.jsが 再生されないエラー

FireFoxでswfobject.jsが再生されないエラーの解決法 | トラブルシューティング

【トラブルシューティング】FireFoxでswfobject.jsが再生されないエラーとその解決法(4つの試行錯誤)

 swfを埋め込むための有名なプラグイン、「swfobject.js(2.2)」を使って、 当サイトのンディングページでもFlashを再生しています。 これまでも何度か、いじくってサイトを更新しているうちに、エラーを見つけちゃいました。

【トラブルシューティング】FireFoxでswfobject.jsが再生されないエラーとその解決法(4つの試行錯誤)

ブラウザは、FireFox。

FireFoxで閲覧すると、 swfが全く再生されず、真っ白だったんです…。
普段 Google Chrome ばっか使ってるせいで、表示エラー見落としていました…。
TOPページが真っ白って、かなり深刻だよね。
「コレが本当のミニマルデザインです!」って言い張るしか無い…笑

【問題点】

問題のswf埋め込みソースコードは、下記のとおり。

[html]
<script type="text/javascript">// <![CDATA[
var ver = ‘8.0.0’;
var eiswf = ”;
var vars = {};
var params = {
scale:’noBorder’,
salign:’lt’,
menu:’false’,
quality:’high’,
bgcolor:’#FFFFFF’
};
var attributes = {id:’flashContent’,name:’flashContent’};
swfobject.embedSWF("/index.swf","flashContent","100%","100%",ver,eiswf,vars,params,attributes);
// ]]></script>
[/html]

 

このソース…なにがいけなかったか… ググったり、試行錯誤したりして下記の4つのことを試してみた。

①var param = {allowfullscreen :’true’}; の記述が足りない。

・・・ま、関係なかった。笑

②wmode:’XXX’ の記述が足りない。

・・・swf以外のDOMと共存させたいのなら、たとえば、wmode:’transparent’と記述する。 chromeでswfが全面表示になってしまっているときは、wmode:’window’とchromeが自動処理してしまっている可能性が高い。
(余談) 家のMacのGoogle Chromeでは、正常にswfが再生されて、ヘッダーとフッターの背面にきちんと重なっているが、 会社のWindows (XP)のGoogle Chromeで見ると、swfが全面を覆ってしまっているんだ。 こんなことってあるのか!?考えても解決しないのでいったん、迷宮入り! 

③window.onload = function(){}

[参考URL] http://webdrawer.net/browser/firefoxflash.html
上記の記事を参考にすると、

[html highlight=”3,16″]
<!– swfobject –>
<script type="text/javascript">// <![CDATA[
window.onload = function(){
var ver = ‘8.0.0’; var eiswf = ”;
var vars = {};
var params = {
allowfullscreen:’true’,
scale:’noBorder’,
salign:’lt’,
menu:’false’,
quality:’high’,
bgcolor:’#FFFFFF’,
wmode:’transparent’
};
var attributes = {id:’flashContent’,name:’flashContent’}; swfobject.embedSWF("/index.swf","flashContent","100%","100%",ver,eiswf,vars,params,attributes);
}
// ]]></script>
[/html]

のように、

window.onload = function(){}

の中に入れてしまえば、再生されるらしい。 これで、みんな解決したとの記事も他にチラホラ! これは、期待大!!自分もこれで解決か!? 
ワクワクして、アップロードして「更新」ボタンを押し見る!

…真っ白。

「エ〜〜〜〜!!なんで??
もうわからん…

④そもそもCSSが、変!?

・・・僕の場合、エラーに気付いたときのCSSは、下記のとおり。

[CSS: Before]
[css]
/* ======================================================================== #flashContent ======================================================================== */
#flashContent { width:100%; height:100%;}
#flashContent { z-index:11; position:relative; /*position:fixed !important;*/ }
[/css]

幅と高さは、100%。…問題無し。 重ね順は、ヘッダーとフッターよりもちゃんと後ろになってるんです。positionは、relative … 
「うーん、relative がおかしいのかなぁ…。」と、思って、positionをfixed に書き換えてみる!

[CSS: After] 
[css]
/* ======================================================================== #flashContent ======================================================================== */
#flashContent { width:100%; height:100%;}
#flashContent { z-index:11; /*position:relative;*/ position:fixed !important;}
[/css]

すると!!!!なおったーーーーーーーーーーー!!!!
まさに fixed 〜〜〜〜〜〜!!!!!!!!!!!!!!!!!!!!!!! 
ありがとう!position:fixed 〜〜〜〜〜〜!!!!!!!!!!!!!!!!!!!!!!!

つまり、今回は、 swfobject.js が悪いんじゃなくて、それを入れるDOM(今回でいう#flashContent)が悪かったのでした…。俺が馬鹿だった。

FireFoxでのswfobject.jsの拒否エラーは、
window.onload = function(){ }で囲む事で、ほとんど解決できるようです。

解決できない場合は、今回のぼくのように、そもそもCSSが変な可能性ありです。
すこしでも参考になれば(^0^)/

じゃんじゃん!!