2011年12月19日

FFmpegで動画変換時のProgressBarを表示する(1/4)

 今回はFFmpegで動画を変換する時に、動画変換の進行状況を表すプログレスバーをPHPとJavascriptを使ってブラウザー上で表示させる方法を紹介します。予めPHPでFFmpegが使える状況にしておいてください。PHPでFFmpegを使うようにする方法はこのブログの記事「Windows上でPHPを使ってFFmpegを動かす」を参考にしてください。

学習の流れ

 WindowsではFFmpegをコマンドプロンプトから動画ファイル、例えばmpegをflv等に変換する時にコマンドプロンプト上では動画に関する情報が表示されます。この時どのような情報が表示されているのかを確認していきます。

 続いてPHPを使って、コマンドプロンプト上に表示される情報を取得してブラウザ上で見れるようにします。この時ffmpegをPHPで操作する為に必要な外部ログラムを実行できる関数execではなく、関数popenを使います。なぜpopenを使うのかも解説します。

 最後にPHPで取得した情報からプログレスバーに必要な情報を取り出し、プログラムで加工してプログレスバーとして表示させます。

 実際プログレスバーの表示に関する部分はFFmpegで動画変換時のProgressBarを表示する(4/4)に書かれていますので、上記の部分が必要なければこちらから先にご覧ください。

 以上が簡単な流れとなります。

コマンドプロンプトで進行状況を見てみる

 では動画を変換する時にFFmpegによってどのような情報が出力されるのか見てみましょう。ffmpeg.exeがあるフォルダ内にtest.mpegというファイルを配置します。今回扱う動画ファイルはmpegにしましたがFFmpegで変換できる動画ファイルならなんでも構いません。しかし進行状況が良く分かるようにある程度分数のある動画にしてください。今回扱う動画は6分程度のものを使っています。

 まず以下のコマンドをコマンドプロンプトに入力します。(今回はプログレスバーに必要な情報だけを取得するので特にオプションなどは指定していません。)

ffmpeg -i test.mpeg test.flv
コマンドプロンプトでコマンドを実行1
図1:ffmpegのコマンド

 このコマンドを実行すると変換が始まる前に以下のようにFFmpegや変換する動画に関する情報が最初に表示されます。

ffmpegコマンド実行結果1
図2:ffmpegのコマンドの結果1

 この結果で赤で囲んだ"Duration"という所を見てください。これは動画の再生時間を表しています。

Duration: 00:06:42.26, start: 0.500000, bitrate: 944 kb/s

続いてこの後の方に表示される"Press [q] to stop, [?] for help"という所までいきます。以下の図をご覧下さい。

コマンドプロンプトでコマンドを実行結果2
図3:ffmpegのコマンドの結果2

"Press [q] to stop, [?] for help"と表示された直後に、"Duration"で示された時間中どれだけの時間分が変換されたか等の情報が、刻一刻と表示されていきます。

frame= 125 fps= 0 q=22.6 size= 212kB time=00:00:03.60 bitrate= 481.0kbits/s

 frameから始まる行の内、"time=00:00:03.60"という部分があります。この"time=00:00:03.60"は先程も言いましたが"Duration"中今どれだけの時間分が変換されたかを示しています。ですのでこのtimeの部分は変換されるたびに変化していきます。

 変換が全て終了すると以下の赤で囲んだ部分のようにvideoのサイズ、audioのサイズ、オーバーヘッド等の情報が最後に表示されて終ります。

コマンドプロンプトでコマンドを実行結果3
図4:ffmpegのコマンドの結果3

 以上、コマンドプロンプト上で動画を変換する時に表示される情報を見てきました。実はこの中でプログレスバーを作る時に必要になるのが赤で囲んだ部分です。

 次ページからはコマンドプロンプト上で表示した内容を、そのままブラウザー上で表示する方法について解説します。

posted by よしお | Comment(2) | TrackBack(0) | ffmpeg | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
できねぇです
Posted by 赤虫 at 2013年07月03日 14:25
はじめまして赤虫さん。
管理人のよしおと言います。

どの辺りでできませんでしたか?
もし可能なら具体的に教えて頂けますでしょうか?
よろしくお願いします。
Posted by よしお at 2013年07月04日 00:20
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/241391580

この記事へのトラックバック