[javascript] Plyr을 사용한 동영상 반복 재생 구현하기

27 Nov 2023

javascript

소개

Plyr은 HTML5 동영상 플레이어를 쉽게 사용할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이번에는 Plyr을 사용하여 동영상을 반복 재생하는 기능을 구현해보겠습니다.

준비물

HTML 파일
Plyr 라이브러리 (https://github.com/sampotts/plyr)
동영상 파일

설치

Plyr 라이브러리를 다운로드하여 프로젝트 폴더에 저장합니다.
HTML 파일의 <head> 태그 안에 Plyr 라이브러리를 추가합니다.

<head>
  <link rel="stylesheet" type="text/css" href="path/to/plyr.css">
  <script src="path/to/plyr.js"></script>
</head>

구현

Plyr을 초기화합니다.

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

동영상을 로드합니다.

player.source = {
  type: 'video',
  sources: [{
    src: 'path/to/video.mp4',
    type: 'video/mp4'
  }]
};

반복 재생 버튼을 추가합니다.

Plyr.prototype.repeat = function() {
  const player = this;
  const control = Plyr.create('button', {
    className: 'plyr__control',
    textContent: 'Repeat',
    onClick: () => {
      player.loop = true;
    }
  });
  player.controls.insertBefore(control, player.controls.querySelector('.plyr__progress'));
};

player.repeat();

사용

동영상 페이지를 열어 동영상을 재생합니다.
‘Repeat’ 버튼을 클릭하면 동영상이 반복 재생됩니다.

결론

Plyr을 사용하여 동영상 반복 재생 기능을 구현하는 방법에 대해 알아보았습니다. Plyr은 간편한 사용법과 다양한 커스터마이즈 옵션으로 HTML5 동영상 플레이어를 구현할 수 있습니다. 따라서 Plyr을 활용하면 웹 페이지에서 동영상을 보다 쉽고 편리하게 제어할 수 있습니다.

참고 자료

Plyr GitHub 저장소: https://github.com/sampotts/plyr