[javascript] Plyr 설치 및 설정 방법

27 Nov 2023

javascript

Plyr은 HTML5 동영상 플레이어로, 웹 사이트에 동영상을 쉽게 삽입할 수 있도록 도와줍니다. 이 글에서는 Plyr을 설치하고 설정하는 방법을 다루겠습니다.

1. Plyr 다운로드

Plyr을 사용하기 위해 먼저 필요한 파일을 다운로드해야 합니다. Plyr은 CDN을 통해 제공되기 때문에, 웹 페이지에 직접 링크를 걸어서 다운로드할 수 있습니다. 아래의 코드를 <head> 태그 안에 추가해주세요.

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

2. Plyr 사용하기

Plyr을 사용하기 위해서는 동영상 요소를 준비해야 합니다. <video> 태그를 사용하여 동영상을 추가할 수 있습니다. 아래의 코드는 Plyr을 사용하여 동영상을 재생하는 간단한 예제입니다.

<video controls crossorigin playsinline>
  <source src="video.mp4" type="video/mp4" />
</video>

<script>
  const player = new Plyr('video');
</script>

위의 코드에서는 Plyr 객체를 생성하고, ‘video’를 인자로 전달하여 동영상 요소를 Plyr 플레이어로 변환합니다.

3. Plyr 커스터마이징하기

Plyr은 다양한 옵션을 제공하여 플레이어를 커스터마이징할 수 있습니다. 예를 들어, 플레이어의 색상을 변경하거나, 로고를 추가할 수 있습니다.

<video controls crossorigin playsinline>
  <source src="video.mp4" type="video/mp4" />
</video>

<script>
  const player = new Plyr('video', {
    controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
    settings: ['quality', 'speed', 'loop'],
    autoplay: true,
    iconUrl: 'custom-icons.svg',
    seekTime: 10
  });
</script>

위의 코드에서는 Plyr 객체를 생성할 때 옵션을 설정하고 플레이어를 커스터마이징하였습니다. 이제 플레이어가 생성되었을 때 원하는 기능과 스타일을 적용할 수 있습니다.

결론

이제 Plyr을 사용하여 웹 사이트에 동영상을 쉽게 삽입하고 커스터마이징하는 방법을 배웠습니다. Plyr의 다양한 기능과 옵션을 활용하여 멋진 동영상 플레이어를 구현해보세요!

참고 링크: