MP4 を WebM に変換

コンテナの変換の多くは見た目だけの作業で、中身の H.264 の映像は箱を変えるだけです。今回はそうはいきません。WebM は 2010 年に Google が特定の 2 つのコーデックを前提に定めた形式で、このページが作るファイルには VP9 の映像と Opus の音声が入ります。元の MP4 はほぼ確実に H.264 と AAC でした。共有できるものは何もなく、すべてのコマをゼロから復号してエンコードし直します。

これが、他のコンテナ変換とは別にこのページが存在する理由です。処理はずっと遅く、設定によって結果がはっきり変わり、その見返りとして同じ見た目でより小さいファイルが得られます。これはファイルがネットワークを通って誰かに届く場合にだけ意味を持ちます。

VP9 は H.264 より新しい世代のコーデックで、同じ見た目の品質をより少ないビットで実現します。ヒーロー動画やループする背景動画——実際にページを重くする 2 つの代表例——では、この差がそのまま訪問者が何も表示されない画面を見つめる時間の長さに直結します。

ただし保証はありません。すでに圧縮された MP4 を再符号化するということは、VP9 の符号化器が画像と同時に H.264 のノイズも忠実に再現してしまうということで、すでにきつく圧縮された短いクリップでは WebM のほうが小さくならないこともあります。両方のファイルサイズを見比べてから決めてください。大きくなった場合は元に戻すべき変換です。

video 要素は複数の source 子要素を受け付け、ブラウザーは最初に再生できるものを選びます。WebM を先、元の MP4 を後に置けば、対応するブラウザーは軽いファイルを、それ以外は JavaScript を書かずにフォールバックします。実際にダウンロードされるのはどちらか一方だけです。

WebM ができたからといって MP4 を消さないでください。容量以外のコストはなく、ダウンロードを求められたときに渡せるファイルであり、10 年後も編集ソフトで開けるファイルです。WebM は配信用の形式であり、それだけをマスターとして扱うと、プロジェクトの原本を失うことになります。

3 段階の帯域はコーデックごとに解決されるビットレートの目標にひもづいていて、既定は balanced です。音のない背景ループなら small が妥当です。誰も注視しておらず、ページ上の他の要素と帯域を奪い合っている場面だからです。

人の顔や文字、細部を読ませたいものであれば balanced が最低ラインです。high は後で編集や再エンコードを行うファイル向けで、今回ではなく次の世代の画質を守るための設定です。配信用ファイルにそれを使っても、誰も気づかないバイト数を消費するだけです。

画面が小さくなれば同じ見た目を保つのに必要なビット数も減り、その関係はゆるやかではありません。幅と高さを半分にすれば画素数は 4 分の 1 になります。800 ピクセル幅のカラムに表示される動画に 4K を送るのは、レイアウトが表示する前に捨ててしまう細部に帯域を使っていることになります。

解像度の設定は縮小方向にしか働きません。元より大きいサイズを求めても無視され、拡大は同じ細部しか含まないファイルを大きくするだけだからです。再生のたびにブラウザーに拡大縮小させるより、ここで一度だけ設定するほうが確実です。

音声は Opus で再符号化されます。これは WebM のもう半分にあたる部分で、低ビットレートでは AAC よりはっきり優れており、ブラウザーが通話に Opus を採用しているのもそのためです。低ビットレートの音声では Opus のほうが聞き取りやすくなります。

避けられないコストは、すでに一度圧縮された音声にもう一段の非可逆圧縮を重ねることです。音のない背景ループやナレーション付きのデモではほとんど関係ありませんが、音声そのものが主役の音楽動画では、配信用の符号化に任せず、元の音声を別に高音質で抽出してください。

WebM はアルファチャンネルを持てる数少ない動画形式の 1 つで、そのため特有の期待外れが起きます。MP4 には渡せるアルファがなく、ストリームにアルファに関する副次データがあっても変換の過程で捨てられます。透明な WebM は、透明度を実際に持つ元素材から作る必要があります。

ページの背景の上に箱のない動画を置きたい場合、動画にあらかじめ一致する背景色を焼き込んでおくか、不透明なクリップの上に CSS のブレンドモードを使うのが通常の答えです。どちらもアルファ付き動画より扱いが安定していて、複数のブラウザーがまだ挙動を統一できていません。

この変換は 1 バイトも読み込む前に、そのブラウザーが VP9 を符号化できるかを確認し、できない場合はその旨と対応するブラウザー名を表示します。この確認があるおかげで、失敗はファイルが悪いかのように見える形ではなく、数分の処理の後ではなく即座に伝わります。

ソフトウェアによる代替は意図的に用意していません。WebAssembly にコンパイルした VP9 の符号化器は数十メガバイトあり、すでに搭載されているハードウェアの符号化器よりおよそ一桁遅くなります。それを黙って提供すれば、明確な拒否が固まって見えるだけの変換に変わってしまいます。