コンテンツへ移動

WebMとMP4

ブラウザ再生、コーデック対応、ファイルサイズ、エディター向けファイル、フォールバックパターンを用いたWebサイト動画配信について、WebMとMP4を比較します。

作成者 Petr Samokhin

MP4は、直接の共有、編集、再生環境が不明なデバイス向けに、単一ファイルとして最も安全な選択肢です。WebMは、VP9またはAV1の動画とOpusの音声を用いた、ブラウザ配信に強力なオープンフォーマットです。Webサイトでは両方を提供することで、最新の圧縮効率と確実なフォールバックを組み合わせられます。

WebMとMP4はコンテナ

コンテナは動画、音声、字幕、タイミング情報、メタデータを含みます。コーデックは、その内部のストリームを圧縮します。.webm.mp4だけを比較すると、画質、サイズ、再生にとって最も重要なコーデックの選択が隠れてしまいます。

コンテナ一般的な動画コーデック一般的な音声コーデック主な用途
WebMVP8, VP9, AV1Vorbis, OpusオープンなブラウザメディアおよびWeb配信
MP4H.264, H.265, AV1AAC, 対応ワークフローにおけるOpus一般的な共有、デバイス、エディター、Webフォールバック

片方がH.264で、もう片方がHEVCを含む場合、2つのMP4ファイルは非常に異なる挙動を示すことがあります。同様に、片方がVP9で、もう片方がAV1を使用している場合、2つのWebMファイルは異なる結果になります。技術的な判断をする際は、常にコーデックの組み合わせを明記してください。

互換性はコーデックの組み合わせに依存する

メールでの送信、不明なサービスへのアップロード、プレゼンテーションソフトへの挿入、混合ハードウェアでの開封など、ファイルの到達範囲が重要な場合、H.264動画とAAC音声のMP4が最も信頼性の高い組み合わせです。その強みは到達範囲の広さにあり、必ずしも圧縮効率の高さではありません。

VP9またはAV1動画とOpus音声のWebMはWebメディア向けに設計されており、最新のブラウザワークフローでよく機能します。古いデバイスや一部のエディターでは、アプリがWebMコンテナには対応しているものの、内部の特定のコーデックプロファイルには対応していない場合など、扱いが難しいことがあります。

MDNは、 メディアコンテナガイド において、オープンなWebフォーマットにはWebMを、汎用的な互換性にはMP4を検討することを推奨しています。拡張子 alone に依存するのではなく、対象ユーザーにとって重要な最も古いブラウザ、デバイス、エディター、アップロードサービスを確認してください。

ファイルサイズと画質は拡張子の属性ではない

WebMが常にMP4より小さいわけではなく、MP4が本質的に画質が高いわけではありません。同じ再生時間の場合、ファイルサイズは総ビットレートによって主に決まります。コーデックの効率、エンコーダー設定、ソースの複雑さ、解像度、フレームレートが、そのビットレートが保持できる画質を決定します。

慎重にエンコードされたVP9WebMは、ビットレートを制限されたH.264MP4よりも優れた結果を出すことがあります。その逆も一般的です。根拠のない数値比較に基づいてフォーマットを選ばないでください。

公平な比較を行うには:

  1. 同じソースマスターから開始する。
  2. 再生時間、解像度、フレームレート、音声処理を一貫させる。
  3. 各候補を、他の圧縮済みファイルではなくソースからエンコードする。
  4. 通常の再生と全画面表示で、同じ困難なフレームを比較する。
  5. 実際の配信先で再生テストを行う。

配信先ごとに形式を選ぶ

配信先より適切なデフォルト理由
メール、チャット、クライアントへの納品H.264 MP4広範な再生サポート
ソーシャルメディアまたは第三者へのアップロードサービスの文書化された形式(多くの場合MP4非対応の組み合わせを回避
ソースが1つのみのWebサイトH.264 MP4保守的な互換性
ソースが複数のWebサイトWebMMP4フォールバック最新のオプションとフォールバック
エディターでの共有エディターの文書化されたコーデックとコンテナ拡張子よりもインポートとスクラビングが重要

共有が便利なからといって、どちらのフォーマットもオリジナルを置き換えるべきではありません。カメラファイルまたは高画質な編集用エクスポートを保持し、各配信先用に小さなコピーを作成してください。

WebサイトではMP4フォールバック付きでWebMを配信する

HTMLでは、ブラウザが複数のソースを順番に試すことができます。

<video controls width="1280" height="720" preload="metadata">
 <source src="demo.webm" type="video/webm" />
 <source src="demo.mp4" type="video/mp4" />
 Download the <a href="demo.mp4">MP4 video</a>.
</video>

MDNはこの 複数コンテナフォールバックパターン を文書化しています。レイアウトスペースを確保するために実際のwidthとheight属性を設定し、装飾用でない場合はcontrolsを含め、最初のソースのサポートを一時的に削除してフォールバックをテストしてください。

本番サイトでは、字幕、ポスター画像、減速動作の挙動、およびビジュアルヒーロー領域に動画が必要かどうかを考慮してください。

避けられる画質劣化なく変換する

コンテナのみを変更することをリムックスと呼びます。既存の動画および音声コーデックが宛先コンテナで有効な場合、高速かつ可逆圧縮で変換できます。エンコード済みのストリームを小さくするわけではありません。

宛先がソースコーデックをサポートしていない場合、またはより低いビットレート、小さな解像度、異なる音声形式が必要な場合に、再エンコードが必要です。元のマスターから一度だけ再エンコードしてください。WebMMP4に変換し、再度WebMに変換すると、2回の非可逆圧縮が適用され、破棄された詳細は復元されません。

変換ツール以外のプレイヤーで変換後のファイルを検証してください。再生時間、音声の同期、字幕(存在する場合)、および末尾付近のシークを確認します。

実用的な変換パスについては、 MacでMP4に変換 または WindowsでMP4に変換 をご覧ください。コーデックの背景知識: VP9とAV1とは

シンプルなMP4共有で十分な場合

受信者が不明な場合、アップロードフォームでMP4がリストされている場合、またはメール、チャット、スライドで開く1つのファイルが必要な場合、単一のH.264 MP4で機能します。

サイトの管理権を持ち、最新の圧縮効率とフォールバックを望む場合は、WebMMP4のペアを用意します。 GetCompress は、WebMMP4を含む一般的な動画フォーマットをローカルで変換・圧縮し、それらの納品用コピーを作成できます。受信者が不明な場合は、広く互換性のあるMP4プリセットを使用してください。サイトのHTML、字幕、キャッシュ、パフォーマンス予算は、別途実装とテストが必要です。正確な目標ファイルサイズは動画ワークフローにのみ適用されます。