[javascript] Plyr을 사용하여 동영상 재생 시간 표시하기

27 Nov 2023

javascript

Plyr은 HTML5 기반 동영상 플레이어 라이브러리로, 사용자 친화적인 인터페이스와 다양한 기능을 제공합니다. 이번에는 Plyr을 사용하여 동영상 재생 시간을 표시하는 방법에 대해 알아보겠습니다.

Plyr 라이브러리 가져오기

먼저, Plyr 라이브러리를 프로젝트에 추가해야 합니다. Plyr은 CDN을 통해 쉽게 가져올 수 있습니다. 다음 코드를 HTML 파일의 <head> 태그 안에 추가해주세요.

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

동영상 플레이어 생성하기

다음으로, 동영상 플레이어를 생성해야 합니다. Plyr은 <video> 태그를 사용하여 동영상을 플레이할 수 있습니다. 아래 HTML 코드를 사용하여 동영상 플레이어를 생성합니다.

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

Plyr 초기화하기

동영상 플레이어를 생성한 후에는 Plyr을 초기화해야 합니다. Plyr 초기화를 위해 JavaScript 코드를 작성합니다. <script> 태그 안에 다음 코드를 추가해주세요.

const player = new Plyr("#player");

player.on("timeupdate", event => {
  const currentTime = event.detail.plyr.currentTime;

  // 현재 시간을 표시하고 싶은 HTML 엘리먼트를 선택합니다.
  const timeDisplay = document.getElementById("current-time");
  timeDisplay.innerText = formatTime(currentTime);
});

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`;
}

재생 시간 표시하기

위의 JavaScript 코드에서 timeupdate 이벤트를 이용하여 현재 재생 시간이 변경될 때마다 해당 시간을 표시합니다. timeupdate 이벤트 핸들러에서는 Plyr에서 제공하는 currentTime 속성을 이용하여 현재 재생 시간을 가져옵니다.

또한, formatTime() 함수를 사용하여 시간을 “분:초” 형식으로 변환합니다. 이 함수는 받은 초를 분과 초로 분리하여 형식에 맞게 변환한 후 반환합니다.

시간을 표시하고 싶은 HTML 엘리먼트의 id 값을 "current-time"로 설정하고, 해당 엘리먼트를 getElementById() 메서드를 이용하여 선택합니다. 선택한 엘리먼트의 innerText 속성에 현재 시간을 설정하여 표시합니다.

Current Time: <span id="current-time"></span>

위와 같이 <span> 태그를 사용하여 현재 시간을 표시하고 싶은 곳에 해당 ID를 붙여주세요.

이제 동영상을 실행하고 플레이어 상단에 현재 재생 시간이 표시됩니다.

결론

Plyr을 사용하여 동영상 재생 시간을 표시하는 방법에 대해 알아보았습니다. Plyr은 사용이 간편하고 다양한 기능을 제공하기 때문에 HTML5 동영상 플레이어를 구현할 때 유용하게 사용될 수 있습니다.

더 자세한 정보를 원하신다면, Plyr 공식 문서를 참고해주세요 (링크)