Windows環境のFirefoxで発生するFlashのwmode問題をBlip.fmを例に取り解決方法を模索する
Windows環境のFirefoxユーザ向けのエントリー。（Macではどうなるのか教えてください。）
どんな問題なのか
まず、WMODEの落とし穴 in FIREFOX - red日記
Firefoxは表示領域外にあるFlashをレンダリングしない。新しくタブを開いたときや、ページをスクロールしてFlashが貼られているエリアにきた段階で初めてレンダリングされる。
blip.fmのplaylistで一番下までスクロールしないと曲が再生されない原因を解明した - Cherenkovの暗中模索にっき
分りやすいサンプル→http://dev.ekndesign.com/pages/ffwmode/transparent/content.html
なにが具体的に困るのか
Blip.fmを例に説明します。Blip.fmとは楽曲共有機能をtwitterに追加した感じの素晴らしいサービスです。
Firefoxで http://blip.fm/profile/cherenkov/playlist このページを開いてください。私が登録したプレイリストです。本来なら、フッターに再生コントローラが表示されて曲名をクリックすればすぐに音楽が流れるはずです。しかしクリックしても無反応です。
この状態が「表示領域外にあるFlashをレンダリングしない」です。
Blip.fmでは再生用のswf*1がレンダリングされたのをきっかけに再生するためのイベントが開始されるのです。
ではswfをレンダリングしてみましょう。プレイリストのページの一番下までスクロールしてください。フッターに黒いコントローラが表示されましたか？このページのswfはこんな場所にあるため、ここまでスクロールしないとイベントが開始されないのです。Firebugで探してみるとよくわかります。ブックマークレットで確認する方法もあります。
javascript:{p=document.getElementById('blipPlayer');alert(p.offsetLeft+','+p.offsetTop);void(0)} //x座標,y座標表示
この現象が「WMODEの落とし穴」のひとつです。
IEで開いた場合はどうでしょうか。正常に動作するはずです。
他のページはどうでしょうか。次はトップページにあるswfの位置を確認してみましょう。
ページによって異なるswfの位置
Firefoxで http://blip.fm/all?p=1 このページを開いてください。アカウントを作ってログインしたときにトップページとして表示される画面と同じ構成になっています。
先ほどのブックマークレットを改造してswfの位置を分りやすくするために背景色をpinkにしてみます。
javascript:{p=document.getElementById('blipPlayer');alert(p.offsetLeft+','+p.offsetTop);p.style.backgroundColor = "pink";void(0)}
座標は(650,170)*2。だいぶ上に来ました。この位置にあれば、ページを開いたと同時にレンダリングされるので問題が無いように思えます。
しかし、スクロールしてswfを表示領域外にしたところで、どこかに*3ページ遷移して「戻る」をやってみてください。swfはレンダリングされず、音楽は再生できないはずです。プレイリストのページでも同じで、いちいちswfの位置までスクロールしないとダメです。
ちなみに、IEでトップページのswfの位置を確認すると不思議なことに(650,0)でした。
次は、これらの問題を解決する方法を検討してみましょう。
positionでズバッと解決
potision:fixedでswfを常にウィンドウのどこかに表示させる作戦にしました。
var p = document.getElementById("blipPlayer"); if(p) { with(p.style) { position = 'fixed'; bottom = '0px'; } }
