Base64 から動画へ変換

Base64 の動画を再生する手順

1. Base64 を Base64 または data URI に貼り付けるか、.txt ファイルを開く でテキストファイルから読み込みます。ページを開くと、2 秒の H.264 サンプルが読み込まれます。
2. プレーヤーに最初のフレームが表示されます。ブラウザがファイルのメタデータを読み込むと、再生時間 と 寸法 が表示されます。サンプルなら 0:02.0 と 96 × 64 px です。
3. 拡張子 と MIME タイプ は、検出したコンテナに合わせて .mp4 と video/mp4、.webm と video/webm、.mov と video/quicktime のように決まります。
4. ファイルをダウンロード を押して動画を保存します。

再生にはブラウザ自身のデコーダーを使い、ページの Content Security Policy が Cloudflare のページビュー計測以外のネットワークリクエストをブロックしているので、プライベートな録画は端末から出ません。

コンテナとコーデック

動画ファイルには 2 つの層があります。1 つはコンテナ（MP4、WebM、MOV、MKV）で、ツールは先頭のバイトからこれを判定します。もう 1 つは中に入っている映像と音声のコーデックで、これを読めるのはブラウザのメディアエンジンだけです。再生できるかどうかはコーデックで決まります。

エンコードを自分で決められるなら、MP4 に入れた H.264 が無難です。ブラウザがファイルをデコードできないときは、再生時間 と 寸法 が「該当なし」になり、プレーヤーの上に「お使いのブラウザはこの MP4 ファイルを再生できません。ダウンロードしてメディアプレーヤーで開いてください。」という注意が出ます。ダウンロードしたファイル自体は壊れておらず、VLC や ffmpeg なら表のどのコーデックも読めます。

検出結果からわかること

ブラウザの MediaRecorder でマイクだけを使って録音した WebM ファイルも WebM なので、動画として受け付けられ、音声として再生されます。MP4 系の詳細は Base64 から MP4 へ をご覧ください。

Base64 の動画が使われる場面

動画生成 API は、ダウンロード URL の代わりに JSON の Base64 フィールドで動画を返すことがあります。ブラウザで撮った画面録画やカメラ映像は、Base64 でサーバーに送信されることがよくあります。テストスイートでは短い動画を文字列として埋め込み、Web ページによってはミュートの背景動画を data:video/mp4 URI としてインライン化しています。このやり方とそのコストは data URI のパフォーマンス で解説しています。そうした文字列を作るには 動画から Base64 へ を使ってください。

ffmpeg でコーデックを確認して変換する

クリップのコーデックを確かめるには、デコードしてから ffprobe にかけます。

base64 -d clip.b64 > clip.mp4
ffprobe -v error -select_streams v:0 -show_entries stream=codec_name,width,height -of csv=p=0 clip.mp4

HEVC の動画なら hevc,320,240 と表示されます。音声を AAC にして H.264 で再エンコードすると、どのブラウザでも再生できるファイルになります。+faststart はインデックスを先頭に移すので、ファイル全体を読み込む前に再生を始められます。

ffmpeg -i clip.mp4 -c:v libx264 -pix_fmt yuv420p -c:a aac -movflags +faststart clip-h264.mp4

コマンドラインのレシピは Bash での Base64 にもっとあります。

よくある質問