jQuery.lightpop.jsを使った動画表示その他

一応守秘義務の関係上、仕事の話をここにはあまり書かない予定ではありますが、先日難儀した案件があったので忘れないうちにwまとめておきたいと思います。

案件の流れ

デジカメで数十秒程度の動画（.mov）を数本撮る
movファイルを繋ぐなど編集し、flv／swfに変換
変換したflv／swfをHTML上で表示

1. movを編集

デジカメで撮影したmovファイルをいくつか繋ぐなど、編集にはMPEG Streamclipを使いました。
リファレンスには下記を使わせていただきました。ありがとうございます。
mov形式のファイルを編集するソフト | Trivial Weblog
mov同士を繋ぎ、flv形式で出力できれば、Flashでの作業が簡単になると思ったのですが...。
File→Export to other formats でFlvを選択後、私の環境（WinXP-home）ではハングしてしまいました＞＜
いったい何が原因なんだろう...エンコード？？

2. mov→flvへ出力

ここからはFlashを使用します。
ファイル→ビデオの読み込みを選択し、こまごま設定後エンコードに入ります。
よくある、プレイ／ストップ／音量などの制御バーをつけるには「展開方法」で「Webサーバーからのプログレッシブダウンロード」を選択しますが、選択すらできず先に進めなくなることがあります（というか、私は実際なりました＞＜）
これはどうも、QuickTimeか、Flash Video Encoderのどちらかがインストールされていないと起こるようです。私はこの2つをアンインストール→再インストールし、マシンを再起動したらOKでした。ほっ。
ちなみにFlashでのエンコードは相当時間がかかります。~~茶でも飲みつつ~~PCが必要でない作業でも行いつつ待ちましょう。

3.出来た動画をHTMLページで表示

エンコード後、flv・swf・htmlと3種類のファイルができるので、任意のフォルダ／サーバへ設置後、Webサイト上で表示出来るように作業をします。
一番簡単なのはswfをhtml内に埋め込む方法ですが、今回はレイアウトの関係もあり、Lightboxのように動画を上乗せ表示してみようと考えました。
少し前からお仕事でjQuery LightBox pluginを使っていたので、動画でも同じようなことできないかなと思って探したら、ありました。
jQuery.lightBox を画像ファイル以外にも対応させる : dogmap.jp
こちらのjQuery.lightpop.jsをありがたく使わせていただき、こちらの環境にあわせて設定を変えたら...なかなか上手くいかないorz

3-1. 動画は表示されるんだけど枠や「閉じる」ボタンが表示されない

こちらはスクリプトとともにローディングや閉じるボタンなどの画像がフォルダに入れて用意されているのですが、何をどうしてもその画像が表示されませんでした。
いろいろ試してみた挙句、結局スクリプト内に設定されていた画像フォルダの設定を絶対パスに書き換えて、やっと解決。

この方法がベストだったかどうかは分からないですが、ひとつの手段として。

3-2.swfを表示しようとしたら制御バーが表示されない

上記のとおり、制御バーの付いたswfファイルを生成したのですが、これを表示させようと設定しても、制御バーのないまま動画が再生される、という事態も起こりました。ちなみに動画swfを単体で再生すると、制御バーは表示されます。
もともとの動画と制御バーは別ファイルになっているので、そのことも遠因でしょうか？
結局、これはswfを埋め込んだhtmlを表示先として指定することで一応解決。

いろいろ回り道しつつ、無事完成！

以上までの内容を、さる11/21に行われた「サト研」で発表したかったのですが、前々日に超飲みすぎてしまい、床に伏せていました...orz
ちなみに「サト研」、WEBサイトの制作や運営にまつわるあれこれを、毎月楽しくゆるく論議中ですので、福岡在住のWebな方はチェックしてみてはいかがでしょうか。