diffm-web

動画を比べるための Web ツールです。ブラウザだけで動き、動画はどこにも送信されません。

• 2つを比較: 2本の動画を比べて、どこがどれだけ違うかをグラフにします。エンコード設定を変えたときの画質劣化や、編集で意図せず変わった箇所を見つけるのに使えます。音声も同時に比べて、グラフにして、聴き比べもできます。音声だけのファイル（mp3 / wav / flac / m4a など）も入れられます
• 複数を並べて再生: 複数の動画を、横並び / 縦並びで、1本の共通タイムラインで同時に再生します

どうして作ったの？

昔作ったPythonの diffm をWebで手軽に使えるようにしたものです

• 動画のバージョニングをしているため、プロジェクトの書き出し後に、変更点が知りたかった
• 稀にプロジェクトの一部が壊れるので、破壊されたシーンを検知したかった
• AviUtl で差分比較するのが面倒だった
• グラフ化して、定量的に差分比較したかった

「どこ編集したっけ……」ってなりがちだったので、かんたんに差分比較できたらいいなと思い

使い方

2つを比較

1. A（基準）と B（比較対象）の枠に、動画をドロップするか、クリックして選びます（音声だけのファイルも入れられます）
2. 「解析開始」を押します。映像は 1 フレームずつ、音声は 1/30 秒ごとに比べます
3. 映像のグラフを押すと、そのフレームを A / B / 差分で見られます。押したまま動かすと、フレームが追従します
4. 音声のグラフで、波形の差・音量・周波数ごとの音量の差を見ます。「聴く」（Space）で、A / B / 差を聴き比べられます
5. 必要なら、画像（ZIP）や CSV で保存します

詳しくは、映像の比べ方と、音声の差にあります。

複数を並べて再生

1. 動画をドロップします（複数まとめて入れられます）
2. 右上で、並べ方（自動 / 横並び / 縦並び）を選びます
3. 下の再生バーで、全動画をまとめて操作します

詳しくは、並べて再生にあります。

2つのタブの関係

動画を入れた側が「いまの作業」になり、もう一方のタブは初期状態に戻ります（「2つを比較」で A / B を入れると、並べて再生は、いまの A と B だけになります）。

キー操作

2つを比較

キー	動作
← / →	前 / 次のフレーム（Shift で 10 フレーム。結果が出た後）
Home / End	最初 / 最後のフレーム（結果が出た後）
Esc	比較を止める（比較中）
Space	音声を聴く / 止める（音声の分析が終わった後）

複数を並べて再生

キー	動作
Space	再生 / 一時停止
← / →	1 コマ戻る / 進む（Shift で 5 秒）
Home / End	先頭 / 末尾
M	すべてミュート

動作環境と制約

• WebCodecs が使えるモダンブラウザが必要です。デコードできるコーデックはブラウザ次第（H.264 / VP9 / AV1 など）で、読めない動画は、読み込み時にエラーになります
• 解像度は、1 辺 4096px までです（4K UHD / DCI 4K を含む）。超えると、読み込み時に断ります

速さの目安は、docs/performance.md にあります。

開発

開発環境、ソースの構成、公開の手順は、docs/development.md にあります。

ライセンス表記

公開物には mediabunny 1.62.1 を含みます。

• ライセンス: MPL-2.0
• ソースコード: https://github.com/Vanilagy/mediabunny/tree/f630141a4ac2936d00af14bf8ff2c5bb62b66150（1.62.1 の公開元コミット）
• ビルドした JS の先頭と、mediabunny を使う「2つを比較」タブの画面の下部に、同じ表記を出しています（「複数を並べて再生」は <video> を使うので出しません）