目次
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^）/
じゃんじゃん！！