JavascriptによるFlashの頭出し再生

月曜日, 5月 21st, 2007

こんにちは、なかわけです。

JavascriptによるFlashの頭だし再生。仕事で作ってみたのでまとめときます。

概要はこんな感じ。ひとつのFlashの中で複数のコンテンツが存在するときに、HTMLのリンクからある特定のコンテンツから再生する。

つくりかたは結構カンタンで、Flashを配置しているHTMLにJavascriptの「location.search」を使用してURLのおしりに付けている変数を取得します。location.searchって賢いもんで、たとえば

http://nakawake.net/flash.html?content=4

というURLがあったときに?content=4だけ取得するんです。すごい。

この取得した値をFlashに受け渡すには参照ファイル名の後にくっつければいいので、Javascriptと一緒に書くと、

document.write(' <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="urlvariables" align="middle"> ');
document.write(' <param name="allowScriptAccess" value="sameDomain" /> ');
document.write(' <param name="movie" value="urlvariables.swf' + location.search + '" /> ');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="bgcolor" value="#ffffff" /> ');
document.write(' <embed src="urlvariables.swf' + location.search + '" quality="high" bgcolor="#ffffff"   width="550" height="400" name="urlvariables" align="middle" allowScriptAccess="sameDomain"   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> ');
document.write(' </object> ');

とすれば、JavascriptがFlashを出力しつつURLの変数を取得してFlashに渡してくれます。
あとは別のHTMLページのリンクを、

<a href="flash.html?content=1">コンテンツ1</a>
<a href="flash.html?content=2">コンテンツ2</a>
<a href="flash.html?content=3">コンテンツ3</a>

と書けば、リンクをクリックしたときにFlash変数を受け取って該当のコンテンツから再生されます(もちろんここで触れてないですが変数を受け取った後のFlash内の処理もActionScriptで書かないといけませんけどね)。

とまあここまでなら日記に書くことはないですが、今日仕事で変な現象に出会いました。上記のように作ったページがInternetExploreでは正常に再生されたのですが、FireFoxで見てみると白い画面(背景色)で固まってしまいました。

そのときは仕事の締め切りが迫っていてかなり焦りまくりました。
で、結局何が原因だったかというと、こんな感じでした。

[ 推測できる原因 ]
Flash全体の容量が不明のため読み込み状態が続いてしまう

途中から再生するために、始めに読み込むべきFlash全体の容量がわからなくて処理がつまずいていたようです。IEはそこらへんをうやむやに処理したらしく再生できたようでFFは止まってしまいました。

[ 対処法・解決方法 ]
ムービーの最初にプリローダをつけてロードが完了したら該当のコンテンツにジャンプするようにActionScriptを書く

全体の容量がわからないのであればわかるようにプリローダーをつけてあげればいいだけの話でした。ここでカンタンに書いておりますが原因究明にかなり時間使っちゃったよぅ・・・。

Leave a Reply

*