影片循環技巧
將任何影片轉換為數學上無縫的無限循環。使用前進-反向-交叉淡出技術，消除影片重新開始時突兀的「跳躍感」。
運作方式
- 取得原始影片
- 建立反向副本
- 將原始結尾交叉淡出至反向開頭
- 將反向結尾交叉淡出以匹配原始開頭
- 結果：影片向前流動，再向後流動，創造完美連續性
先決條件
需要安裝 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;
}
使用時機
- 英雄背景 - 文字/行動呼籲按鈕後方的環境動態
- 產品展示 - 旋轉/漂浮的產品
- 環境循環 - 顯示器上的氛圍內容
- 載入狀態 - 流暢的視覺回饋
提示
- 較短的交叉淡出 (0.25-0.5 秒) 適合動作較細微的影片
- 較長的交叉淡出 (0.75-1.5 秒) 能讓動態較大的影片更平滑
- 具有對稱或抽象內容的影片循環效果最自然
- 避免使用有方向性動作的影片（如走路、滾動文字），這些在反向播放時會顯得不自然