[javascript] Plyr을 사용하여 동영상 플레이어에서 화면 전체로 재생하기

27 Nov 2023

javascript

Plyr은 사용하기 쉬운 동영상 플레이어 라이브러리로, HTML5 비디오와 오디오 엘리먼트에 적용할 수 있습니다. 이 라이브러리를 사용하여 동영상 플레이어를 만들고, 화면 전체 모드를 추가하는 방법에 대해 알아보겠습니다.

Plyr 설치

우선 Plyr을 사용하기 위해 CDN 링크를 추가하여 라이브러리를 로드해야 합니다. HTML 문서의 <head> 태그 안에 다음 코드를 추가합니다.

<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>
</head>

동영상 플레이어 생성

Plyr을 사용하여 동영상 플레이어를 생성하려면, 해당 비디오 엘리먼트를 식별하는 CSS 선택자를 사용합니다. 일반적으로는 #player와 같은 ID를 사용합니다.

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

Plyr 초기화

Plyr을 사용할 준비가 되었으므로, JavaScript에서 플레이어를 초기화해야 합니다. 다음 스크립트를 <body> 태그의 끝에 추가하여 Plyr을 초기화합니다.

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

화면 전체 모드 추가

Plyr은 기본적으로 플레이어에 화면 전체 모드 기능을 제공합니다. 문서 상단의 <head> 태그에 plyr.css와 plyr.js를 로드했기 때문에, 화면 전체 모드가 자동으로 활성화됩니다.

프로그래밍적으로 화면 전체 모드를 활성화하는 경우, 다음과 같이 JavaScript를 사용할 수 있습니다.

<script>
  const player = new Plyr('#player', {
    fullscreen: {
      enabled: true,
      fallback: true,
      iosNative: true
    }
  });
</script>

위의 코드에서 enabled 속성은 화면 전체 모드를 활성화할지 여부를 나타내며, fallback 속성은 브라우저에서 네이티브 화면 전체 모드를 지원하지 않는 경우에 대체할 수 있는 방법을 설정합니다. iosNative 속성은 iOS 장치에서 웹 앱에서 전체 화면 모드를 사용할 수 있도록 합니다.

이제 Plyr을 사용하여 동영상 플레이어를 생성하고, 화면 전체로 재생하는 방법을 알게 되었습니다. Plyr의 다양한 기능을 사용하여 사용자 친화적인 동영상 플레이어를 개발할 수 있습니다.

더 자세한 내용은 Plyr 공식 문서를 참조하세요.