audio와 video element는 어떻게 동작하나요?

Question

IT Interview Practice · Accepted Answer

`<audio>`와 `<video>`는 내장 컨트롤과 JavaScript API와 함께 미디어를 네이티브로 임베드합니다. 플러그인이 필요 없습니다.

```html
<video
  controls                    
  width="640"
  poster="thumbnail.jpg"      
  preload="metadata"          
>
  <source src="video.webm" type="video/webm" /> 
  <source src="video.mp4" type="video/mp4" />   
  <track kind="captions" src="caps.vtt" srclang="en" label="English" /> 
  Your browser does not support video.          
</video>
```

## 핵심 attribute

- **`controls`** — 이것이 없으면 UI가 나타나지 않습니다(JS로 제어해야 함).
- **여러 개의 `<source>`** — 브라우저는 지원하는 첫 번째 포맷을 사용합니다(크로스 브라우저를 위해 WebM/MP4).
- **`poster`** — 재생 전 자리 표시 이미지입니다.
- **`preload`** — `none` / `metadata` / `auto`. 필요할 때까지 큰 파일을 다운로드하지 않으려면 `metadata`를 사용하십시오.
- **`autoplay muted loop`** — 배경 영상용입니다(대부분의 브라우저는 자동 재생을 허용하려면 **`muted`를 요구**합니다).
- **`<track>`** — accessibility를 위한 자막(`.vtt` 파일)입니다.

## JavaScript로 제어하기

```js
const v = document.querySelector("video");
v.play();           // promise를 반환한다 (자동 재생이 차단되면 reject될 수 있음)
v.pause();
v.currentTime = 30; // 30초로 이동한다
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
```

`<audio>`는 시각적 프레임/poster만 없을 뿐 동일하게 동작합니다.

## 왜 중요한가

네이티브 미디어 element는 크로스 브라우저 재생, accessibility(`<track>`을 통한 자막), 커스텀 플레이어를 위한 완전한 JS API를 제공합니다.

포맷 대체 패턴, 자동 재생을 위한 `muted` 규칙, 성능을 위한 `preload`를 아는 것이 미디어 임베드의 실용적 핵심을 아우릅니다.

핵심 attribute

JavaScript로 제어하기

왜 중요한가

관련 질문