[javascript] Plyr의 사용 예시 및 데모 사이트

27 Nov 2023

javascript

Plyr은 HTML5 비디오 및 오디오 플레이어를 구축하기 위한 강력한 JavaScript 라이브러리입니다. 이 라이브러리는 사용하기 쉽고 많은 기능을 제공하여 멋진 비디오 및 오디오 플레이어를 만들 수 있습니다.

Plyr 설치하기

Plyr을 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 다음은 npm을 사용하여 Plyr을 설치하는 방법입니다.

npm install plyr

이제 Plyr이 프로젝트에 설치되었으니, HTML 파일에 Plyr을 추가할 준비가 되었습니다.

Plyr 사용 예시

다음은 Plyr을 사용하여 비디오 플레이어를 만드는 간단한 예시입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plyr Example</title>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.3/plyr.css" />
</head>
<body>
    <video controls crossorigin playsinline>
        <source src="path/to/video.mp4" type="video/mp4">
    </video>

    <script src="https://cdn.plyr.io/3.6.3/plyr.js"></script>
    <script>
        const player = new Plyr('video');
    </script>
</body>
</html>

위 예시에서는 Plyr의 CSS 파일과 JavaScript 파일을 네트워크에서 가져와서 사용하였습니다. 비디오 요소를 정의하고, const player = new Plyr('video'); 코드로 Plyr 플레이어를 초기화하고 적용하는 것으로 간단히 비디오 플레이어를 만들 수 있습니다.

Plyr 데모 사이트

Plyr의 데모를 살펴보면 더 많은 기능과 사용 예시를 확인할 수 있습니다. Plyr의 공식 홈페이지인 plyr.io에서 다양한 데모를 제공하고 있습니다. Plyr 데모 사이트에서는 다양한 플레이어 스킨, 컨트롤러, 썸네일 등을 확인할 수 있으며, 각각의 기능들에 대한 코드 예시도 제공됩니다.

또한, Plyr의 GitHub 저장소(https://github.com/sampotts/plyr)에서도 해당 라이브러리의 문서와 예시를 확인할 수 있습니다.