[javascript] Plyr을 사용하여 동영상 플레이어의 사이즈 조절하기

27 Nov 2023

Plyr은 HTML5 동영상 플레이어의 유용한 라이브러리 중 하나입니다. 이 라이브러리를 사용하면 동영상 플레이어의 진행 상태를 제어하고 플레이어의 사이즈를 조절하는 등의 다양한 기능을 구현할 수 있습니다.

Plyr 설치하기

Plyr을 사용하기 위해 먼저 다음의 스크립트 태그를 HTML 파일에 추가하고 Plyr 라이브러리를 다운로드 받아야 합니다.

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

Plyr을 사용하여 동영상 플레이어를 생성하기 위해서는 다음과 같이 HTML을 작성해야 합니다.

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

위 코드에서 <video> 엘리먼트의 id를 player로 설정하였습니다. 이 id를 통해 Plyr 라이브러리에서 플레이어를 초기화할 수 있습니다.

플레이어 초기화는 Plyr.setup() 함수를 사용하여 진행할 수 있습니다. 다음 코드를 사용하여 플레이어를 초기화합니다.

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

위 코드에서 Plyr() 생성자 함수의 인자로 플레이어의 id를 전달합니다.

Plyr을 사용하여 플레이어의 사이즈를 조절하기 위해서는 data-plyr-responsive 속성을 사용할 수 있습니다. 이 속성을 부여하면 플레이어가 반응형으로 사이즈를 조절할 수 있습니다.

<video id="player" controls data-plyr-responsive>
    <source src="video.mp4" type="video/mp4">
</video>

위 코드에서 data-plyr-responsive 속성을 추가하였습니다. 이제 플레이어는 부모 엘리먼트의 사이즈에 맞게 자동으로 조절됩니다.

Plyr을 사용하여 동영상 플레이어의 사이즈를 조절하는 방법을 살펴보았습니다. Plyr은 플레이어의 진행 상태를 제어하는 기능 외에도 다양한 기능을 제공하므로, 필요에 따라 문서를 참고하여 다른 기능을 활용할 수도 있습니다.