muxinc/media-chrome

어떤 프로젝트인가요?

핵심 기능

• 01네이티브 커스텀 엘리먼트 기반으로, 특정 프레임워크 없이 사용할 수 있습니다.
• 02표준 video 및 audio 엘리먼트와 여러 서드파티 플레이어에서 작동합니다.
• 03일반 HTML 태그를 사용해 컨트롤을 추가하거나 제거할 수 있습니다.
• 04일반 CSS로 스타일을 지정할 수 있습니다.
• 05핵심 엘리먼트용 React 래퍼 컴포넌트를 제공합니다.

활용 사례

• 웹사이트 디자인에 맞는 맞춤형 비디오 플레이어 만들기.
• 여러 플레이어 라이브러리를 사용하는 사이트에 일관된 재생 컨트롤 적용하기.
• 웹 앱에서 재생, 탐색, 재생 속도 조절 기능을 갖춘 오디오 플레이어 만들기.

빠른 시작

1. 1

   HTML 페이지에서 module script 태그를 사용해 jsDelivr CDN에서 Media Chrome을 불러옵니다

2. 2

   video 또는 audio 요소를 media-controller로 감싸고, 컨트롤 요소가 포함된 media-control-bar를 추가합니다

사용 전 알아둘 점

• !README에서는 새 프로젝트에 Video.js를 권장하며, Media Chrome은 Video.js와 함께 유지 관리됩니다.

포함된 컬렉션

토픽

자주 묻는 질문

media-chrome은(는) 무엇인가요?

어떤 JavaScript 프레임워크에서든 사용할 수 있는 네이티브 웹 컴포넌트 기반의 맞춤형 오디오·비디오 플레이어 컨트롤입니다. Media Chrome은 재생 버튼, 볼륨 및 재생 시간 조절 기능, 전체 화면 및 화면 속 화면 전환 버튼 등 미디어 플레이어 컨트롤을 만들기 위한 네이티브 커스텀 엘리먼트 모음입니다. 컨트롤은 일반 HTML 태그이므로 마크업을 수정하는 것만으로 추가하거나 제거할 수 있으며, 일반 CSS로 스타일을 지정합니다.

media-chrome은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

media-chrome은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

media-chrome은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. media-chrome의 마지막 커밋은 2026년 10월 23일입니다.

media-chrome은(는) 어디에 사용할 수 있나요?

웹사이트 디자인에 맞는 맞춤형 비디오 플레이어 만들기. 여러 플레이어 라이브러리를 사용하는 사이트에 일관된 재생 컨트롤 적용하기. 웹 앱에서 재생, 탐색, 재생 속도 조절 기능을 갖춘 오디오 플레이어 만들기.

media-chrome는 어떻게 설치하나요?

HTML 페이지에서 module script 태그를 사용해 jsDelivr CDN에서 Media Chrome을 불러옵니다 video 또는 audio 요소를 media-controller로 감싸고, 컨트롤 요소가 포함된 media-control-bar를 추가합니다

media-chrome은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/muxinc/media-chrome