영상 미리보기 썸네일 VTT 만들기

직접 운영하는 사이트의 영상 재생기(Video.js, Plyr, Vidstack 등)에 재생 막대 미리보기를 붙이려는 개발자를 위한 도구예요.

파일은 서버로 전송되지 않고 내 기기에서만 처리돼요

동영상을 놓거나 눌러서 고르세요MP4 · MOV · WEBM · MKV

재생 막대 위 장면 미리보기 파일

유튜브처럼 재생 막대에 마우스를 올리면 그 시점 장면이 작게 뜨는 기능은, 보통 영상의 장면들을 일정 간격으로 찍어 한 장에 모은 그림(스프라이트 시트)과 ‘몇 초부터 몇 초까지는 그림의 이 위치’라고 적은 WebVTT 파일로 만들어요. 동영상을 넣고 ‘썸네일 만들기’를 누르면 두 파일을 만들고, 아래 막대를 움직여 실제로 어떻게 보이는지 확인할 수 있어요.

VTT 파일 모양

각 항목은 시작 --> 끝 시간과 그림 주소로 되어 있고, 주소 끝의 #xywh=x,y,너비,높이는 스프라이트 그림 안에서 잘라 쓸 위치(미디어 프래그먼트 규격의 공간 부분)예요. 예를 들어 thumbs.jpg#xywh=320,0,160,90은 왼쪽에서 320px, 위에서 0px 떨어진 160×90 부분이에요. 사이트에서 그림을 다른 폴더에 둔다면 ‘그림 주소 앞부분’에 /media/thumbs/처럼 적어 두세요.

설정 고르기

간격 — 짧을수록 정확하지만 그림이 커져요. 10분 영상은 5초, 1시간 영상은 10~30초 간격이 흔해요. ‘자동’은 100장 안팎이 되게 정해요.
장면 크기 — 대부분의 재생기는 160px 안팎을 써요. 세로 크기는 영상 비율에 맞춰 정해져요.
한 장에 담을 수 — 한 그림이 너무 크면 휴대전화에서 늦게 뜨니 100장 정도씩 나눠 thumbs-1.jpg, thumbs-2.jpg …로 만들어요.

재생기에 붙이기

Video.js(videojs-vtt-thumbnails 플러그인), Plyr(previewThumbnails 옵션), Vidstack·Media Chrome 등은 이 VTT 형식을 그대로 읽어요. 자세한 설정은 쓰는 재생기의 문서를 확인하세요. 각 장면은 그 구간의 시작보다 조금 뒤(최대 0.5초) 장면을 찍어서 장면 전환 직전의 검은 화면이 덜 나와요.

참고한 자료

자주 묻는 질문

영상 장면을 원본 크기 그림으로 저장하고 싶어요.

동영상 장면 캡처를 쓰면 원본 해상도 PNG·JPG로 저장해요.

휴대전화로 찍은 세로 영상도 되나요?

네. 회전 정보를 반영한 화면 기준으로 장면을 찍어요.

파일이 서버로 올라가나요?

아니요. 이 기기 브라우저 안에서만 처리해요.

재생 막대 미리보기