[VideoJS] 영상 타임라인에 프리뷰를 표시하는 방법

 

유튜브나 트위치에서 SeekBar에 마우스를 가져다대면, 특정 주기마다 영상 프리뷰가 살짝살짝씩 보인다. 

당연히 될거라고 생각했던 기능이지만 이 프리뷰는 (당연히 ㅎㅎ) 손수 만들어주어야한다.

 

과정은 다음과 같다.

 

1. 영상을 특정 Interval 마다 잘라서 썸네일을 만든다.

2. 만들어진 썸네일을 한 장의 Sprite 이미지로 만든다.

3. VideoJS에 videojs-sprite-thumbnails Plugin을 적용해서 Sprite를 영상에 설정해준다.

 

나는 ts파일이 이미 10초 단위로 쪼개져있었기 때문에 폴더안의 모든 파일을 돌면서 한 장씩 썸네일을 만들어주었다.

ffmpeg -i <원본영상> -s 160x90 -vframes 1 <썸네일>.jpg

 

 

노가다는 컴퓨터가 하는거지

 

그리고 만들어진 사진들을 imagemagick의 montage를 이용해 붙여주면된다.

montage *.jpg -background transparent -geometry +0+0 sprite.jpg

만들어진 sprite 이미지

 

이제 VideoJS 플러그인인 videojs-sprite-thumbnails 플러그인을 적용 시켜주면된다.

url에 Sprite 이미지 경로를 설정하고, 한 장의 썸네일의 크기, 썸네일간 시간 간격을 설정해주면 적용할 수 있다.

<script src="https://unpkg.com/videojs-sprite-thumbnails@2.1.1/dist/videojs-sprite-thumbnails.min.js"></script>
<script>
const player = videojs(video, {
    plugins: {
        spriteThumbnails: {
            url: `/static/${hash}/thumbnail/sprite.jpg`,
            width: 160,
            height: 90,
            interval: 10,
        }
    }
});
</script>