[javascript] Plyr을 사용하여 동영상에 애니메이션 효과 추가하기

27 Nov 2023

이번에는 Plyr을 사용하여 동영상에 애니메이션 효과를 추가하는 방법을 알아보겠습니다. Plyr은 HTML5 비디오 플레이어이며, 다양한 플레이어 컨트롤 및 맞춤 설정 기능을 제공합니다.

Plyr 설치하기

먼저, Plyr을 설치해야 합니다. 아래의 npm 명령어를 사용하여 Plyr을 설치할 수 있습니다:

npm install plyr

또는, CDN을 통해 Plyr을 추가할 수도 있습니다:

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>

동영상을 추가하기 위해 Plyr 플레이어를 구성해야 합니다. HTML 구조를 아래와 같이 설정합니다:

<div class="plyr__video-embed">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>

위의 코드에서 VIDEO_ID 부분에는 동영상의 ID를 넣어주어야 합니다.

Plyr을 초기화하여 동영상에 애니메이션 효과를 추가할 수 있습니다. Plyr 객체를 생성하고, Plyr 플레이어를 초기화하는 코드는 다음과 같습니다:

const player = new Plyr('.plyr__video-embed');

위의 코드에서 .plyr__video-embed는 앞서 설정한 HTML 구조의 클래스 이름입니다.

Plyr을 사용하여 동영상에 애니메이션 효과를 추가하는 방법은 다양합니다. 예를 들어, 동영상이 재생될 때 fade-in 애니메이션 효과를 추가하고 싶다면, 다음과 같이 CSS를 사용할 수 있습니다:

.plyr__video-embed iframe {
  opacity: 0;
  transition: opacity 0.5s;
}

.plyr--playing .plyr__video-embed iframe {
  opacity: 1;
}

위의 CSS 코드에서는 동영상이 재생될 때 .plyr__video-embed 클래스 아래의 iframe 요소에 fade-in 애니메이션 효과를 적용하고 있습니다.

이렇게 Plyr을 사용하여 동영상에 애니메이션 효과를 추가할 수 있습니다. Plyr은 다양한 커스터마이징 기능을 제공하므로, 필요에 따라 추가적인 애니메이션 효과나 기능을 구현할 수도 있습니다. Plyr 공식 문서를 참고하여 더 많은 정보를 얻을 수도 있습니다.