Video & Audio API

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

HTML5의 <video>와 <audio> 태그는 브라우저 네이티브로 미디어 재생을 지원합니다. 이 태그들은 JavaScript를 통해 제어할 수 있는 풍부한 미디어 API를 제공하여, 단순 재생을 넘어 넷플릭스나 유튜브처럼 커스텀 디자인이 적용된 자체 미디어 플레이어를 만들 수 있습니다.

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

// 커스텀 비디오 플레이어 제어 예제
/*
<video id="myVideo" src="sample.mp4" width="400"></video>
<button id="playBtn">재생</button>
<div id="timeDisplay">0:00</div>
*/

// const video = document.getElementById('myVideo');
// const playBtn = document.getElementById('playBtn');
// const timeDisplay = document.getElementById('timeDisplay');

// 재생 / 일시정지 토글 함수
function togglePlay() {
  // if (video.paused) {
  //   video.play();
  //   playBtn.innerText = '일시정지';
  // } else {
  //   video.pause();
  //   playBtn.innerText = '재생';
  // }
  console.log("비디오 재생 상태가 토글되었습니다.");
}

// 시간 업데이트 이벤트 리스너 (재생 중 주기적으로 발생)
// video.addEventListener('timeupdate', () => {
//   const current = Math.floor(video.currentTime);
//   timeDisplay.innerText = current + '초';
// });

console.log("Video API를 통해 커스텀 UI와 네이티브 미디어 엔진을 동기화할 수 있습니다.");

실행 결과