Windowsで
動画を分解し
軽量再構築
FFmpegを使用して、Webサイトの背景などに最適なAV1形式（WebM）の動画を作成するためのインタラクティブガイドです。
設定を選んでコマンドをコピーし、ターミナルに貼り付けるだけで完了します。
SCROLL
動画から静止画、制御まで。
統合メディア・ワークフロー
映像を分解し、最高の効率で再構築する。動画フォールバックとしての静止画最適化、 そして低速回線ユーザーを守るJavaScript制御までを網羅します。
1
動画を静止画に分解する
再構築のマスター素材とするならPNG、確認用や軽量なフォールバック用ならJPGを選びます。
ストレージ負荷（1000枚想定）
Terminal Command
ffmpeg -i input.mp4 frame_%04d.jpg 2
PNG連番 → AV1 が「最強」な理由
世代劣化を回避する
通常の「MP4→MP4」のフローでは、各段階で圧縮ノイズが重なり、画質が壊れます。 「PNG連番（無劣化）→ AV1」なら、壊れるのは最後の1回だけ。 この「元素材のシャープさ」が、AV1の圧縮アルゴリズムを最大効率で引き出します。
✨ 1回限りの圧縮
🧬 AI動画と高相性
画質維持率のシミュレーション
3
統合再構築ジェネレーター
パラメーター設定
FPS 30 FPS
CRF (品質) 28
Windows 実行コマンド
…
4
静止画最適化とフォールバック
📊 形式別比較
| 形式 | 軽さ | 互換性 | おすすめ用途 |
|---|---|---|---|
| AVIF | 最軽量 | 新しめ | ファーストビュー背景、動画フォールバック |
| WebP | 良好 | 広い | 汎用、記事内画像、AVIFの次点 |
| JPEG | 重め | 最強 | 最後の保険 |
HTML三段フォールバック
<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt=""> </picture>
FFmpegでWebPを作る
ffmpeg -i in.png -c:v libwebp -q:v 70 out.webp
5
低速回線・データ節約設定の制御
接続状況による動的停止
ユーザーが「データ節約モード」をオンにしている場合、または3G以下の低速回線の場合にビデオを停止し、静止画に切り替えるスクリプトです。
重要: Safari（iOS）は
navigator.connection をサポートしていません。その場合、ビデオの error や stalled イベントでフォールバックさせます。推奨スクリプト
<script> (function () { const video = document.querySelector('.wp-block-cover__video-background'); if (!video) return; let disable = false; const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; if (connection) { if (connection.saveData) disable = true; if (connection.effectiveType && ['slow-2g','2g','3g'].includes(connection.effectiveType)) { disable = true; } } const disableVideo = () => { video.pause(); video.style.display = 'none'; }; if (disable) { disableVideo(); return; } video.addEventListener('error', disableVideo); video.addEventListener('stalled', disableVideo); })(); </script> ⚠️
よくある落とし穴と対策
Safariで動画が出ない
AV1（WebM）単独ではSafari非対応です。必ずMP4をsourceの下の方に記述して用意してください。
poster属性を忘れる
ビデオ停止時に表示される画像(poster)は、回線が細い環境で黒画面になるのを防ぐために必須です。
Windowsでの改行エラー
Mac用の \ を使うと構文エラーになります。CMDなら ^、PSなら “ ` “ を使ってください。