Plyr은 HTML5 동영상 플레이어를 구성할 수 있는 자바스크립트 라이브러리입니다. Plyr을 사용하면 동영상 재생, 일시정지, 음량 조절 등 다양한 동작을 간편하게 구현할 수 있습니다.

하지만 기본적으로 Plyr은 동영상 플레이어에서 썸네일을 제공하지 않습니다. 이번 글에서는 Plyr에 썸네일을 추가하는 방법을 알아보겠습니다.

Plyr 썸네일 추가 방법

1. Plyr 라이브러리와 함께 plyr-thumbnail 플러그인을 다운로드하고 프로젝트에 적용합니다.

2. HTML 파일에 Plyr이 재생할 동영상 요소를 추가합니다.

<video id="player" controls>
  <source src="video.mp4" type="video/mp4">
</video>

1. 자바스크립트 파일에 Plyr을 초기화하고 썸네일을 사용하도록 설정합니다.

const player = new Plyr("#player", {
  plugins: {
    thumbnail: {
      enabled: true,
      src: "thumbnails.vtt",
    },
  },
});

1. 썸네일 이미지를 포함한 VTT 파일을 생성합니다. VTT 파일에는 각 장면의 시간대와 해당 시간대의 썸네일 이미지 URL을 기록합니다.

WEBVTT

00:00:00.000 --> 00:00:05.000
thumbnail-1.jpg

00:00:05.000 --> 00:00:10.000
thumbnail-2.jpg

...

1. VTT 파일의 URL을 src 속성에 설정합니다.

2. 썸네일이 포함된 동영상을 재생하면 Plyr은 VTT 파일에서 썸네일 이미지를 로드하여 동영상 플레이어에 표시합니다.

결론

Plyr과 plyr-thumbnail 플러그인을 사용하면 동영상 플레이어에 썸네일을 간편하게 추가할 수 있습니다. 썸네일은 동영상의 장면을 한눈에 파악할 수 있도록 도와줍니다.

더 많은 Plyr 플러그인들을 사용하여 동영상 플레이어의 기능을 확장할 수 있으니, 필요에 따라 적절한 플러그인을 찾아보세요.