読者です 読者をやめる 読者になる 読者になる

しばやん雑記

ASP.NET とメイドさんが大好きなフリーランスのプログラマーのブログ

Chrome for Android で HTML5 の Video タグで再生出来ない mp4 があって困った話

仕事で最近は Azure Web サイト上で ffmpeg とか使ってますが、今日は Android のみ HTML5 の Video タグで mp4 を再生できない現象に遭遇したので、ちょっと調べてみました。

スマートフォン(スマホ)Androidでのmp4再生のための作業録 | Ken's WEB

原因はその mp4 のボックス構造がストリーミング再生に不適格な順序になっていたことが原因のようです。

バイナリエディタで再生出来なかった mp4 を開いてみると、動画の基本的なメタデータが含まれているはずの moov よりも mdat の方が先に出てきました。

f:id:shiba-yan:20140715211057p:plain

そして肝心の moov はファイルの最後にあったので、動画の情報を読み取ろうとして Android の Chrome では再生できない状態になっていたのでしょう。

なので、再エンコードなどを行う必要もなくボックス構造を変更するだけで、Android でも再生出来るファイルに変換出来ます。mp4 の仕様は公開されているので自分でロジックを書いても良いですが、めんどくさいので mp4box を使って変換を行います。

MP4Box 0.5.0 / 0.5.1 beta

変換するためのコマンドは、以下のような非常にシンプルなもので問題ありませんでした。

MP4Box.exe -add input.mp4 -new output.mp4

そして、今回もまた Azure Web サイト上で動かすために最低限動作に必要なファイルを調べたところ、以下の 3 ファイルで問題無いようです。

  • MP4Box.exe
  • libgpac.dll
  • js32.dll

CRT が追加で必要という話もありましたが、Azure Web サイトでは PHP を有効にしておけば、特に追加でインストールする必要なく動作しました。

f:id:shiba-yan:20140715214454p:plain

メッセージを読むと 0.5 秒ごとにインターリーブするファイルに変換してくれているみたいです。

変換後のファイルをバイナリエディタで確認してみると、ファイルの先頭の方に moov が移動していることがわかります。やはりメタデータは最初に出てくるべきですね。

f:id:shiba-yan:20140715215015p:plain

C# からの叩き方は C# と FFmpeg を使って動画のサムネイルを生成してみた - しばやん雑記 とほぼ同じなので省略しますが、普通に ASP.NET なアプリケーション内で動作してくれてます。