動画を Base64 に変換する方法
- 動画ファイルをボックスにドロップするか、ファイル選択で選びます。MP4、WebM、MOV のほか、お使いのシステムが認識する形式を受け付けます。
- プレビュープレーヤーで再生し、正しいクリップかを確認します。
- 出力形式 は最初 Data URI になっています。API 用には プレーン Base64 か JSON を選びます。
- 短いクリップは 出力をコピー、大きなものは .txt で保存 を使います。
Base64 から動画を見分ける
| コンテナ | MIME タイプ | Base64 の先頭 |
|---|---|---|
| MP4 | video/mp4 | AAAA + 1 文字 + GZ0eXB、例:AAAAIGZ0eXBpc29t |
| MOV(QuickTime) | video/quicktime | AAAAFGZ0eXBxdCAg(ブランド qt) |
| WebM、MKV | video/webm、video/x-matroska | GkXfo |
| AVI | video/x-msvideo | UklGR(WAV や WebP と同じ RIFF) |
コンテナから、data URI にどのラベルを付けるべきかがわかります。ブラウザで再生できるかどうかは、中のコーデック(H.264、HEVC、VP9、AV1 など)で決まります。
Base64 の動画が適している場面
- 1 ファイルで完結する HTML ページに入れるごく短いループクリップ。1~2 秒の製品アニメーションや UI デモなどです。ブラウザは一般に音声付きの自動再生をブロックするので、
autoplay muted loop playsinlineを使ってください。 - アップロード、トランスコード、再生のテスト用に、テストコードの隣に置いておくテスト用データ。
- 短い動画をインラインで受け付ける API:マルチモーダルやメディア処理の API には、短いクリップを JSON 内の Base64 で受け取るものがあります。サイズには上限があり、それより長いものには保存済みファイルへのリンクも受け付けるのが普通です。
それ以外の場合は、普通に配信する動画ファイルのほうが優れています。ブラウザは範囲を指定してリクエストでき、ダウンロードが終わる前に再生を始められ、キャッシュもできます。data URI は完全にダウンロードしてデコードする必要があり、それを含む HTML、CSS、JSON は動画のサイズにさらに 3 分の 1 を加えた分だけ膨らみます。すでにメモリ上にファイルがある Web アプリなら、URL.createObjectURL(blob) を使えば Base64 を一切使わずに再生可能な URL が得られます。
エンコードの前にクリップを小さくする
動画のサイズを主に決めるのは、解像度、フレームレート、ビットレートです。1280×720 で 3 秒、69,243 バイトのテストクリップは、幅 480 ピクセルに縮小して音声トラックを削除すると 17,281 バイトになりました。
ffmpeg -i clip.mp4 -vf scale=480:-2 -c:v libx264 -crf 28 -an -movflags +faststart small.mp4
-crf 28 は画質を多少犠牲にしてサイズを小さくし(値が大きいほど小さくなります)、-an は音声を削除し、scale=480:-2 は縦横比を保ったまま高さを偶数にします。その結果をここでエンコードしてください。MP4 固有の詳細は MP4 を Base64 に を参照してください。Base64 を動画に では Base64 文字列を再生できます。
よくある質問
Base64 で HTML に動画を埋め込めますか?
はい:<video src="data:video/mp4;base64,..." controls></video>。短いクリップならうまくいきます。長い動画ではページが巨大になり、ストリーミングもできません。ブラウザは data URI 全体を受け取らないと再生を始められないからです。
どれくらいの長さの動画まで変換できますか?
ツールに固定の上限はありません。大きなファイルはチャンク単位でエンコードされ、.txt として保存されます。約 48 MB を超える出力はコピーできません。実際には、Web ページで数 MB を超える data URI を使うのはすでに悪手です。
どの動画形式をエンコードすべきですか?
H.264 映像の MP4 は、現行のすべてのブラウザで再生できます。WebM(VP9 または AV1)はたいていより小さく、こちらも広く対応しています。スマートフォンの MOV ファイルは HEVC を使っていることがあり、Safari 以外の多くのブラウザでは再生できません。