[javascript] Plyr에서 사용 가능한 컨트롤러 및 기능들

27 Nov 2023

javascript

Plyr은 HTML5 비디오 및 오디오 플레이어의 사용을 쉽게 만들어주는 JavaScript 라이브러리입니다. Plyr은 다양한 컨트롤러와 기능을 제공하여 사용자 정의 가능한 멋진 비디오 및 오디오 플레이어를 만들 수 있습니다.

컨트롤러

Plyr에는 다음과 같은 기본 컨트롤러가 제공됩니다:

재생/일시정지 버튼
탐색 바 (재생 위치를 조정하는 데 사용)
볼륨 컨트롤
전체화면 모드 전환 버튼
속도 조절 버튼 (재생 속도 변경 가능)

기본 컨트롤러는 Plyr을 사용할 때 자동으로 생성되며, 사용자가 추가 크기 및 스타일을 적용할 수 있습니다.

기능

Plyr에는 다음과 같은 추가 기능이 있습니다:

자막

Plyr은 비디오 플레이어에 자막을 쉽게 추가할 수 있습니다. 다양한 자막 포맷을 지원하며, 자막 파일을 Plyr에 로드하여 플레이어에 표시할 수 있습니다.

const player = new Plyr('#video-element', {
  captions: {
    active: true,
    language: 'en'
  }
});

플레이어에 로고 추가

Plyr은 플레이어에 로고를 쉽게 추가할 수 있는 기능도 제공합니다. 플레이어에 로고 이미지를 설정하고, 클릭 이벤트 등 사용자 정의 동작을 구현할 수 있습니다.

const player = new Plyr('#video-element', {
  controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
  logo: {
    imageUrl: 'path/to/logo.png',
    clickUrl: 'https://example.com'
  }
});

플레이어 스킨

Plyr은 CSS 스타일을 사용하여 플레이어의 모양과 느낌을 완전히 사용자 정의할 수 있습니다. 플레이어 요소의 클래스를 사용하여 다양한 스타일을 적용할 수 있습니다.

.plyr {
  /* 사용자 정의 스타일 적용 */
}

이 외에도 Plyr은 다양한 기능과 옵션을 제공하며, 자세한 내용은 Plyr 공식 문서를 참조하시기 바랍니다.

참고 자료: