Plyr은 HTML5 동영상 플레이어를 구축할 수 있는 유용한 JavaScript 라이브러리입니다. Plyr을 사용하면 사용자의 동영상 시청 경험을 향상시킬 수 있습니다. 이번 글에서는 Plyr을 사용하여 키보드 단축키를 설정하는 방법에 대해 알아보겠습니다.

Plyr 설치

먼저, Plyr을 사용하기 위해 다음과 같이 HTML 파일에 Plyr 라이브러리를 추가합니다.

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

Plyr 초기화

다음으로, Plyr의 각 동영상 플레이어에 대해 다음과 같이 초기화 코드를 추가해야 합니다.

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

위 코드에서 player는 동영상 플레이어를 가리키는 변수입니다. #player는 Plyr이 작동할 HTML 요소의 ID를 나타냅니다. 이 코드를 사용하면 Plyr은 해당 ID를 가진 요소를 동영상 플레이어로 사용하게 됩니다.

키보드 단축키 설정

Plyr은 기본적으로 몇 가지 키보드 단축키를 제공하지만, 사용자 정의 키보드 단축키를 설정할 수도 있습니다. Plyr은 keyboard 옵션을 통해 키보드 단축키를 사용자 정의할 수 있습니다.

예를 들어, 키보드의 스페이스바를 사용해 동영상을 일시정지하고 재생하는 기능을 추가하려면 keyboard 옵션에 다음과 같이 코드를 추가합니다.

const player = new Plyr("#player", {
  keyboard: {
    global: true,
    focused: true,
    target: document
  }
});

위 코드에서 global: true는 키보드 이벤트를 전역으로 설정한다는 의미입니다. focused: true는 동영상 플레이어가 포커스되어야만 키보드 단축키 입력이 가능하게 됩니다. target: document는 Plyr이 키보드 이벤트를 감지할 요소를 지정합니다.

추가적인 설정

Plyr을 사용하여 키보드 단축키를 설정하는 방법을 알아보았습니다. 이 외에도 Plyr은 많은 설정 옵션을 제공합니다. 더 자세한 내용은 Plyr 공식 문서를 참조하시기 바랍니다.

이제 Plyr을 사용하여 동영상 플레이어를 구축하고 키보드 단축키를 설정할 수 있습니다. Plyr은 사용자 정의가 가능한 플레이어로 동영상 시청 경험을 더욱 향상시킬 수 있습니다.