[javascript] Plyr을 사용하여 동영상 플레이어에 호버 상태에서 자막 표시하기

27 Nov 2023

Plyr은 웹 사이트에 동영상 플레이어를 쉽게 추가할 수 있는 JavaScript 라이브러리입니다. Plyr을 사용하면 호버 상태에서 자막을 플레이어에 표시할 수 있습니다.

Plyr 설치하기

Plyr을 사용하기 위해서는 먼저 Plyr 라이브러리를 웹 페이지에 추가해야 합니다. CDN을 통해 Plyr을 가져올 수 있습니다. 웹 페이지의 <head> 태그 내에 다음 코드를 추가하세요.

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

Plyr을 사용하여 동영상 플레이어를 생성하는 방법은 매우 간단합니다. HTML 문서 내에 원하는 위치에 <video> 태그를 추가하세요.

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

다음으로, Plyr을 이용하여 동영상 플레이어를 생성하세요. JavaScript 코드를 <script> 태그 내에 추가하세요.

document.addEventListener('DOMContentLoaded', () => {
  const player = new Plyr('video');
});

동영상 플레이어에 호버 상태에서 자막을 표시하기 위해서는 Plyr 라이브러리의 showControls 옵션을 사용해야 합니다. 이 옵션을 true로 설정하여 플레이어 컨트롤을 표시할 수 있습니다.

document.addEventListener('DOMContentLoaded', () => {
  const player = new Plyr('video', {
    tooltips: {
      controls: true,
    },
  });
});

이제 동영상 플레이어에 마우스를 올리면 자막이 표시됩니다. Plyr은 자막 파일을 자동으로 재생 시간과 동기화하여 표시합니다.

Plyr을 사용하여 동영상 플레이어에 호버 상태에서 자막을 표시하는 방법을 알아보았습니다. Plyr은 간단하게 사용할 수 있는 JavaScript 라이브러리로 다양한 플레이어 기능을 제공합니다. 자세한 내용은 Plyr 공식 문서를 참조하십시오.