Hatena::ブログ(Diary)

Cherenkovの暗中模索にっき RSSフィード Twitter

2009-03-21

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に追加した感じの素晴らしいサービスです。

Firefoxhttp://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の位置

Firefoxhttp://blip.fm/all?p=1 このページを開いてください。アカウントを作ってログインしたときにトップページとして表示される画面と同じ構成になっています。

先ほどのブックマークレットを改造してswfの位置を分りやすくするために背景色をpinkにしてみます。

javascript:{p=document.getElementById('blipPlayer');alert(p.offsetLeft+','+p.offsetTop);p.style.backgroundColor = "pink";void(0)}

f:id:Cherenkov:20090321055933p:image

座標は(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';
	}
}

グリモンにしました→http://userscripts.org/scripts/show/44839


感想

  • Flashのwmodeを設定する際に思い出してください。
  • SleipnirGeckoモードもダメらしい。

関連

blip.fm script - userscript.org

*1:再生コントローラと呼んでいるものとは別

*2:ウィンドウサイズによってx座標は伸びるけど、y座標は変わらない。

*3ホームページなど

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。