Webサイトやクラウドストレージ（GCSなど）にMP4動画を配置した際、「動画の読み込みが遅い」「全体をダウンロードするまで再生が始まらない」といった現象に遭遇したことはないでしょうか。
実はこれ、ネットワーク回線の速度だけが原因ではなく、MP4ファイルの内部構造に問題があるケースがほとんどです。今回は、動画をストリーミング再生に適した状態にする「FastStart（Web最適化）」の仕組みと、ブラウザ上で一瞬で最適化できるツールを自作した話をご紹介します。
MP4の内部構造：「moov」と「mdat」
MP4ファイルは、「アトム（またはボックス）」と呼ばれるデータブロックの集合体で構成されています。ストリーミング再生において特に重要なのが以下の2つです。
- moov アトム: 動画の再生時間、総フレーム数、データの配置場所などが書かれた「インデックス情報（メタデータ）」
- mdat アトム: 実際の「映像・音声データ」
Webブラウザが動画を再生するためには、まずこの「moov（インデックス情報）」を読み込む必要があります。
標準の配置（再生が遅い）
一般的な録画データは、mdat が先にあり、ファイルの最後尾に moov が配置されています。この状態だと、ブラウザは数GBあるファイルの末尾まで読み込まないと再生を開始できません。
FastStartの配置（即座に再生可能）
moov をファイルの先頭に移動させた状態を「FastStart（Web最適化）」と呼びます。ブラウザはファイルの先頭を少し読み込むだけでインデックス情報を取得できるため、即座にストリーミング再生を開始できます。
なぜ撮影した動画は最初からFastStartではないのか？
「最初から先頭にインデックスを置いておけばいいのでは？」と思うかもしれません。しかし、スマートフォンやカメラで録画を開始した時点では、「いつ録画が停止されるか（最終的なデータサイズがどうなるか）」が分かりません。
そのため、機器はまず映像データ（mdat）をストレージに書き込み続け、録画停止ボタンが押された瞬間に全体像を計算し、ファイルの最後尾にインデックス情報（moov）を追記します。物理的な仕組み上、未編集の動画データは必然的にFastStart化されていない状態になります。
状態を客観的に実測・確認する方法
手元のファイルがFastStart化されているかどうかは、ffprobeコマンドで確認するのが確実です。
ffprobe -v trace input.mp4 2>&1 | grep -e "type:'moov'" -e "type:'mdat'"【未最適化のファイルの場合】
以下のように、実データ（mdat）の後にメタデータ（moov）が続きます。
[mov,mp4... @ 0x...] type:'mdat' parent:'root' sz: 144329275 44 144461225
[mov,mp4... @ 0x...] type:'moov' parent:'root' sz: 131914 144329319 144461225【FastStart化されたファイルの場合】
インデックス情報（moov）が先頭に来ていることが確認できます。
[mov,mp4... @ 0x...] type:'moov' parent:'root' sz: 131914 36 144461225
[mov,mp4... @ 0x...] type:'mdat' parent:'root' sz: 144329275 131958 144461225ブラウザ完結の「MP4 FastStart化ツール」を作りました
ターミナル上で ffmpeg -i input.mp4 -c copy -movflags +faststart output.mp4 とコマンドを叩けば最適化は可能なのですが、毎回CLIを開くのも、クラウド上のファイルを一度ローカルに落として処理するのも少し手間です。
そこで、ブラウザのローカル処理だけで一瞬でFastStart化が完了するツールを開発しました。
▶ MP4 FastStart Optimizer
https://tools.omikuji.dev/mp4-faststart/
ツールの特徴
- 完全ブラウザ完結: サーバーへの動画のアップロード・ダウンロードは一切発生しません。
- セキュアで高速: ローカルマシンのブラウザ内で処理（再エンコードなしのデータ再配置のみ）を行うため、大容量のファイルでも数秒で処理が完了します。機密性の高い動画でも安心して使用できます。
Webサイトに動画を埋め込む前や、GCS等のクラウドストレージに配信用の動画をアップロードする前に、ブラウザでサクッと最適化しておくといい。