Video & Audio API | Minstudio

커스텀 미디어 플레이어 구축

HTML5의 <video>와 <audio> 태그는 브라우저 내장(Native) 재생 기능을 지원합니다. 하지만 실무에서는 제공되는 기본 UI 대신, JavaScript Media API를 제어하여 넷플릭스나 유튜브처럼 브랜드 디자인이 적용된 자체 커스텀 플레이어를 제작합니다.

재생, 일시정지, 볼륨 조절은 물론, 현재 재생 시간(currentTime), 전체 재생 시간(duration), 버퍼링 상태, 재생 속도 등 비디오의 모든 상태를 스크립트로 조작하고 이벤트를 감지할 수 있습니다.

1. 네이티브 UI vs 커스텀 제어 구조

브라우저 기본 UI를 숨기고 JS로 HTML 버튼과 비디오를 연결하는 방식입니다.

2. 주요 속성 (Properties)

미디어 요소의 현재 상태를 읽거나 설정할 수 있는 속성들입니다.

속성명	타입	읽기/쓰기	설명
`currentTime`	Number	읽기/쓰기	현재 재생 중인 시간(초 단위)을 나타냅니다. 값을 할당하여 원하는 시점으로 탐색(Seek)할 수 있습니다.
`duration`	Number	읽기 전용	미디어의 전체 길이를 초 단위로 반환합니다. 메타데이터가 로드되지 않았다면 `NaN`을 반환합니다.
`volume`	Number	읽기/쓰기	볼륨 크기를 0.0(음소거)부터 1.0(최대) 사이의 값으로 설정하거나 반환합니다.
`muted`	Boolean	읽기/쓰기	음소거 여부를 설정합니다. (`true` 설정 시 소리가 나지 않음)
`paused`	Boolean	읽기 전용	현재 미디어가 일시정지 상태인지(재생 중이 아닌지)를 반환합니다.
`ended`	Boolean	읽기 전용	재생이 완전히 끝났는지를 반환합니다.
`playbackRate`	Number	읽기/쓰기	재생 속도를 설정합니다. (예: 1.0은 정상 속도, 2.0은 2배속)
`src`	String	읽기/쓰기	미디어 파일의 경로(URL)를 가져오거나 동적으로 변경합니다.

3. 주요 메서드 (Methods)

스크립트를 통해 미디어를 직접 조작하는 함수들입니다.

메서드명	설명
`play()`	미디어 재생을 시작합니다. 이 메서드는 Promise를 반환하므로, 자동 재생이 차단된 경우 에러를 캐치할 수 있습니다.
`pause()`	미디어 재생을 일시정지합니다. (stop 메서드는 없으며, `pause()` 후 `currentTime = 0`으로 정지를 구현합니다.)
`load()`	미디어 요소가 네트워크에서 미디어 데이터를 다시 처음부터 로드하도록 강제합니다. `src`를 변경한 후에 호출해야 합니다.
`canPlayType(type)`	브라우저가 해당 MIME 타입(예: 'video/mp4')을 재생할 수 있는지 검사합니다. `"probably"`, `"maybe"`, 또는 `""`(빈 문자열)을 반환합니다.

4. 주요 이벤트 (Events)

미디어의 상태가 변할 때 발생하는 이벤트들입니다. addEventListener를 통해 감지합니다.

이벤트명	발생 시점 및 활용
`timeupdate`	`currentTime`이 바뀔 때마다 연속적으로 발생합니다. (보통 1초에 4~5회) 진행률 바(Progress bar)를 업데이트할 때 가장 많이 사용됩니다.
`play` / `pause`	재생이 시작되거나 일시정지될 때 발생합니다. 재생/일시정지 버튼의 아이콘을 변경할 때 사용합니다.
`ended`	미디어 재생이 끝까지 도달했을 때 발생합니다. 다음 영상으로 넘어가거나 재생 버튼을 리셋할 때 유용합니다.
`loadedmetadata`	미디어의 메타데이터(전체 길이 `duration`, 해상도 등)를 성공적으로 읽어왔을 때 발생합니다. 총 재생 시간을 화면에 표시할 수 있는 첫 번째 시점입니다.