plyr

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #golang #go #machine-learning #rust #docker #cli #kubernetes #awesome-list #vue #ios #open-source

(★ 29,961)

간단한 HTML5, YouTube, Vimeo 플레이어

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug.md
  - feature.md
  - improvement.md
- FUNDING.yml
- issue_template.md
- pull_request_template.md
- extensions.json
- launch.json
- settings.json
- - View_From_A_Blue_Moon_Trailer-HD.en.vtt
  - View_From_A_Blue_Moon_Trailer-HD.fr.vtt
  - View_From_A_Blue_Moon_Trailer-HD.jpg
- error.html
- index.html
- package.json
- pnpm-lock.yaml
- - captions.js
  - console.js
  - controls.js
  - fullscreen.js
  - html5.js
  - listeners.js
  - media.js
  - plyr.d.ts
  - plyr.js
  - plyr.polyfilled.js
  - source.js
  - storage.js
  - support.js
  - ui.js
- - base.scss
  - plyr.scss
- - plyr-airplay.svg
  - plyr-captions-off.svg
  - plyr-captions-on.svg
  - plyr-download.svg
  - plyr-enter-fullscreen.svg
  - plyr-exit-fullscreen.svg
  - plyr-fast-forward.svg
  - plyr-logo-vimeo.svg
  - plyr-logo-youtube.svg
  - plyr-muted.svg
  - plyr-pause.svg
  - plyr-pip.svg
  - plyr-play.svg
  - plyr-restart.svg
  - plyr-rewind.svg
  - plyr-settings.svg
  - plyr-volume.svg
- - publish.js
- build.js
- deploy.js
.editorconfig
.gitignore
.gitpod.yml
.node-version
.npmignore
.prettierrc
.stickler.yml
.stylelintrc.json
build.json
CHANGELOG.md
CONTRIBUTING.md
CONTROLS.md
cspell.json
deploy.json
eslint.config.mjs
gulpfile.js
LICENSE.md
package.json
plyr.code-workspace
pnpm-lock.yaml
README.md

🚀 설치 가이드

1. 코드 내려받기

git clone https://github.com/sampotts/plyr

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd plyr

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

cd demo

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Plyr는 [\_modern\_](#browser-support) 브라우저를 지원하는 가볍고 접근성 좋으며 커스텀 가능한 HTML5, YouTube, Vimeo 미디어 플레이어입니다.
[데모 보기](https://plyr.io) - [후원하기](#donate) - [Slack](https://bit.ly/plyr--chat) - [비디오 호스팅](https://mux.com?ref=plyr-github)
[![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/sampotts/plyr) [![Financial Contributors on Open Collective](https://opencollective.com/plyr/all/badge.svg?label=financial+contributors)](https://opencollective.com/plyr)
[![Screenshot of Plyr](https://cdn.plyr.io/static/screenshot.webp)](https://plyr.io)
# 기능
- 📼 \*\*HTML 비디오 및 오디오, YouTube 및 Vimeo\*\* - 주요 포맷 지원
- 💪 \*\*접근성\*\* - VTT 자막 및 스크린 리더 완전 지원
- 🔧 \*\*[커스텀 가능](#html)\*\* - 원하는 마크업으로 원하는 외관의 플레이어 제작 가능
- 😎 \*\*깔끔한 HTML\*\* - 올바른 요소를 사용합니다. 볼륨용 및 진행률용 등 버튼용 요소들을 사용합니다. 불필요한
`` 또는 `[` 버튼 헛수고가 없습니다.
- 📱 \*\*반응형\*\* - 모든 화면 크기에서 작동
- 💵 \*\*[수익화](#ads)\*\* - 동영상으로 수익 창출
- 📹 \*\*[스트리밍](#demos)\*\* - hls.js, Shaka 및 dash.js 스트리밍 재생 지원
- 🎛 \*\*[API](#api)\*\* - 표준화된 API를 통해 재생, 볼륨, 탐색 등을 제어
- 🎤 \*\*[이벤트](#events)\*\* - Vimeo 및 YouTube API로 번거롭게 작업할 필요 없이, 모든 이벤트가 포맷 간에 표준화됨
- 🔎 \*\*[전체 화면](#fullscreen)\*\* - 네이티브 전체 화면 지원 및 "전체 창" 모드 폴백 지원
- ⌨️ \*\*[단축키](#shortcuts)\*\* - 키보드 단축키 지원
- 🖥 \*\*화면 속 화면 (Picture-in-Picture)\*\* - 화면 속 화면 모드 지원
- 📱 \*\*Playsinline\*\* - `playsinline` 속성 지원
- 🏎 \*\*속도 조절\*\* - 실시간 속도 조절
- 📖 \*\*다중 자막\*\* - 여러 자막 트랙 지원
- 🌎 \*\*i18n 지원\*\* - 컨트롤 국제화 지원
- 👌 \*\*[미리보기 썸네일](#preview-thumbnails)\*\* - 미리보기 썸네일 표시 지원
- 🤟 \*\*프레임워크 없음\*\* - 순수 ES6 JavaScript로 작성되었으며 jQuery가 필요 없음
- 💁‍♀️ \*\*Sass\*\* - 빌드 프로세스에 포함 가능
## 데모
최소한의 템플릿을 사용하여 Codepen에서 Plyr를 테스트할 수 있습니다: [HTML5 video](https://codepen.io/pen?template=bKeqpr), [HTML5 audio](https://codepen.io/pen?template=rKLywR), [YouTube](https://codepen.io/pen?template=GGqbbJ), [Vimeo](https://codepen.io/pen?template=bKeXNq). 스트리밍의 경우 다음 라이브러리와의 통합 예제도 제공합니다: [Dash.js](https://codepen.io/pen?template=GRoogML), [Hls.js](https://codepen.io/pen?template=oyLKQb), [Shaka Player](https://codepen.io/pen?template=ZRpzZO)
# 빠른 시작
## HTML
Plyr는 표준 [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) 마크업을 확장하므로 해당 타입에는 그것만 있으면 됩니다.
### HTML5 비디오
```html
[

](/path/to/video.mp4)
```
\*\*참고\*\*: 포스터 이미지는 `data-poster`를 사용하여 지정해야 합니다. 이는 이미지가 [두 번 다운로드되는 것](https://github.com/sampotts/plyr/issues/1531)을 방지하기 위함입니다. 이미지가 캐시될 것이 확실한 경우, 진정한 점진적 향상을 위해 기존 `poster` 속성을 계속 사용할 수 있습니다.
### HTML5 오디오
```html

```
YouTube 및 Vimeo 플레이어의 경우, Plyr은 점진적 향상을 사용하여 기본 `
```
\_참고\_: `plyr\_\_video-embed` 클래스 이름은 플레이어를 반응형 16:9(가장 흔함) iframe 임베드로 만들어 줍니다. Plyr 자체가 실행되면 사용자 정의 `ratio` 설정 옵션이 사용됩니다.
또는 점진적 향상이 적용되지 않는 `

` 방식을 사용할 수 있습니다:
```html```
\_참고\_: `data-plyr-embed-id`는 미디어의 비디오 ID 또는 URL일 수 있습니다.
### Vimeo
위의 YouTube와 거의 동일합니다.
```html```
또는 `

` non progressively enhanced method:
```html```
## JavaScript
다음과 같이 Plyr를 ES6 모듈로 사용할 수 있습니다:
```js
import Plyr from 'plyr';
const player = new Plyr('#player');
```
또는 닫는 `` 태그 앞에 `plyr.js` 스크립트를 포함한 후, 아래와 같이 JS에서 Plyr의 새 인스턴스를 생성할 수 있습니다.
```html
```
고급 설정에 대한 자세한 내용은 [initialising](#initializing)을 참조하세요.
JavaScript용으로 당사의 CDN([Cloudflare](https://www.cloudflare.com/) 제공)을 사용할 수 있습니다. 버전은 2가지가 있습니다. [polyfills](#polyfills)가 포함된 버전과 포함되지 않은 버전입니다. 애플리케이션의 일부로 폴리필을 별도로 관리하는 것을 권장하지만, 편의를 위해 폴리필이 포함된 빌드를 사용할 수도 있습니다.
```html
```
...또는...
```html
```
## CSS
`` 안에 `plyr.css` 스타일시트를 포함하세요.
```html
```
기본 CSS에 당사의 CDN([Cloudflare](https://www.cloudflare.com/) 제공)을 사용하려면 다음을 사용할 수 있습니다:
```html
```
## SVG Sprite
SVG 스프라이트는 당사 CDN([Cloudflare](https://www.cloudflare.com/) 제공)에서 자동으로 로드됩니다. 이를 변경하려면 아래의 [options](#options)을 참조하세요. 참고로 CDN에서 호스팅되는 SVG 스프라이트는 `https://cdn.plyr.io/3.8.4/plyr.svg`에서 확인할 수 있습니다.
### 자체 호스팅 (Self hosting)
npm 모듈로 Plyr를 포함하기 위한 빌드 시스템을 만들고 싶지 않다면, 사전 빌드된 파일을 사용할 수 있습니다. 몇 가지 옵션이 있습니다:
- 위의 CDN 링크에서 이미 최소화(minified)된 파일을 다운로드합니다.
- [unpkg](https://unpkg.com/browse/plyr/dist/) 또는 유사한 서비스에서 파일을 다운로드합니다.
- `npm i && npm run build`를 사용하여 직접 프로젝트를 빌드합니다. 이 명령어는 의존성을 설치하고 `dist` 디렉토리에 빌드 결과물을 생성합니다.
# Ads
Plyr는 동영상 수익화 옵션을 제공하기 위해 [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio)와 제휴했습니다. 설정은 간단합니다:
- [vi.ai 계정 가입하기](https://vi.ai/publisher-video-monetization/?aid=plyrio)
- 코드 스니펫에서 퍼블리셔 ID를 가져옵니다.
- [config options](#options)에서 광고를 활성화하고 퍼블리셔 ID를 입력합니다.
광고와 관련된 모든 질문은 vi.ai로 직접 문의할 수 있으며, 렌더링과 관련된 문제는 GitHub 이슈를 통해 제기할 수 있습니다.
Vi를 사용하고 싶지 않다면, 고유한 `ads.tagUrl` [option](#options)을 설정할 수 있습니다.
# Advanced
## Customizing the CSS
플레이어 렌더링에 사용되는 디자인 토큰을 변경하고 싶다면 [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using\_CSS\_custom\_properties)를 사용하여 변경할 수 있습니다.
다음은 속성 목록과 그 용도입니다:
| Name | Description | Default / Fallback |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `--plyr-color-main` | 기본 UI 색상입니다. | ![#f03c15](https://place-hold.it/15/00b3ff/000000?text=+) `#00b3ff` |
| `--plyr-video-background` | 알파 채널 동영상 및 포스터 이미지를 사용할 때의 동영상 및 포스터 래퍼의 배경색입니다. | `rgba(0, 0, 0, 1)` |
| `--plyr-focus-visible-color` | 요소가 `:focus-visible` (키보드 포커스) 상태일 때 포커스 스타일에 사용되는 색상입니다. | `--plyr-color-main` |
| `--plyr-badge-background` | 메뉴 내 배지의 배경색입니다. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-badge-text-color` | 배지의 텍스트 색상입니다. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-badge-border-radius` | 배지에 사용되는 테두리 둥글기(border radius)입니다. | `2px` |
| `--plyr-captions-background` | 자막 배경의 색상입니다. | `rgba(0, 0, 0, 0.8)` |
| `--plyr-captions-text-color` | 자막 텍스트에 사용되는 색상입니다. | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-control-icon-size` | 컨트롤에 사용되는 아이콘의 크기입니다. | `18px` |
| `--plyr-control-spacing` | 컨트롤 사이의 간격입니다 (때로는 다음 용도로 사용됨) |

--plyr-video-range-track-background` | 스러버/진행 바의 배경입니다. | `--plyr-video-progress-buffered-background` |
| `--plyr-video-range-thumb-active-shadow-color` | 비디오 스러버 핸들/썸이 `:active`(눌린 상태)일 때의 그림자 색상입니다. | `rgba(255, 255, 255, 0.5)` |
| `--plyr-audio-range-track-background` | 스러버/진행 바의 배경입니다. | `--plyr-video-progress-buffered-background` |
| `--plyr-audio-range-thumb-active-shadow-color` | 오디오 스러버 핸들/썸이 `:active`(눌린 상태)일 때의 그림자 색상입니다. | `rgba(215, 26, 18, 0.1)` |
| `--plyr-tooltip-background` | 툴팁의 배경색입니다. | `rgba(255, 255, 255, 0.9)` |
| `--plyr-tooltip-color` | 툴팁의 텍스트 색상입니다. | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-tooltip-padding` | 툴팁의 패딩입니다. | `calc(var(--plyr-control-spacing) / 2))` |
| `--plyr-tooltip-arrow-size` | 툴팁 아래 화살표의 크기입니다. | `4px` |
| `--plyr-tooltip-radius` | 툴팁의 테두리 둥글기입니다. | `3px` |
| `--plyr-tooltip-shadow` | 툴팁의 그림자입니다. | `0 1px 2px rgba(0, 0, 0, 0.15)` |
| `--plyr-font-family` | 플레이어에서 사용되는 폰트 패밀리입니다. | |
| `--plyr-font-size-base` | 기본 폰트 크기입니다. 주로 자막에 사용됩니다. | `15px` |
| `--plyr-font-size-small` | 작은 폰트 크기입니다. 주로 자막에 사용됩니다. | `13px` |
| `--plyr-font-size-large` | 큰 폰트 크기입니다. 주로 자막에 사용됩니다. | `18px` |
| `--plyr-font-size-xlarge` | 더 큰 폰트 크기입니다. 주로 자막에 사용됩니다. | `21px` |
| `--plyr-font-size-time` | 시간 표시의 폰트 크기입니다. | `--plyr-font-size-small` |
| `--plyr-font-size-menu` | 메뉴에서 사용되는 폰트 크기입니다. | `--plyr-font-size-small` |
| `--plyr-font-size-badge` | 뱃지에서 사용되는 폰트 크기입니다. | `9px` |
| `--plyr-font-weight-regular` | 일반 폰트 두께입니다. | `400` |
| `--plyr-font-weight-bold` | 볼드 폰트 두께입니다. | `600` |
| `--plyr-line-height` | 플레이어 내에서 사용되는 줄 높이입니다. | `1.7` |
| `--plyr-font-smoothing` | 플레이어 내에서 폰트 안티앨리어싱을 활성화할지 여부입니다. | `false` |
모든 플레이어에 대해 CSS에서 다음과 같이 설정할 수 있습니다:
```css
:root {
--plyr-color-main: #1ac266;
}
```
...또는 특정 클래스 이름에 대해 설정할 수 있습니다:
```css
.player {
--plyr-color-main: #1ac266;
}
```
...또는 HTML에서 설정할 수 있습니다:
```html
...
```
### Sass
`/src/sass`에 포함된 `plyr.scss` 파일을 빌드 과정의 일부로 사용하여 디자인에 맞게 변수를 변경할 수 있습니다. Sass를 사용하려면 모든 선언이 W3C 정의를 사용하므로 [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer)를 사용해야 합니다(이미 사용하고 계실 것입니다!).
HTML 마크업은 `plyr`을 블록으로 사용하는 BEM 방법론을 사용합니다(예: `.plyr\_\_controls`). 작성하는 커스텀 CSS에 맞게 옵션에서 클래스 훅을 변경할 수 있습니다. 이에 대한 자세한 내용은 JavaScript 소스를 확인하세요.
## SVG
Plyr 컨트롤에 사용되는 아이콘들은 SVG 스프라이트에 로드됩니다. 스프라이트는 기본적으로 CDN에서 자동으로 로드됩니다. 이미 아이콘 빌드 시스템을 구축해 둔 경우, 소스 plyr 아이콘을 포함할 수 있습니다(소스 아이콘은 `/src/sprite` 참조).
### `iconUrl` 옵션 사용하기
하지만 사용자가 직접 `iconUrl` 옵션을 지정할 수 있으며, Plyr은 현재 브라우저의 제한 사항 때문에 URL이 절대 경로여서 AJAX/CORS를 통한 로드가 필요한지, 혹은 상대 경로여서 경로를 직접 사용해야 하는지 판단합니다.
사이트에서 `` 태그를 사용하는 경우 다음과 같은 도구를 사용해야 할 수도 있습니다: [svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
SVG 스프라이트에 대한 더 자세한 정보는 여기를 참고하세요: [http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) 및 AJAX 기법은 여기를 참고하세요: [http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/)
## 교차 출처 (CORS)
예제 `` 요소에서 `crossorigin` 속성을 확인할 수 있습니다. 이는 TextTrack 자막이 다른 도메인에서 로드되기 때문입니다. TextTrack 자막도 다른 도메인에 호스팅되어 있는 경우

n, 이 속성을 추가하고 호스트에 올바른 헤더가 설정되어 있는지 확인해야 합니다. CORS에 대한 자세한 내용은 MDN 문서를 확인하세요:
[https://developer.mozilla.org/en-US/docs/Web/HTTP/Access\_control\_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access\_control\_CORS)
미리보기 썸네일 요청에 자격 증명(쿠키, 인증 헤더, 인증서 등)을 첨부해야 하는 경우, 아래와 같이 `withCredentials` 옵션을 사용하세요:
```js
const player = new Plyr(video, {
previewThumbnails: {
enabled: true,
src: 'https://cdn.example.com/storyboard.vtt',
withCredentials: true,
},
});
```
## 자막 (Captions)
WebVTT 자막이 지원됩니다. 자막 트랙을 추가하려면 위의 HTML 예제를 참고하여 `` 요소를 확인하세요. 반드시
[자막 파일을 유효성 검사](https://quuz.org/webvtt/) 하세요.
## JavaScript
### 초기화
생성자에서 사용할 다양한 인자들을 지정할 수 있습니다:
- [CSS 문자열 선택기](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Selectors)
- [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
- [jQuery](https://jquery.com) 객체
\_참고\_: `NodeList`, `Array` 또는 jQuery 객체가 전달된 경우, 설정에 첫 번째 요소가 사용됩니다. 여러 플레이어를 설정하려면 아래의 [여러 플레이어](#multiple-players)를 참고하세요.
#### 단일 플레이어
[`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)와 호환되는 CSS 문자열 선택기 전달하기:
```js
const player = new Plyr('#player');
```
[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) 전달하기:
```js
const player = new Plyr(document.getElementById('player'));
```
```js
const player = new Plyr(document.querySelector('.js-player'));
```
HTMLElement 또는 문자열 선택기는 타겟 ``, ``, 또는 ``일 수 있습니다.

` 임베드용 래퍼입니다.
#### 다중 플레이어
여기서는 두 가지 선택지가 있습니다. 간단한 배열 루프를 사용하여 생성자를 매핑할 수 있습니다:
```js
const players = Array.from(document.querySelectorAll('.js-player')).map((p) => new Plyr(p));
```
...또는 [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Selectors), [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)의 [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Array), 혹은 [JQuery](https://jquery.com) 객체를 전달할 수 있는 정적 메서드를 사용할 수 있습니다:
```js
const players = Plyr.setup('.js-player');
```
두 옵션 모두 문자열 셀렉터 또는 소스 NodeList나 Array의 DOM 내 순서에 맞춰 인스턴스 배열을 반환합니다.
#### 옵션
생성자의 두 번째 인자는 [options](#options) 객체입니다:
```js
const player = new Plyr('#player', {
title: 'Example Title',
});
```
옵션은 위와 같이 생성자에 객체로 전달하거나, 각 타겟 요소의 `data-plyr-config` 속성에 JSON 형태로 전달할 수 있습니다:
```html
[](/path/to/video.mp4)
```
JSON을 감싸는 작은따옴표와 객체 키의 큰따옴표를 확인하세요. 문자열 값에만 큰따옴표가 필요합니다.
| 옵션 | 타입 | 기본값 | 설명 |
| -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `enabled` | Boolean | `true` | Plyr를 완전히 비활성화합니다. 이를 통해 User Agent 검사 등을 수행하여 특정 UA에 대해 프로그래밍 방식으로 Plyr를 활성화하거나 비활성화할 수 있습니다. 아래 예시를 참고하세요. |
| `debug` | Boolean | `false` | 콘솔에 디버깅 정보를 표시합니다. |
| `controls` | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | 함수가 전달되면, 해당 메서드가 컨트롤용 요소 또는 HTML 문자열을 반환한다고 가정합니다. 함수에는 세 가지 인자가 전달됩니다: `id` (플레이어의 고유 ID), `seektime` (초 단위의 탐색 시간 간격), `title` (미디어 제목). HTML 구조화 방법에 대한 자세한 내용은 [CONTROLS.md](CONTROLS.md)를 참고하세요. |
| `settings` | Array | `['captions', 'quality', 'speed', 'loop']` | 기본 컨트롤을 사용할 때 메뉴에 표시할 설정을 지정할 수 있습니다. |
| `i18n` | Object | [defaults.js](/src/js/config/defaults.js) 참고 | UI 내 텍스트의 국제화(i18n)에 사용됩니다. |
| `loadSprite` | Boolean | `true` | (`iconUrl` 옵션에 URL이 지정된 경우) 해당 SVG 스프라이트를 로드합니다. `false`인 경우, 사용자가 직접 스프라이트 로딩을 처리한다고 가정합니다. |
| `iconUrl` | String | `https://cdn.plyr.io/3.8.4/plyr.svg` | SVG 스프라이트의 URL 또는 경로를 지정합니다. 자세한 내용은 [SVG section](#svg)을 참고하세요. |
| `iconPrefix` | String | `plyr` | 기본 컨트롤에 사용되는 아이콘의 ID 접두사를 지정합니다 (예: "plyr-play"는 "plyr"가 됨). 이는 기본 컨트롤을 사용하면서 커스텀 SVG 스프라이트를 사용할 때 충돌을 방지하기 위한 것입니다. 대부분의 경우 이 옵션은 무시해도 됩니다. |
| `blankVideo` | String | `https://cdn.plyr.io/static/blank.mp4` | 네트워크 요청을 올바르게 취소하는 데 사용되는 빈 비디오 파일의 URL 또는 경로를 지정합니다. |
| `autoplay`² | Boolean | `false` | 로드 시 미디어를 자동 재생합니다. `` 또는 `` 요소에 `autoplay` 속성이 있는 경우, 이 값은 자동으로 true로 설정됩니다. |
| `autopause`¹ | Bool

ean | `true` | 한 번에 한 명의 플레이어만 재생할 수 있도록 허용합니다. |
| `playsinline`³ | Boolean | `true` | iOS에서 인라인 재생을 허용합니다. iPadOS에서는 효과가 없습니다. |
| `seek` | Number | `10` | 사용자가 빨리 감기나 되감기를 눌렀을 때 이동할 시간(초)입니다. |
| `volume` | Number | `1` | 0과 1 사이의 숫자로, 플레이어의 초기 음량을 나타냅니다. |
| `muted` | Boolean | `false` | 음소거된 상태로 재생을 시작할지 여부입니다. `` 또는 `` 요소에 `muted` 속성이 있는 경우, 이 값은 자동으로 true로 설정됩니다. |
| `clickToPlay` | Boolean | `true` | 비디오 컨테이너를 클릭(또는 탭)하면 재생/일시 정지가 토글됩니다. |
| `disableContextMenu` | Boolean | `true` | 컨텐츠 다운로드를 방지하기 위한 아주 원시적인 난독화 *보조* 수단으로 비디오의 우클릭 메뉴를 비활성화합니다. |
| `hideControls` | Boolean | `true` | 마우스나 포커스 움직임이 없고, 제어 요소에서 포커스가 벗어나거나(탭 아웃), 재생이 시작되거나 전체 화면에 진입한 후 2초가 지나면 비디오 제어기를 자동으로 숨깁니다. 마우스가 움직이거나, 제어 요소에 포커스가 가거나, 재생이 일시 정지되면 제어기가 즉시 다시 나타납니다. |
| `resetOnEnd` | Boolean | false | 재생이 완료되면 재생을 처음으로 되돌립니다. |
| `keyboard` | Object | `{ focused: true, global: false }` | 포커스된 플레이어 전용 또는 전역으로 [키보드 단축키](#shortcuts)를 활성화합니다. |
| `tooltips` | Object | `{ controls: false, seek: true }` | `controls`: `:hover` 및 `:focus` 시 제어 라벨을 툴팁으로 표시합니다(기본적으로 라벨은 스크린 리더 전용입니다). `seek`: 클릭 시 미디어가 탐색될 위치를 나타내는 탐색 툴팁을 표시합니다. |
| `duration` | Number | `null` | 미디어의 사용자 지정 지속 시간을 지정합니다. |
| `displayDuration` | Boolean | `true` | 현재 시간 표시 영역에 "metadataloaded" 이벤트(시작 시)에서 미디어의 지속 시간을 표시합니다. 이 기능은 `preload` 속성이 `none`으로 설정되어 있지 않고(또는 전혀 설정되어 있지 않으며) 지속 시간을 표시하지 않도록 선택하지 않은 경우에만 작동합니다(`controls` 옵션 참조). |
| `invertTime` | Boolean | `true` | 현재 시간을 증가하는 카운터가 아닌 카운트다운으로 표시합니다. |
| `toggleInvert` | Boolean | `true` | 사용자가 클릭하여 위 설정을 토글할 수 있도록 허용합니다. |
| `listeners` | Object | `null` | 기본 핸들러보다 먼저 제어기에 이벤트 리스너를 바인딩할 수 있도록 허용합니다. 사용 가능한 리스너는 `defaults.js`를 참조하세요. 핸들러에서 이벤트의 기본 동작을 방지하는 경우(`event.preventDefault()`), 기본 핸들러가 실행되지 않습니다. |
| `captions` | Object | `{ active: false, language: 'auto', update: false }` | `active`: 자막을 기본적으로 활성화할지 여부를 토글합니다. `language`: 로드할 기본 언어를 설정합니다(사용 가능한 경우). 'auto'는 브라우저 언어를 사용합니다. `update`: 트랙 변경 사항을 수신 대기하고 메뉴를 업데이트합니다. 이는 일부 스트리밍 라이브러리에 필요하지만, 선택할 수 없는 언어 옵션이 발생할 수 있습니다. |
| `fullscreen` | Object | `{ enabled: true, fallback: true, iosNative: false, container: null }` | `enabled`: 전체 화면 활성화 여부를 토글합니다. `fallback`: 전체 창 솔루션으로의 폴백을 허용합니다(`true`/`false`/`'force'`). `iosNative`: 전체 화면 진입 시 네이티브 iOS 전체 화면을 사용할지 여부입니다(사용자 지정 제어기 없음). `container`: 플레이어 요소의 상위 요소에 대한 셀렉터로, 전체 화면 모드에서도 문맥에 맞는 컨텐츠가 시각적으로 유지되도록 합니다. 상위 요소가 아닌 경우는 무시됩니다. |
| `ratio` | String | `null` | 모든 비디오의 종횡비를 강제합니다. 형식은 `'w:h'`입니다(예: `'16:9'` 또는 `'4:3'`). 이를 지정하지 않으면 HTML5 및 Vimeo의 기본값은 비디오의 네이티브 해상도를 사용하는 것입니다. YouTube에서는 SDK를 통해 해상도를 얻을 수 없으므로, 합리적인 기본값으로 16:9가 강제됩니다. |
| `storage` | Object | `{ enabled: true, key: 'plyr' }` | `enabled`: 사용자 설정을 저장하기 위해 로컬 스토리지 사용을 허용합니다. `key`: 사용할 키 이름입니다. |
| `speed` | Object | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4] }` | `selected`: 기본 재생 속도입니다. `options`: UI에 표시할 속도 옵션입니다. YouTube와 Vimeo는 이를 무시합니

nore any options outside of the 0.5-2 range, so options outside of this range will be hidden automatically. |
| `quality` | Object | `{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }` | `default`는 기본 화질 수준입니다(소스에 존재하는 경우). `options`는 표시할 옵션입니다. 사용 가능한 소스를 필터링하는 데 사용됩니다. |
| `loop` | Object | `{ active: false }` | `active`: 현재 비디오를 반복 재생할지 여부. `` 또는 `` 요소에 `loop` 속성이 있으면 이것이 자동으로 true로 설정됩니다. 향후 기능을 지원하기 위한 객체입니다. |
| `ads` | Object | `{ enabled: false, publisherId: '', tagUrl: '' }` | `enabled`: 광고 활성화 여부. `publisherId`: 고유한 [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) 퍼블리셔 ID. `tagUrl`은 Vi를 사용하지 않는 경우 커스텀 VAST 태그를 위한 URL입니다. |
| `urls` | Object | 소스 참조. | API URL을 재정의하려면 여기서 할 수 있습니다. 다운로드 버튼에 대한 커스텀 다운로드 URL을 설정할 수도 있습니다. |
| `vimeo` | Object | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }` | [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options)을 참조하세요. 일부는 다른 설정 옵션(`loop`, `autoplay`, `muted`, `gesture`, `playsinline` 등)에 따라 자동으로 설정됩니다. |
| `youtube` | Object | `{ noCookie: false, rel: 0, showinfo: 0, iv\_load\_policy: 3, modestbranding: 1 }` | [YouTube embed options](https://developers.google.com/youtube/player\_parameters#Parameters)을 참조하세요. 유일한 커스텀 옵션은 쿠키를 사용하지 않는 YouTube 대안을 사용하는 `noCookie`입니다(GDPR 등에 유용). 일부는 다른 설정 옵션(`autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc\_load\_policy`, `cc\_lang\_pref`, `widget\_referrer` 등)에 따라 자동으로 설정됩니다. |
| `previewThumbnails` | Object | `{ enabled: false, src: '', withCredentials: false }` | `enabled`: 미리보기 썸네일 활성화 여부(사용자가 직접 생성해야 합니다). `src`: 이미지 URL이 포함된 VTT 파일의 URL을 나타내는 문자열 또는 문자열 배열이어야 합니다. 아래의 [preview thumbnails](#preview-thumbnails)에서 자세히 알아보세요. `withCredentials`: 요청에 자격 증명(쿠키 및 인증 헤더 등)을 첨부할지 여부. |
| `mediaMetadata` | Object | `{ title: '', artist: '', album: '', artwork: [] }` | Media Session API의 [MediaMetadata](https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata) 인터페이스를 사용하면 웹 페이지가 플랫폼 UI에 표시할 풍부한 미디어 메타데이터를 제공할 수 있습니다. |
| `markers` | Object | `{ enabled: false, points: [] }` | `enabled`: 마커 활성화 여부. `points`는 `{ time: number; label: string; }` 객체의 배열이며, `time`은 초 단위의 마커 위치를 나타내고 `label`은 표시될 HTML 문자열입니다. |
1. Vimeo 전용
2. 자동 재생(Autoplay)은 부정적인 사용자 경험으로 간주되므로 일반적으로 권장되지 않습니다. 또한 많은 브라우저에서 비활성화되어 있습니다. 이슈를 제기하기 전에 충분히 조사해 보세요. 자세한 정보는 다음에서 찾을 수 있습니다:
- 
- 
- 
3. YouTube는 API를 통해 네이티브 전체 화면 플레이어를 프로그래밍 방식으로 토글하는 것을 지원하지 않습니다. 즉, iOS에서는 완벽하지 않은 두 가지 옵션이 있습니다:
- 전체 뷰포트를 가리는 대체/가짜 전체 화면 옵션 사용(기본값)
- `playsinline`을 `false`로 그리고/또는 `fullscreen.iosNative`를 `true`로 설정 — 두 옵션 모두 (위의 API 문제 때문에) UI에서 전체 화면 토글을 숨기고 iOS가 네이티브 플레이어에서 비디오를 재생하도록 합니다.
# API
Plyr 객체에는 메서드, 세터(setter), 게터(getter)가 있습니다.
## Object
Plyr 객체에 접근하는 가장 쉬운 방법은 생성자 호출의 반환 값을 변수에 할당하는 것입니다. 예시:
```js
const player = new Plyr('#player', {
/\* options \*/
});
```
모든 이벤트를 통해서도 객체에 접근할 수 있습니다:
```js
element.addEventListener('ready', (event) => {
const player = event.detail.plyr;
});
```

## Methods
예제 메서드 사용법:
```js
player.play(); // Start playback
player.fullscreen.enter(); // Enter fullscreen
```
| Method | Parameters | Description |
| -------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
| `play()`¹ | - | 재생을 시작합니다. |
| `pause()` | - | 재생을 일시 정지합니다. |
| `togglePlay(toggle)`¹ | Boolean | 재생을 토글합니다. 매개변수가 전달되지 않으면 현재 상태를 기준으로 토글됩니다. |
| `stop()` | - | 재생을 멈추고 시작 지점으로 초기화합니다. |
| `restart()` | - | 재생을 다시 시작합니다. |
| `rewind(seekTime)` | Number | 지정된 탐색 시간만큼 재생을 뒤로 감습니다. 매개변수가 전달되지 않으면 기본 탐색 시간이 사용됩니다. |
| `forward(seekTime)` | Number | 지정된 탐색 시간만큼 앞으로 감습니다. 매개변수가 전달되지 않으면 기본 탐색 시간이 사용됩니다. |
| `increaseVolume(step)` | Number | 지정된 단계만큼 볼륨을 높입니다. 매개변수가 전달되지 않으면 기본 단계가 사용됩니다. |
| `decreaseVolume(step)` | Number | 지정된 단계만큼 볼륨을 높입니다. 매개변수가 전달되지 않으면 기본 단계가 사용됩니다. |
| `toggleCaptions(toggle)` | Boolean | 자막 표시 여부를 토글합니다. 매개변수가 전달되지 않으면 현재 상태를 기준으로 토글됩니다. |
| `fullscreen.enter()` | - | 전체 화면으로 전환합니다. 전체 화면이 지원되지 않는 경우 대체 수단으로 "전체 창/뷰포트"가 대신 사용됩니다. |
| `fullscreen.exit()` | - | 전체 화면을 종료합니다. |
| `fullscreen.toggle()` | - | 전체 화면을 토글합니다. |
| `airplay()` | - | 지원되는 기기에서 AirPlay 대화상자를 트리거합니다. |
| `setPreviewThumbnails(source: PreviewThumbnailsOptions)` | - | 현재 소스의 미리보기 썸네일을 설정합니다. |
| `toggleControls(toggle)` | Boolean | 컨트롤을 토글합니다 (비디오 전용). 강제로 켜거나 끄기 위한 선택적 truthy 값을 인자로 받습니다. |
| `on(event, function)` | String, Function | 지정된 이벤트에 대한 이벤트 리스너를 추가합니다. |
| `once(event, function)` | String, Function | 지정된 이벤트에 대한 이벤트 리스너를 한 번만 실행되도록 추가합니다. |
| `off(event, function)` | String, Function | 이벤트 리스너를 제거합니다. |
| `supports(type)` | String | MIME 타입 지원 여부를 확인합니다. |
| `destroy()` | - | 인스턴스를 파괴하고 모든 엘리먼트를 가비지 컬렉션합니다. |
1. HTML5 플레이어의 경우 작성 시점의 [MDN 문서에 따르면](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) Chrome, Firefox, Opera, Safari, Edge 등 대부분의 브라우저에서 `play()`가 [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/Promise)를 반환합니다.
## Getters and Setters
세터 예제:
```js
player.volume = 0.5; // Sets volume at 50%
player.currentTime = 10; // Seeks to 10 seconds
```
게터 예제:
```js
player.volume; // 0.5;
player.currentTime; // 10
player.fullscreen.active; // false;
```
| Property | Getter | Setter | Description |
| -------------------- | ------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isHTML5` | ✓ | - | 현재 플레이어가 HTML5인지 여부를 나타내는 불리언 값을 반환합니다. |
| `isEmbed` | ✓ | - | 현재 플레이어가 임베드된 플레이어인지 여부를 나타내는 불리언 값을 반환합니다. |
| `playing` | ✓ | - | 현재 플레이어가 재생 중인지 여부를 나타내는 불리언 값을 반환합니다. |
| `paused` | ✓ | - | 현재 플레이어가 일시 정지 상태인지 여부를 나타내는 불리언 값을 반환합니다. |
| `stopped` | ✓ | - | 현재 플레이어가 정지 상태인지 여부를 나타내는 불리언 값을 반환합니다. |
| `ended` | ✓ | - | 현재 플레이어가 재생을 완료했는지 여부를 나타내는 불리언 값을 반환합니다. |
| `buffered` | ✓ | - | 미디어가 버퍼링된 정도를 나타내는 0과 1 사이의 부동소수점 숫자를 반환합니다. |
| `currentTime` | ✓ | ✓ | 플레이어의 currentTime을 가져오거나 설정합니다. |

yer. setter는 초 단위의 float 값을 받습니다. |
| `seeking` | ✓ | - | 현재 플레이어가 탐색(seeking) 중인지 여부를 나타내는 불리언(boolean)을 반환합니다. |
| `duration` | ✓ | - | 현재 미디어의 재생 시간을 반환합니다. |
| `volume` | ✓ | ✓ | 플레이어의 볼륨을 가져오거나 설정합니다. setter는 0에서 1 사이의 float 값을 받습니다. |
| `muted` | ✓ | ✓ | 플레이어의 음소거 상태를 가져오거나 설정합니다. setter는 불리언 값을 받습니다. |
| `hasAudio` | ✓ | - | 현재 미디어에 오디오 트랙이 있는지 여부를 나타내는 불리언을 반환합니다. |
| `speed` | ✓ | ✓ | 플레이어의 재생 속도를 가져오거나 설정합니다. setter는 설정(config)에 지정된 옵션의 값을 받습니다. 일반적으로 최솟값은 0.5여야 합니다. |
| `quality`¹ | ✓ | ✓ | 플레이어의 화질을 가져오거나 설정합니다. setter는 설정에 지정된 옵션의 값을 받습니다. |
| `loop` | ✓ | ✓ | 플레이어의 현재 반복 재생 상태를 가져오거나 설정합니다. setter는 불리언 값을 받습니다. |
| `source` | ✓ | ✓ | 플레이어의 현재 소스를 가져오거나 설정합니다. setter는 객체를 받습니다. 예제는 아래의 [source setter](#the-source-setter)를 참고하세요. |
| `poster` | ✓ | ✓ | 플레이어의 현재 포스터 이미지를 가져오거나 설정합니다. setter는 업데이트된 포스터 이미지의 URL인 문자열을 받습니다. |
| `previewThumbnails` | ✓ | ✓ | 플레이어의 현재 미리보기 썸네일 소스를 가져오거나 설정합니다. setter는 문자열을 받습니다. |
| `autoplay` | ✓ | ✓ | 플레이어의 자동 재생 상태를 가져오거나 설정합니다. setter는 불리언 값을 받습니다. |
| `currentTrack` | ✓ | ✓ | 인덱스를 통해 자막 트랙을 가져오거나 설정합니다. `-1`은 트랙이 없거나 자막이 활성화되지 않았음을 의미합니다. |
| `language` | ✓ | ✓ | 플레이어의 선호 자막 언어를 가져오거나 설정합니다. setter는 ISO 2글자 언어 코드를 받습니다. 언어 지원 여부는 포함된 자막에 따라 다릅니다. 자막에 언어 데이터가 없거나 동일한 언어의 트랙이 여러 개 있는 경우, 대신 `currentTrack`을 사용하는 것이 좋습니다. |
| `fullscreen.active` | ✓ | - | 현재 플레이어가 전체 화면 모드인지 여부를 나타내는 불리언을 반환합니다. |
| `fullscreen.enabled` | ✓ | - | 현재 플레이어에서 전체 화면이 활성화되어 있는지 여부를 나타내는 불리언을 반환합니다. |
| `pip`¹ | ✓ | ✓ | 플레이어의 PIP(picture-in-picture) 상태를 가져오거나 설정합니다. setter는 불리언 값을 받습니다. 이 기능은 현재 Safari 10+(MacOS Sierra+ 및 iOS 10+) 및 Chrome 70+에서만 지원됩니다. |
| `ratio` | ✓ | ✓ | 비디오 종횡비를 가져오거나 설정합니다. setter는 `ratio` 옵션과 동일한 형식의 문자열을 받습니다. |
| `download` | ✓ | ✓ | 다운로드 버튼의 URL을 가져오거나 설정합니다. setter는 유효한 절대 URL을 포함하는 문자열을 받습니다. |
1. HTML5 전용
### `.source` setter
이를 통해 플레이어 소스와 타입을 실시간으로 변경할 수 있습니다.
비디오 예제:
```js
player.source = {
type: 'video',
title: 'Example title',
sources: [
{
src: '/path/to/movie.mp4',
type: 'video/mp4',
size: 720,
},
{
src: '/path/to/movie.webm',
type: 'video/webm',
size: 1080,
},
],
poster: '/path/to/poster.jpg',
previewThumbnails: {
src: '/path/to/thumbnails.vtt',
},
tracks: [
{
kind: 'captions',
label: 'English',
srclang: 'en',
src: '/path/to/captions.en.vtt',
default: true,
},
{
kind: 'captions',
label: 'French',
srclang: 'fr',
src: '/path/to/captions.fr.vtt',
},
],
};
```
오디오 예제:
```js
player.source = {
type: 'audio',
title: 'Example title',
sources: [
{
src: '/path/to/audio.mp3',
type: 'audio/mp3',
},
{
src: '/path/to/audio.ogg',
type: 'audio/ogg',
},
],
};
```
YouTube 예제:
```js
player.source = {
type: 'video',
sources: [
{
src: 'bTqVqk7FSmY',
provider: 'youtube',
},
],
};
```
Vimeo 예제
```js
player.source = {
type: 'video',
sources: [
{
src: '76979871',
provider: 'vimeo',
},
],
};
```
\_참고:\_ YouTube 및 Vimeo의 `src` 속성은 비디오 ID 또는 전체 URL 중 하나일 수 있습니다.
| 속성 | 타입 | 설명 |
| ------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

| `type` | String | `video` 또는 `audio` 중 하나입니다. \_참고:\_ YouTube와 Vimeo는 현재 오디오 소스로 지원되지 않습니다. |
| `title` | String | \_선택 사항.\_ 새 미디어의 제목입니다. 재생 버튼 및 바깥쪽 컨테이너의 `aria-label` 속성에 사용됩니다. YouTube와 Vimeo는 자동으로 입력됩니다. |
| `sources` | Array | 소스 배열입니다. HTML5 미디어의 경우, 이 객체의 속성이 HTML 속성에 직접 매핑되므로 필요에 따라 객체에 더 많은 속성을 추가할 수 있습니다. |
| `poster`¹ | String | 포스터 이미지의 URL입니다(HTML5 비디오 전용). |
| `tracks`¹ | String | 트랙 객체 배열입니다. 배열의 각 요소는 track 요소에 직접 매핑되며, 모든 키는 HTML 속성에 직접 매핑됩니다. 따라서 위의 예시처럼 프랑스어 버전 등의 경우에 `` 및 유사한 형태로 렌더링됩니다. 불리언 값은 HTML5의 값이 없는 속성(value-less attribute)으로 변환됩니다. |
| `previewThumbnails`¹ | Object | `previewThumbnails` 생성자 옵션과 동일한 객체입니다. 즉, `src` 키를 통해 썸네일 VTT를 변경하거나, `{ enabled: false }`를 전달하여 다음 비디오에 대한 썸네일 플러그인을 비활성화할 수 있습니다. |

1. HTML5 전용

# Events
Plyr를 설정한 타겟 엘리먼트에서 이벤트를 수신 대기할 수 있습니다(표 아래의 예시 참조). 일부 이벤트는 HTML5 오디오 및 비디오에만 적용됩니다. 인스턴스에 대한 참조를 사용하여 `on()` API 메서드나 `addEventListener()`를 사용할 수 있습니다. `event.detail.plyr` 속성을 통해 이러한 방식으로 API에 접근할 수 있습니다. 예시는 다음과 같습니다:

```js
player.on('ready', (event) => {
const instance = event.detail.plyr;
});
```

## Standard Media Events

| Event Type | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `progress` | 미디어 다운로드 진행 상황을 알리기 위해 주기적으로 전송됩니다. 현재 다운로드된 미디어의 양에 대한 정보는 미디어 엘리먼트의 `buffered` 속성에서 확인할 수 있습니다. |
| `playing` | 미디어가 재생을 시작할 때 전송됩니다(처음 재생되거나, 일시 중지된 후, 또는 종료 후 다시 시작될 때). |
| `play` | 일시 중지된 상태에서 미디어 재생이 시작될 때 전송됩니다. 즉, 이전 `pause` 이벤트 이후 재생이 재개될 때입니다. |
| `pause` | 재생이 일시 중지될 때 전송됩니다. |
| `timeupdate` | 엘리먼트의 `currentTime` 속성으로 표시되는 시간이 변경되었습니다. |
| `volumechange` | 오디오 볼륨이 변경될 때 전송됩니다(볼륨이 설정되거나 `muted` 상태가 변경될 때 모두 해당). |
| `seeking` | 탐색(seek) 작업이 시작될 때 전송됩니다. |
| `seeked` | 탐색(seek) 작업이 완료될 때 전송됩니다. |
| `ratechange` | 재생 속도가 변경될 때 전송됩니다. |
| `ended` | 재생이 완료될 때 전송됩니다. \_참고:\_ `autoplay`가 참(true)인 경우에는 발생하지 않습니다. |
| `enterfullscreen` | 플레이어가 전체 화면 모드에 진입할 때 전송됩니다(정식 전체 화면 또는 구형 브라우저를 위한 전체 창 폴백). |
| `exitfullscreen` | 플레이어가 전체 화면 모드에서 나올 때 전송됩니다. |
| `captionsenabled` | 자막이 활성화될 때 전송됩니다. |
| `captionsdisabled` | 자막이 비활성화될 때 전송됩니다. |
| `languagechange` | 자막 언어가 변경될 때 전송됩니다. |
| `controlshidden` | 제어 장치가 숨겨질 때 전송됩니다. |
| `controlsshown` | 제어 장치가 표시될 때 전송됩니다. |
| `ready` | 인스턴스가 API 호출 준비가 되었을 때 트리거됩니다. |

### HTML5 only

| Event Type | Description |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

---------------------------------------------------------------------------------------------------- |
| `loadstart` | 미디어 로딩이 시작될 때 전송됩니다. |
| `loadeddata` | 미디어의 첫 번째 프레임 로딩이 완료되었습니다. |
| `loadedmetadata` | 미디어의 메타데이터 로딩이 완료되었으며, 모든 속성에 유용한 정보가 최대로 채워졌습니다. |
| `qualitychange` | 재생 품질이 변경되었습니다. |
| `canplay` | 적어도 몇 개의 프레임 동안 미디어를 재생할 수 있을 만큼 충분한 데이터를 사용할 수 있게 되었을 때 전송됩니다. 이는 `HAVE\_ENOUGH\_DATA` `readyState`에 해당합니다. |
| `canplaythrough` | 다운로드 속도가 현재 수준을 유지한다고 가정할 때, 미디어 전체를 중단 없이 재생할 수 있음을 나타내는 `CAN\_PLAY\_THROUGH`로 준비 상태가 변경될 때 전송됩니다. \_참고:\_ firefox에서는 `currentTime`을 수동으로 설정하면 결국 `canplaythrough` 이벤트가 발생합니다. 다른 브라우저는 이 이벤트를 발생시키지 않을 수 있습니다. |
| `stalled` | 사용자 에이전트가 미디어 데이터를 가져오려고 시도하고 있으나, 데이터가 예상치 못하게 수신되지 않을 때 전송됩니다. |
| `waiting` | (탐색 같은) 다른 작업의 완료를 기다리느라 (재생 같은) 요청된 작업이 지연될 때 전송됩니다. |
| `emptied` | 미디어가 비워졌습니다. 예를 들어 미디어가 이미 로드되었거나(또는 부분적으로 로드되었고), 다시 로드하기 위해 `load()` 메서드가 호출된 경우 이 이벤트가 전송됩니다. |
| `cuechange` | `TextTrack`이 현재 표시되는 큐를 변경했을 때 전송됩니다. |
| `error` | 오류가 발생했을 때 전송됩니다. 요소의 `error` 속성에 더 많은 정보가 포함되어 있습니다. |
### YouTube 전용
| Event Type | Description |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `statechange` | 플레이어의 상태가 변경되었습니다. 코드는 `event.detail.code`를 통해 액세스할 수 있습니다. 가능한 값은 `-1`: 시작 안 함, `0`: 종료됨, `1`: 재생 중, `2`: 일시 중지됨, `3`: 버퍼링 중, `5`: 비디오 큐에 대기됨입니다. 자세한 내용은 [YouTube Docs](https://developers.google.com/youtube/iframe\_api\_reference#onStateChange)를 참조하세요. |
\_참고:\_ 이러한 이벤트는 DOM으로 버블링되기도 합니다. 이벤트 대상은 컨테이너 요소가 됩니다.
일부 이벤트 세부 정보는 [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media\_events)에서 가져왔습니다.
# Embeds
YouTube와 Vimeo는 현재 지원되며 HTML5 비디오와 매우 유사하게 작동합니다. 모든 유형에 대해 유사한 이벤트와 API 메서드를 사용할 수 있습니다. 그러나 API에 직접 액세스하려는 경우, 플레이어 객체의 `embed` 속성(예: `player.embed`)을 통해 액세스할 수 있습니다. 그런 다음 타사 API의 관련 메서드를 사용할 수 있습니다. 각 API에 대한 자세한 정보는 여기에 있습니다:
- [YouTube iframe API Reference](https://developers.google.com/youtube/iframe\_api\_reference)
- [Vimeo player.js Reference](https://github.com/vimeo/player.js)
\_참고\_: 모든 API 메서드가 100% 작동하지 않을 수도 있습니다. 상황에 따라 다를 수 있습니다. 가능하면 Plyr API를 사용하는 것이 좋습니다.
# Shortcuts
기본적으로 플레이어는 포커스가 있을 때 다음 키보드 단축키를 바인딩합니다. `global` 옵션을 `true`로 설정하고 문서에 플레이어가 하나만 있는 경우, 입력을 요구하는 요소를 제외하고 어떤 요소에든 포커스가 있을 때 단축키가 작동합니다.
| Key | Action |
| ---------- | -------------------------------------- |
| `0` to `9` | 각각 0%에서 90%까지 탐색 |
| `space` | 재생 토글 |
| `K` | 재생 토글 |
| ← | `seekTime` 옵션만큼 뒤로 탐색 |
| → | `seekTime` 옵션만큼 앞으로 탐색 |
| ↑ | 볼륨 증가 |
| ↓ | 볼륨 감소 |
| `M` | 음소거 토글 |
| `F` | 전체 화면 토글 |
| `C` | 자막 토글 |
| `L` | 반복 재생 토글 |
# Preview thumbnails
스크러버 위에 마우스를 올리거나 하는 동안 데모에 따라 미리보기 썸네일을 표시할 수 있습니다.

메인 비디오 영역에서 탐색(scrubbing)을 수행할 수 있습니다. 이 기능은 모든 비디오 타입에서 사용할 수 있지만, 당연히 HTML5에서 가장 쉽습니다. 스프라이트 또는 이미지를 직접 생성해야 합니다. 예를 들어 AWS transcoder를 사용하여 프레임을 생성한 다음 이를 조합하여 스프라이트 이미지로 만드는 방식으로 가능합니다. 성능상의 이유로 스프라이트 사용을 권장합니다. 다운로드 속도가 훨씬 빨라지고 작은 파일 크기로 압축하기 쉬워 로딩 시간이 단축됩니다.
스프라이트가 어떻게 만들어졌는지에 대한 예시 VTT 파일은 [여기](https://cdn.plyr.io/static/demo/thumbs/100p.vtt)와 [여기](https://cdn.plyr.io/static/demo/thumbs/240p.vtt)에서 확인할 수 있습니다. 좌표는 URL의 `xywh` 해시에 X 오프셋, Y 오프셋, 너비, 높이 순서로 설정됩니다(예: `240p-00001.jpg#xywh=1708,480,427,240`은 왼쪽에서 `1708px`, 상단에서 `480px` 오프셋되어 있으며 크기는 `427x240px`입니다). 프레임별로 이미지를 포함하려면 그렇게 할 수도 있지만 속도가 느려져 사용자 경험이 저하될 수 있습니다.
# 전체 화면
Plyr의 전체 화면 기능은 [현재 이를 지원하는](http://caniuse.com/#feat=fullscreen) 모든 브라우저에서 지원됩니다.
# 브라우저 지원
Plyr는 대부분의 _최신_ 브라우저의 최근 2개 버전을 지원합니다.
| 브라우저 | 지원 여부 |
| ------------- | --------------- |
| Safari | ✓ |
| Mobile Safari | ✓¹ |
| Firefox | ✓ |
| Chrome | ✓ |
| Opera | ✓ |
| Edge | ✓ |
| IE11 | ✓³ |
| IE10 | ✓2,3 |
1. iPhone의 Mobile Safari는 `playsinline` 속성이 존재하지 않는 한 ``에 대해 기본 플레이어를 강제로 사용합니다. 볼륨 제어는 기기 전체에서 처리되므로 비활성화됩니다.
2. 기본 플레이어가 사용되지만(`` 또는 `` 지원 없음) API는 지원됩니다. 기본 전체 화면 지원은 없으며 폴백을 사용할 수 있습니다([옵션](#options) 참고).
3. 폴리필이 필요합니다. 아래를 참고하세요.
## 폴리필
Plyr는 아직 모든 브라우저에서 완전히 지원되지 않는 ES6를 사용합니다. 즉, 일부 기능은 사용할 수 있도록 폴리필되어야 하며, 그렇지 않으면 문제가 발생할 수 있습니다. 저희는 이러한 기능을 지원하는 약 90%의 사용자에게 추가 JS로 부담을 주지 않기로 결정했으며, 대신 사용자의 필요에 따라 폴리필을 직접 처리하도록 했습니다.
## 지원 여부 확인
정적 메서드를 사용하여 지원 여부를 확인할 수 있습니다. 예를 들면 다음과 같습니다.
```js
const supported = Plyr.supported('video', 'html5');
```
인수는 다음과 같습니다:
- 미디어 타입 (`'audio' | 'video'`)
- 제공자 (`'html5' | 'youtube' | 'vimeo'`)
## 프로그래밍 방식으로 지원 비활성화
`enabled` 옵션을 사용하여 특정 사용자 에이전트를 비활성화할 수 있습니다. 예를 들어 스마트폰에서 Plyr를 사용하지 않으려면 다음과 같이 사용할 수 있습니다.
```js
{
enabled: !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
}
```
사용자 에이전트가 비활성화되었지만 `` 및 ``을 네이티브로 지원하는 경우, 기본 플레이어가 사용됩니다.
# 플러그인 및 컴포넌트
멋진 분들이 CMS용 플러그인과 JavaScript 프레임워크용 컴포넌트를 만들었습니다:
| 유형 | 유지관리자 | 링크 |
| ----------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
| WordPress | Brandon Lavigne ([@drrobotnik](https://github.com/drrobotnik)) | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/) |
| Angular | Simon Bobrov ([@smnbbrv](https://github.com/smnbbrv)) | [https://github.com/smnbbrv/ngx-plyr](https://github.com/smnbbrv/ngx-plyr) |
| React | Chintan Prajapati ([@chintan9](https://github.com/chintan9)) | [https://github.com/chintan9/plyr-react](https://github.com/chintan9/plyr-react) |
| Vue | Gabe Dunn ([@redxtech](https://github.com/redxtech)) | [https://github.com/redxtech/vue-plyr](https://github.com/redxtech/vue-plyr) |
| Neos | Jon Uhlmann ([@jonnitto](https://github.com/jonnitto)) | [https://packagist.org/packages/jonnitto/plyr](https://packagist.org/packages/jonnitto/plyr) |
| Kirby | Dominik Pschenitschni ([@dpschen](https://github.com/dpschen)) | [https://github.com/dpschen/kirby-plyrtag](https://github.com/dpschen/kirby-plyrtag) |
| REDAXO | FriendsOfRedaxo / skerbis ([@skerbis](https://friendsofred

axo.github.io)) | [https://github.com/FriendsOfREDAXO/plyr](https://github.com/FriendsOfREDAXO/plyr) |
| svelte-plyr | Ben Woodward / benwoodward ([@benwoodward](https://github.com/benwoodward)) | [https://github.com/benwoodward/svelte-plyr](https://github.com/benwoodward/svelte-plyr) |
# 이슈
Plyr와 관련하여 이상한 점을 발견하시면 GitHub 이슈 트래커를 통해 알려주세요.
# 작성자
Plyr는 멋진 [기여자들](https://github.com/sampotts/plyr/graphs/contributors)의 도움을 받아 [@sam\_potts](https://twitter.com/sam\_potts) / [sampotts.me](http://sampotts.me)가 개발했습니다.
# 후원하기
Plyr를 운영하는 데는 제 시간뿐만 아니라 비용도 듭니다. Plyr를 만드는 것이 즐거워 제 시간을 무료로 기부하고 있지만, 안타깝게도 도메인, 호스팅 등의 비용은 지불해야 합니다. 비용 마련에 도움을 주시면 대단히 감사하겠습니다...
- [Patreon을 통해 후원하기](https://www.patreon.com/plyr)
- [PayPal을 통해 후원하기](https://www.paypal.me/pottsy/20usd)
# 언급된 곳
- [ProductHunt](https://www.producthunt.com/tech/plyr)
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
- [Front End Focus #177](https://frontendfoc.us/issues/177)
- [Hacker News](https://news.ycombinator.com/item?id=9136774)
- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
# 사용 중인 곳
- [Selz.com](https://selz.com)
- [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
- [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
- [TomTom.com](http://prioritydriving.tomtom.com/)
- [DIGBMX](http://digbmx.com/)
- [Grime Archive](https://grimearchive.com/)
- [Koel - Music streaming solution that works](https://koel.dev/)
- [Oscar Radio](http://oscar-radio.xyz/)
- [Sparkk TV](https://www.sparkktv.com/)
- [@halfhalftravel](https://www.halfhalftravel.com/)
- [BitChute](https://www.bitchute.com)
- [Rutheneum-Bote](https://gymnasium-rutheneum.de/content/newspaper/kreativwettbewerb.php)
- [pressakey.com | Blog-Magazin für Videospiele](https://pressakey.com)
- [STROLLÿN: Work with a View](https://strollyn.com)
- [CFDA Runway360](https://runway360.cfda.com/)
- [NKLAV | Filmmaker](https://nklav.com)
- [GDI.JS.ORG - Google Drive Index](https://gitlab.com/GoogleDriveIndex/Google-Drive-Index)
이 목록에 추가되고 싶으시다면 풀 리퀘스트를 열어주세요. 여러분이 Plyr를 어떻게 사용하고 계신지 볼 수 있다면 정말 멋질 것입니다 😎
# 유용한 링크 및 크레딧
- [PayPal의 접근성 높은 HTML5 비디오 플레이어 (Plyr가 원래 이로부터 포팅되었습니다)](https://github.com/paypal/accessible-html5-video-player)
- [@arayutw](https://twitter.com/arayutw)가 작성한 Plyr를 위한 멋진 일본어 가이드! [http://syncer.jp/how-to-use-plyr-io](http://syncer.jp/how-to-use-plyr-io)
# 감사의 말
- CDN 서비스를 제공해 주는 [Cloudflare](https://www.cloudflare.com/)에 감사드립니다.
- 데모 웹사이트에서 에러 로깅 서비스를 제공해 주는 [Sentry](https://sentry.io/)에 감사드립니다.
## 기여자
### 코드 기여자
이 프로젝트는 기여해 주신 모든 분들 덕분에 존재합니다. [[기여하기](CONTRIBUTING.md)].
[![](https://opencollective.com/plyr/contributors.svg?width=890&button=false)](https://github.com/sampotts/plyr/graphs/contributors)
### 재정적 기여자
재정적 기여자가 되어 커뮤니티를 유지할 수 있도록 도와주세요. [[기여하기](https://opencollective.com/plyr/contribute)]
#### 개인
[![](https://opencollective.com/plyr/individuals.svg?width=890)](https://opencollective.com/plyr)
#### 단체
조직 단위로 이 프로젝트를 지원해 주세요.

여기에 웹사이트 링크와 함께 로고가 표시됩니다. [[Contribute](https://opencollective.com/plyr/contribute)]
[![](https://opencollective.com/plyr/organization/0/avatar.svg)](https://opencollective.com/plyr/organization/0/website)
[![](https://opencollective.com/plyr/organization/1/avatar.svg)](https://opencollective.com/plyr/organization/1/website)[![](https://opencollective.com/plyr/organization/2/avatar.svg)](https://opencollective.com/plyr/organization/2/website)
# 저작권 및 라이선스
[The MIT license](LICENSE.md)](#)

plyr

파일 탐색기

🚀 설치 가이드

2. Node.js

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

plyr

파일 탐색기

🚀 설치 가이드

2. Node.js

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README