このページの本文へ

HTML5 videoで作る“動くストリートビュー” (3/4)

2010年03月24日 11時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

ブラウザーで表示できるように変換

 ブロギー付属のPMBで変換された動画はWindows Media形式なので、そのままだとHTML5では扱えません。さらに変換を続けましょう。


■Mac OS Xの場合

 Mac OS XではWindows Media形式を直接読み込めないので、先に「Flip4Mac」をインストールします。


 次に、Theoraに変換するソフトを用意しましょう。ここでは「ffmpeg2theora」を使います。ffmpeg2theoraは以下のページからダウンロードできます。



 ダウンロード、インストールが済んだらターミナルを起動し、以下のようにコマンドを入力します。


ffmpeg2theora 変換するファイルのパス


Mac OS Xでの変換処理はターミナルを起動してコマンドを入力します

動画はQuickTime Playerで表示できるものであればffmpeg2theoraで変換できます


 変換するファイルのパスは、ffmpeg2theora と入力した後に変換したいファイルをドラッグドロップすれば自動的に入力されます。


■Windowsの場合

 Windowsの場合も、「ffmpeg2theora」を使ってTheoraに変換しましょう。

 まず、コマンドプロンプトを起動します。

スタートメニューから「すべてのプログラム」→「アクセサリ」→「コマンド プロンプト」を選択します

command.comを入力しリターンキーを押すかOKボタンを押します


 コマンドラインから、ffmpeg2theora.exe(バージョンによってファイル名が異なります)のパスと変換したいファイルのパスを入力します。

変換したいファイルのパスを指定します

しばらくすると変換が終わります


 以下のように-vオプションを付けると画質を指定できます。オプションを付けない標準状態では画質がよくないので、好みの値を指定しましょう。0から10の値が指定でき、10が最も高画質になります。


ffmpeg2theora -v 10 変換するファイルのパス


 これで動画の準備ができました。

 なお、サンプルでは、動画のファイルサイズを小さくするため、動画の上下にある黒い余白部分をAfterEffects(*2)で削除しています。削除しない場合は、動画の表示位置などをスタイルシートで調整してください。



*2 「AfterEffects」は動画を加工するソフトです。アドビ システムズから発売されています。
http://www.adobe.com/jp/products/aftereffects/

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています