비디오 루프 스킬
모든 비디오를 수학적으로 매끄러운 무한 루프로 변환합니다. 정방향-역방향-크로스페이드 기법을 사용하여 비디오가 다시 시작될 때 발생하는 불편한 '점프'를 제거합니다.
작동 방식
- 원본 비디오를 가져옵니다
- 역방향 복사본을 만듭니다
- 원본의 끝을 역방향의 시작으로 크로스페이드합니다
- 역방향의 끝을 원본 시작과 일치하도록 크로스페이드합니다
- 결과: 앞으로 흐르다가 뒤로 흘러 완벽한 연속성을 만드는 비디오
사전 요구 사항
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;
}
사용 시기
- 히어로 배경 - 텍스트/CTA 뒤의 앰비언트 모션
- 제품 쇼케이스 - 회전/부유하는 제품
- 앰비언트 루프 - 디스플레이용 분위기 콘텐츠
- 로딩 상태 - 부드러운 시각적 피드백
팁
- 짧은 크로스페이드 (0.25-0.5초) 는 미묘한 움직임이 있는 비디오에 더 잘 작동합니다
- 긴 크로스페이드 (0.75-1.5초) 는 더 동적인 움직임이 있는 비디오를 부드럽게 만듭니다
- 대칭적이거나 추상적인 콘텐츠가 있는 비디오가 가장 자연스럽게 루프됩니다
- 방향성 움직임(걷기, 스크롤 텍스트)이 있는 비디오는 역방향에서 이상하게 보이므로 피하세요