[javascript] Plyr을 사용하여 동영상 플레이어에 자동 정지 기능 추가하기

27 Nov 2023

Plyr은 HTML5 동영상 플레이어의 강력하고 유연한 대안입니다. 이번에는 Plyr을 사용하여 동영상 플레이어에 자동 정지 기능을 추가하는 방법을 알아보겠습니다.

우선 Plyr을 사용하기 위해서는 Plyr 라이브러리를 프로젝트에 설치해야 합니다. 다음 명령을 사용하여 Plyr을 설치해주세요.

npm install plyr

Plyr을 사용하기 위해 HTML 파일에 Plyr 스타일시트와 스크립트를 추가해야 합니다. 아래의 코드를 HTML 파일의 <head> 태그 안에 추가해주세요.

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

<script src="https://cdn.plyr.io/3.6.4/plyr.polyfilled.js"></script>

이제 Plyr을 사용하여 동영상 플레이어에 자동 정지 기능을 추가할 수 있습니다. Plyr 라이브러리는 plyr 객체를 제공하며, 이 객체를 통해 동영상 플레이어를 조작할 수 있습니다.

<video id="player" src="video.mp4"></video>

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

player.on('play', () => {
  setTimeout(() => {
    player.pause();
  }, 3000); // 3초 후에 자동으로 정지됨
});

위의 코드에서는 play 이벤트가 발생하면 3초 후에 동영상이 자동으로 정지됩니다. setTimeout 함수를 사용하여 3초간 기다린 후 pause 메서드를 호출하면 동영상이 정지됩니다.

이제 Plyr을 사용하여 동영상 플레이어에 자동 정지 기능을 추가하는 방법을 알아보았습니다. Plyr은 다양한 기능과 커스터마이징 옵션을 제공하므로, 동영상 플레이어를 개발할 때 유용하게 활용할 수 있습니다. 자세한 내용은 Plyr 공식 문서를 참조해주세요.