[HTML] 개념 정리 7 :: 음악 및 동영상 태그 <audio> <video> <source>

HTML5에서 음악 및 동영상 태그

HTML5는 멀티미디어 콘텐츠를 웹페이지에 삽입하기 위해 <audio>와 <video> 태그를 도입함. 이 태그들은 플러그인 없이도 음악과 동영상을 재생할 수 있는 강력한 기능을 제공하며, 다양한 속성을 통해 사용자 경험을 강화할 수 있음.

---

1. <audio> 태그: 음악 삽입

<audio> 태그는 음악이나 음성 파일을 삽입하고 재생하는 데 사용됨.

기본 구조

<audio src="example.mp3" controls>
  브라우저가 오디오 태그를 지원하지 않습니다.
</audio>

주요 속성

• src: 오디오 파일 경로.
• controls: 재생 컨트롤 표시 (재생, 일시정지, 볼륨 조절 등).
• autoplay: 페이지 로드 시 자동 재생.
• loop: 재생이 끝난 후 반복 재생.
• muted: 기본적으로 음소거 상태로 설정.
• preload: 로드 방식 설정 (auto, metadata, none).

예제: 속성 조합

<audio src="music.mp3" controls autoplay loop muted>
  브라우저가 오디오 태그를 지원하지 않습니다.
</audio>

---

2. <video> 태그: 동영상 삽입

<video> 태그는 동영상을 삽입하고 재생하는 데 사용됨.

기본 구조

<video src="example.mp4" controls>
  브라우저가 비디오 태그를 지원하지 않습니다.
</video>

주요 속성

• src: 동영상 파일 경로.
• controls: 재생 컨트롤 표시.
• autoplay: 페이지 로드 시 자동 재생.
• loop: 동영상 재생 종료 후 반복 재생.
• muted: 기본적으로 음소거 상태로 설정.
• preload: 로드 방식 설정 (auto, metadata, none).
• width, height: 동영상 크기 지정.
• poster: 동영상 로딩 중에 표시될 이미지 경로.

예제: 속성 조합

<video src="video.mp4" width="640" height="360" controls autoplay loop muted poster="poster.jpg">
  브라우저가 비디오 태그를 지원하지 않습니다.
</video>

---

3. <source> 태그: 다중 파일 포맷 지원

HTML5에서는 <source> 태그를 사용해 다양한 파일 포맷을 제공할 수 있음. 브라우저는 지원 가능한 파일 형식을 자동으로 선택함.

예제: <audio>와 <source>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  브라우저가 오디오 태그를 지원하지 않습니다.
</audio>

예제: <video>와 <source>

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  브라우저가 비디오 태그를 지원하지 않습니다.
</video>

---

4. 이벤트 및 자바스크립트 활용

HTML5 멀티미디어 태그는 JavaScript와 함께 사용할 수 있어 재생, 일시정지, 상태 확인 등을 프로그래밍적으로 제어 가능.

예제: 동영상 제어

<video id="myVideo" width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">재생</button>
<button onclick="pauseVideo()">일시정지</button>

<script>
  const video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }
</script>

---

5. 지원 파일 포맷

(1) 오디오 파일

• MP3 (audio/mpeg): 대부분의 브라우저에서 지원.
• Ogg (audio/ogg): 오픈 소스 형식.
• AAC (audio/aac): iOS 및 일부 브라우저에서 지원.

(2) 동영상 파일

• MP4 (video/mp4): 가장 널리 사용되는 형식, H.264 코덱 기반.
• WebM (video/webm): 오픈 소스 형식.
• Ogg (video/ogg): 오픈 소스 형식.

---

결론

HTML5의 <audio>와 <video> 태그는 멀티미디어 콘텐츠를 웹페이지에 삽입하는 현대적인 방법을 제공함. 다양한 속성과 <source> 태그를 활용하면 사용자 경험을 강화할 수 있으며, JavaScript와의 연동을 통해 동적인 제어도 가능함.

이 글이 HTML5 음악 및 동영상 태그 활용에 도움이 되길 바람! 😊