视频循环技能
将任意视频转换为数学上无缝的无限循环。使用前进-后退-淡入淡出技术，消除视频重新播放时令人不适的“跳跃”。
工作原理
- 获取原始视频
- 创建其反向副本
- 在原始视频结尾与反向视频开头之间进行淡入淡出
- 在反向视频结尾与原始视频开头之间进行淡入淡出
- 结果：视频先正向播放，再反向播放，形成完美连续性
前置条件
需要安装 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.5s 淡入淡出（默认）
./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.5s 淡入淡出 = 约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秒） 能平滑具有更多动态运动的视频
- 包含对称或抽象内容的视频循环效果最自然
- 避免使用包含定向运动（如行走、滚动文字）的视频 —— 反向播放时会显得奇怪