plyr

Plyr은 HTML5 비디오/오디오, YouTube 및 Vimeo 임베드를 위한 간단하고 가볍고 접근성이 뛰어나며 사용자 정의 가능한 미디어 플레이어입니다. 최신 브라우저를 대상으로 하며 프레임워크나 jQuery 의존성 없이 순수 ES6 JavaScript로 작성되었고, 스타일은 Sass로 작성되어 CSS 사용자 정의 속성으로 노출됩니다. README에서 확인할 수 있는 주요 기능: - 형식 지원: 기본 HTML5 비디오 및 오디오 요소, 그리고 data-plyr-provider 및 data-plyr-embed-id 속성을 사용한 YouTube 및 Vimeo iframe 또는 일반 div의 점진적 향상. - 접근성: VTT 자막 및 화면 판독기 지원, 볼륨용 input type=range, progress 요소, 실제 버튼과 같은 의미론적 마크업. - 사용자 정의: CSS 사용자 정의 속성(예: --plyr-color-main)과 Sass 변수를 사용하여 플레이어를 전역적으로, 클래스별로 또는 인라인으로 다시 스타일링할 수 있습니다. - 반응형 레이아웃과 iframe 제공자를 위한 반응형 16:9 임베드 래퍼 클래스. - hls.js, Shaka Player 및 dash.js와의 스트리밍 재생 통합. - 모든 제공자에 걸친 표준화된 JavaScript API 및 이벤트로, YouTube와 Vimeo에 별도의 API 처리가 필요하지 않습니다. - 전체 화면(전체 창 모드로 대체), PIP(화면 속 화면), playsinline 지원, 키보드 단축키, 속도 제어, 다중 자막 트랙, 컨트롤 i18n 및 미리보기 썸네일. - 파트너 광고 통합 또는 사용자 정의 ads.tagUrl 옵션을 통한 수익화 후크. 설정은 간단합니다. CDN 또는 자체 호스팅 파일에서 plyr.css와 plyr.js(또는 폴리필 빌드)를 포함한 다음 new Plyr('#player')로 인스턴스화합니다. 사전 빌드된 압축 파일은 CDN 또는 unpkg에서 사용할 수 있으며, npm i && npm run build로 소스에서 빌드할 수도 있습니다. 아이콘용 SVG 스프라이트는 기본적으로 CDN에서 로드되며 옵션을 통해 재정의할 수 있습니다. README에는 색상, 컨트롤 간격 및 반경, 메뉴, 툴팁, 진행률 및 범위 스타일링, 자막 및 타이포그래피를 다루는 방대한 CSS 사용자 정의 속성 세트가 문서화되어 있어, 스타일시트를 포크하지 않고도 기존 디자인 시스템에 맞추는 것이 실용적입니다.