FFmpeg Sprite Sheet와 WebVTT를 활용한 고효율 비디오 프리뷰 구현

Context

비디오 스크러빙 시 마우스 커서를 따라다니는 썸네일 프리뷰 기능 구현 필요. 개별 이미지 요청 시 발생하는 과도한 HTTP 오버헤드와 브라우저 렌더링 부하를 해결하기 위한 효율적인 정적 자산 구조 설계가 핵심 과제임.

Technical Solution

• FFmpeg의 fps, scale, tile 필터를 결합하여 10초 간격의 프레임을 10x10 그리드 형태의 단일 Sprite Sheet로 생성
• 영상 길이에 따른 브라우저의 Max-Canvas Limit(16k-32k px) 초과 문제를 해결하기 위해 1000초 단위로 Sprite Sheet를 분할 생성하는 전략 채택
• WebVTT의 #xywh 프래그먼트 식별자를 활용하여 각 타임라인 구간과 Sprite Sheet 내 특정 좌표(Rectangle)를 매핑하는 인덱스 파일 설계
• ffprobe를 통한 정밀한 영상 길이 추출로 VTT 큐(Cue)와 실제 프레임 간의 Drift 현상을 방지하는 동기화 로직 구현
• -ss 옵션을 입력 파일(-i) 앞에 배치하여 Keyframe-accurate Seek를 통해 전체 디코딩 없이 필요한 구간만 빠르게 추출하는 최적화 적용
• Video.js의 vtt-thumbnails 플러그인을 통해 VTT 파일의 좌표 정보를 기반으로 클라이언트 사이드에서 실시간 Crop 렌더링 수행