<audio>와 <video>는 내장 컨트롤과 JavaScript API와 함께 미디어를 네이티브로 임베드합니다. 플러그인이 필요 없습니다.
html
Your browser does not support video.
controls — 이것이 없으면 UI가 나타나지 않습니다(JS로 제어해야 함).<source> — 브라우저는 지원하는 첫 번째 포맷을 사용합니다(크로스 브라우저를 위해 WebM/MP4).poster — 재생 전 자리 표시 이미지입니다.preload — none / metadata / auto. 필요할 때까지 큰 파일을 다운로드하지 않으려면 metadata를 사용하십시오.autoplay muted loop — 배경 영상용입니다(대부분의 브라우저는 자동 재생을 허용하려면 muted를 요구합니다).<track> — accessibility를 위한 자막(.vtt 파일)입니다.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를 아는 것이 미디어 임베드의 실용적 핵심을 아우릅니다.