動画を1コマずつ、並べて比べる

使い方

1. 動画を選ぶ: 「動画 A」を選ぶか、動画をプレイヤーにドラッグ＆ドロップします。比べたい動画があれば「動画 B」も選びます。
2. コマ送りで確認する: 「1コマ」「5コマ」のボタンか、キーボードの ← → で動かします。フレームレートは動画から自動で判定します。
3. 比べる・描き込む: 2 つの動画を「スワイプ」「左右に並べる」「重ねる」で比べ、直線・矢印・円・角度などを描き込めます。
4. 保存する: 今のコマを画像で保存したり、IN 点〜OUT 点の区間や比較の様子を動画で保存したりできます。

コマ送りの仕組み

動画を読み込むと、ファイルの中にあるすべてのフレームの表示時刻とキーフレームの位置を読み取ります（MP4・MOV・WebM・MKV）。コマ送りは、この時刻表の「次の／前のフレーム」の時刻へ移動するため、スマホで撮った可変フレームレートの動画でも 1 コマずつ正確に進みます。移動先は、フレームの境目から少し（1/4 コマ）後ろの時刻にしているため、境目の誤差で 1 コマずれることもありません。

WebCodecs に対応したブラウザ（Chrome・Edge など）では、止まっているときのコマを動画から直接デコードして表示します。前に戻るコマ送りも、直前のキーフレームからまとめてデコードして覚えておくため、続けて戻る操作が速くなります。

フレーム番号は 0 から数えます（最初のフレームが 0）。キーフレームのコマでは「キーフレーム」と表示します。「キーフレーム ▶▶」ボタンで、前後のキーフレームへ移動できます。

時刻表を読み取れない動画や、「コマ送りの基準」でフレームレートを選んだ（上書きした）ときは、設定したフレームレートで等間隔と見なした約 1 コマ単位で動きます。詳しくは「可変フレームレート（VFR）とは？」「キーフレームと GOP とは？」をご覧ください。

タイムコードの表示

タイムコードは、フレーム番号からノンドロップ形式（HH:MM:SS:FF）で計算して表示します。フレームレートが 29.97 / 59.94 fps のときは、ドロップフレーム形式（HH:MM:SS;FF）に切り替えられます。ドロップフレームでは、毎分先頭のフレーム番号 2 つ（59.94 fps では 4 つ）を飛ばし、10 分ごとは飛ばしません（例: 00:00:59;29 の次は 00:01:00;02）。詳しくは「タイムコードとドロップフレームの仕組み」をご覧ください。

2 つの動画を比べる

動画 B を読み込むと、「スワイプ」（境界線をドラッグして左右で見比べる）、「左右に並べる」、「重ねる」（B の不透明度を調整）で比べられます。撮影を始めたタイミングが違う場合は、動画 B の時間ずらしをミリ秒単位で、または「動画 B だけを動かす」でコマ単位で調整します。A と B をそれぞれ同じ瞬間（インパクトなど）に合わせて「今の位置を同期点にする」を押すと、その位置をいつでも呼び出せます。

描き込み・計測

動画の上に、直線・矢印・円・角度・フリーハンドを描けます。角度は 3 点（1 点目 → 頂点 → 3 点目）を選ぶと、映像上の角度を表示します。描き込みは「全フレームに表示」と「このフレームだけ」を選べ、比較動画の書き出しや静止画の保存に含められます。

保存・書き出し

切り出し・比較動画の書き出しは WebCodecs と動画の解析が必要です。使えないブラウザ・動画では、区間を再生しながら録画する方式（MediaRecorder）で書き出します。この方式は区間の再生時間と同じだけ時間がかかり、再圧縮され、保存される形式（WebM・MP4 など）はブラウザによって異なります。明るさ・コントラストの調整は、比較動画の書き出しにだけ反映されます。

動画は外部に送信しません

動画は外部に送信しません。ページの表示やアクセス解析のための通信はありますが、動画の内容は含まれません。アクセス解析に送るのは「動画を読み込んだ」「書き出した」「比較モードを使った」などの回数だけで、ファイル名や動画の内容は送りません。動画の解析・書き出しに使うプログラムも video.33msec.com から読み込みます。

パソコンのブラウザで開発者ツールの「ネットワーク」を開いたまま動画を読み込むと、動画を送る通信がないことを確認できます。

読み込める動画

再生できるかどうかは、ファイルの種類（MP4・MOV・WebM など）だけでなく、中の映像の形式（コーデック）とブラウザ・OS・パソコンの組み合わせによって決まります。読み込めなかったときは、原因と対処法をプレイヤーの下に表示します。

iPhone で撮った動画（HEVC / H.265）は、ブラウザや OS によって再生できない場合があります。Safari で開くか、iPhone の「設定」→「カメラ」→「フォーマット」を「互換性優先」にして撮影すると、多くのブラウザで再生できる H.264 で保存されます。

確認した対応状況

○ は、テスト用の動画をこのツールで再生・コマ送りできたことを表します。ほかのブラウザ・OS は確認でき次第追加します。お使いのブラウザでの対応状況は、下のボタンで調べられます（ブラウザが答える「対応しているか」の結果です）。

パソコンのブラウザでの利用をおすすめします。スマートフォンでは、再生・コマ送り・静止画の保存などの基本操作ができます。

用途別ガイド

• ゴルフスイングを2画面で比較・コマ送りする方法
• 野球の投球・打撃フォームをコマ送りで確認・比較する方法
• 格闘ゲームのフレームを動画で検証する方法
• 動画から静止画を切り出す方法（1コマ単位で保存）
• ドライブレコーダーの映像をコマ送りで確認する方法
• 実験・研究の動画をフレーム単位で計測する方法
• 映像制作で2つの素材を並べて比較する方法

解説

• 可変フレームレート（VFR）とは？スマホ動画のコマ送りがずれる理由
• タイムコードとドロップフレームの仕組み
• キーフレームと GOP とは？動画のシークが遅い理由
• 1コマは何ミリ秒？フレームレートと時間の関係（30fps ≈ 33ms）

使用しているライブラリ

ライセンスの全文は licenses.txt をご覧ください。Mediabunny のソースコードは GitHub で公開されています。