HTML video mp4 codecs MIMEパラメータ を MP4v2 で調べる
動画をホームページで公開するにはサーバーに動画をアップロードして htmlファイルに<video>タグを記述する方法と、YouTubeに動画をアップしてその URLを含む埋め込みコードを htmlファイルに貼り付ける方法があります。当サイトでは 前者の方法 を採用しています。
HTML5では video タグ内に動画コンテナ(.mp4, .webmなど)の source要素に type属性を下記のように記述するのですが
HTML5 : <video controls poster="movie.webp"> <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> <source src="movie.webm" type='video/webm; codecs="vp9, opus"'> </video>
コンテナが 2種類あるのはウェブブラウザーの仕様に対応のためです。avc1(H.264/MPEG-4 AVC)は映像、mp4a.40.2(AAC-LC)は音声コーデックを示します。
MP4コンテナの場合エンコードの方法が幾通りもあるので上記 type属性の codecs MIMEパラメータ(codecs="...")に記述する avc1. 後の 6桁のコードは動画ファイルによって変わってきます。
即ち、このコードと動画のプロファイル、レベルが合っていなければウェブブラウザーはデコード、ストリーミング再生できません。逆に言うと 6桁のコードに合わせて動画をエンコードする必要があるわけです。
そこでこのプロファイル、レベルを表す 6桁コードは何なのか、そしてどうやったらそのコードを知ることができるのかを Ubuntuに MP4v2-utils をインストールして調べてみました。(2021年6月)
素材動画から codecs MIMEパラメータ、つまりプロファイル、レベルに合わせて MP4コンテナにエンコードするのは手間がかかります。
MP4v2-utils を使えば mp4動画のパラメータが分かるので細かい設定が不要になります。おおよそのファイルサイズで出力する設定でよいことになるのでエンコードにかける時間が節約できます。
補足:codecsパラメータを "avc1, mp4a" のように省略するとウェブブラウザーはデコード、ストリーミング再生できません
参考:メディア要素( video, audio )HTML Living Standard
Ubuntu 18.04LTSに MP4v2-utils をインストール
18.04LTSでは Ubuntu公式リポジトリに存在しているので Synapticパッケージマネージャーでも、端末からでもインストールできます。
検索欄に mp4v2 を入力して mp4v2-utilsパッケージにチェックを入れて適用ボタンを押します。
または、端末から
GNOME Terminal :
$ sudo apt install mp4v2-utils
でインストールできます。バージョンは 2.0.0~dfsg0-6 です。下記は Synapticパッケージマネージャーに記載されている mp4v2-utilsパッケージの説明を翻訳したものです。
こちらの launchpad.net に記載のものと同じです。
“
library to read, create, and modify mp4 files (frontends)
mp4ファイルを読み込んだり、作成したり、変更したりするライブラリ(フロントエンド)
The MP4v2 library provides an API to create and modify mp4 files as defined by ISO-IEC:14496-1:2001 MPEG-4 Systems. This file format is derived from Apple's QuickTime file format that has been used as a multimedia file format in a variety of platforms and applications.
[ MP4v2ライブラリは、ISO-IEC:14496-1:2001 MPEG-4 Systemsで定義されているmp4ファイルを作成および修正するためのAPIを提供します。このファイルフォーマットは、様々なプラットフォームやアプリケーションでマルチメディアファイルフォーマットとして使用されてきたAppleのQuickTimeファイルフォーマットから派生したものです。]
It is a very powerful and extensible format that can accommodate practically any type of media.
[ これは非常に強力で拡張性のあるフォーマットで、実質的にあらゆるタイプのメディアに対応できます。]
MP4v2 was originally bundled with mpeg4ip library, but has been moved into its own maintained library due to a combination of the cessation of support of mpeg4ip and the usefulness of this library on its own.
[ MP4v2は、元々mpeg4ipライブラリにバンドルされていましたが、mpeg4ipのサポートが終了したことと、このライブラリが単独で有用であることから、独自に整備されたライブラリに移行しました。]
This package contains the command line frontends.
[ 本パッケージには、コマンドラインフロントエンドが含まれています。]
”
mp4v2-utils には次のツールが含まれています。
- mp4art(1)
- mp4file(1)
- mp4subtitle(1)
- mp4track(1)
Ubuntu 20.04LTSに MP4v2-utils をインストール
20.04LTSでは Ubuntu公式リポジトリから削除されています。下の画像は Synapticパッケージマネージャーで mp4v2 を検索した結果のスクリーンショットです。
ご覧のようにパッケージはありません。したがって別途 debパッケージをダウンロードしてインストールするか、ソースパッケージを ビルド 、コンパイルしてインストールするしかありません。
debパッケージをインストールする
20.04LTS にインストール方法を調べたところ GitHub にありました。
端末から
$ wget http://archive.ubuntu.com/ubuntu/pool/universe/m/mp4v2/libmp4v2-2_2.0.0~dfsg0-6_amd64.deb $ wget http://archive.ubuntu.com/ubuntu/pool/universe/m/mp4v2/mp4v2-utils_2.0.0~dfsg0-6_amd64.deb
を実行するとホームディレクトリに debパッケージがダウンロードされます。
続けて端末から
$ sudo dpkg -i libmp4v2-2_2.0.0~dfsg0-6_amd64.deb $ sudo dpkg -i mp4v2-utils_2.0.0~dfsg0-6_amd64.deb
を実行します。
Synapticパッケージマネージャーを開くと上の画像のように mp4v2-utils と libmp4v2-2 が追加されています。これでインストールは完了です。バージョンを見ると 2.0.0~dfsg0-6 となっており、これは 18.04 LTSと同じものであることが分かります。
ソース ビルドしインストールする
下記の手順で MP4v2のビルド、コンパイルしてみました。(参考:ubuntu コンパイル入門 )
ツールをインストールする
$ sudo apt install build-essential checkinstall
作業ディレクトリの所有者をユーザーにする
$ sudo chown ユーザー名 /usr/local/src
作業ディレクトリをユーザー権限で読み、書き、実行できるようにする
$ sudo chmod u+rwx /usr/local/src
ソース パッケージ mp4v2-1.9.1.tar.bz2 をダウンロードする(配布元: Google Code Archive -- mp4v2 )
解凍したフォルダー(mp4v2-1.9.1)を作業ディレクトリにコピーしてそこに移動する
$ cp -r mp4v2-1.9.1 /usr/local/src/mp4v2-1.9.1 $ cd /usr/local/src/mp4v2-1.9.1
インストール先を /usr/bin に指定して Makefileを生成する
$ ./configure --prefix=/usr
ビルド(コンパイル)する
$ make
と、ここで次のエラーが出ました。
︙ (前略) make: *** [GNUmakefile:1316: src/rtphint.lo] エラー 1
解決方法は GitHub にありました。mp4v2-1.9.1ディレクトリ srcフォルダー内にあるソースファイル rtphint.cpp の 348行目を次のように編集します。
Gedit :
(pSlash != '\0') → (*pSlash != '\0') ・・・アスタリスクを追記する
保存したらもう一度、
$ make
今度は上手くいきました。
最後は make install ではなく check install です。Synapticパッケージマネージャーで管理するためです。
$ checkinstall
以上でインストール完了です。
mp4動画ファイルの解析
このセクションでは実際に mp4動画ファイルを解析してみました。解析といっても単にデータをダンプする(人が読めるように出力する)だけです。その前に当ページ冒頭の「 4D401E 」について少し説明します。
4D401E は 10進数の 77, 64, 30 を 16進数で並べたもので、H.264/MPEG-4 AVC の プロファイルとレベル を表していて画質(解像度やフレームレート)のレベルを示すもので、具体的には
- AVC Profile Indication(AVC プロファイルの表示)
- profile compatibility(プロファイルの互換性)
- AVC Level Indication(AVC レベル表示)
で、mp4ファイルをダンプしてみると上記 3つの行の末尾に 16進数が載っています。
mp4ファイルをダンプする
ファイル名 movie_02.mp4 の動画をダンプしてみます。この動画は管理人が MPEG2-TS 動画を編集、加工、リサイズしてエンコードしたものです。
- 映像ストリーム形式:H.264 / AVC
- 映像プロファイル / レベル:Hight @ Level 3.1
- 音声ストリーム形式:MPEG-4 AAC
- 音声プロファイル:Low Complexity(LC)
それでは端末を開き、次のコマンドを実行します。出力先はホームディレクトリです。
$ mp4file --dump movie_02.mp4 > mp4_dump
mp4_dump というバイナリファイルが生成されるのでこれをテキストエディタ Gedit で開くと「文字エンコードに失敗した。文書が壊れるかもしれない。」旨のエラーが出ます。ファイルを開く度に出ます。
煩わしいので空のテキストファイル mp4_dump.txt を作成して、ダンプした文書全体をコピー&ペーストして保存します。これでエラーは出なくなります。
映像の場合テキストエディタの検索窓に type avc と入力すると目的のプロファイルとレベルの行が表示されます。
Gedit : ︙ (前略) "movie_02.mp4": type avcC (moov.trak.mdia.minf.stbl.stsd.avc1.avcC) "movie_02.mp4": configurationVersion = 1 (0x01) "movie_02.mp4": AVCProfileIndication = 100 (0x64) "movie_02.mp4": profile_compatibility = 0 (0x00) "movie_02.mp4": AVCLevelIndication = 31 (0x1f) (後略) ︙
これでこのmp4動画のコーデックは avc1 である。またプロファイル、レベルは 64, 00, 1f になっていることが分かるわけですね。
音声の場合テキストエディタの検索窓に type esds と入力すると目的の行が表示されます。
Gedit : ︙ (前略) "movie_02.mp4": type esds (moov.trak.mdia.minf.stbl.stsd.mp4a.esds) (中略) "movie_02.mp4": objectTypeId = 64 (0x40) (中略) "movie_02.mp4": info = <2 bytes> 11 88 |..| (後略) ︙
以上の結果から HTML の type属性の記述は、
HTML5 : <video controls poster="movie_02.webp"> <source src="movie_02.mp4" type='video/mp4; codecs="avc1.64001f, mp4a.40.2"'> <source src="movie_02.webm" type='video/webm; codecs="vp9, opus"'> </video>
となります。これで主要なウェブブラウザー Edge, Google Chrome, Firefox で mp4動画が再生されます。
参考1:html - html5 video tag codecs attribute - Stack Overflow
参考2:html - html5 動画タグのコーデック属性 (参考1の日本語版?)
補足
今回、複数の mp4(H.264 / AVC)ファイルを調べている過程で次のコードでもストリーミング再生されるものがありました。
HTML5 :
<video controls poster="sample.webp">
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
</video>
それどころか codecs パラメータの値が合っていなくても再生されるものと再生できないものもありました。因みに当方の環境では上記のような codecsを明示しないコードにすると調査した全てのファイルが再生されました。
構文書式 も間違っていないようなので、こちらを使ってみて再生されないようであれば type属性を明示すればよいと思います。
雑感
本文中に Ubuntu 20.04LTS でソースからビルドした際にエラーが出たと書いていますが、このエラーを解消しないまま checkinstallコマンドを実行するとどうなるのか試してみました。
勿論、インストールは失敗しました。下の画像はその時の端末のスクリーンショットです。
この画像は ViratualBox 上の ゲストUbuntu なのですがこの時点でスクリーンショット アプリは機能しなくなりました。デスクトップのトップパネルには起動しようとしているアプリの様子が伺えます。
下記がこの時起きたことです。
- 全てのアプリが起動しなくなる
- 端末にコマンド入力はできるが何も機能しない
- シャットダウンもできない
- コンソールにも降りれない
- PC電源ボタン長押しで強制終了するしかない
- 再度PCの電源投入するもカーネルパニックで起動しない(下の画像)
完全にシステムが壊れてしまいました。実はこれ、実機 で行った事でありまして VirtualBoxでは再現性の確認と前出のスクリーンショットを撮る目的で行いました。
勿論、事前にパーティション丸ごとバックアップ イメージを作成しているので、VirtualBox のスナップショットのように復元できます。