動画ループスキル
あらゆる動画を数学的にシームレスな無限ループに変換します。前方-後方-クロスフェード技法を使用して、動画再開時の不自然な「ジャンプ」を排除します。
仕組み
- 元の動画を読み込み
- 反転コピーを作成
- 元の動画の終了部分を反転動画の開始部分にクロスフェード
- 反転動画の終了部分を元の動画の開始部分にクロスフェード
- 結果: 前方→後方→前方と流れ、完全な連続性を実現
前提条件
ffmpeg がインストールされている必要があります:
brew install ffmpeg
使用方法
入力動画と出力パスを指定してスクリプトを実行:
./scripts/create-loop.sh input.mp4 output-loop.mp4
オプション
./scripts/create-loop.sh input.mp4 output.mp4 [crossfade_duration]
input.mp4- ソース動画ファイルoutput.mp4- 出力するシームレスループファイルcrossfade_duration- 任意指定、デフォルトは0.5秒（範囲: 0.25〜2.0）
例
# 基本使用法 - 0.5秒クロスフェード（デフォルト）
./scripts/create-loop.sh hero-background.mp4 hero-loop.mp4
# より長いクロスフェードで滑らかな遷移
./scripts/create-loop.sh hero-background.mp4 hero-loop.mp4 1.0
# 短いクロスフェードでテンポの速いコンテンツ向け
./scripts/create-loop.sh product-spin.mp4 product-loop.mp4 0.25
出力
出力動画の長さはおおよそ (2 * 入力時間) - (2 * クロスフェード時間) になります。
例: 6秒の入力 + 0.5秒クロスフェード = 約11秒のシームレスループ
HTML実装
ヒーローセクションでシームレスループを使用:
<video
autoplay
muted
loop
playsinline
class="hero-background"
>
<source src="hero-loop.mp4" type="video/mp4">
</video>
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
使用すべき場面
- ヒーローバックグラウンド - テキスト/CTAの背後にアンビエントな動きを
- プロダクトショーケース - 回転・浮遊する製品
- アンビエントループ - ディスプレイ用の雰囲気コンテンツ
- ローディング状態 - 滑らかな視覚的フィードバック
ヒント
- 短いクロスフェード (0.25〜0.5秒) は動きの少ない動画に適しています
- 長いクロスフェード (0.75〜1.5秒) は動きの多い動画を滑らかにします
- 対称的または抽象的なコンテンツの動画は最も自然にループします
- 方向性のある動き（歩行、スクロールテキスト）のある動画は避けてください - 逆再生すると不自然に見えます