Multimedia tag and property

단순한 정적 이미지를 넘어 동영상과 오디오를 삽입하면 훨씬 풍부한 사용자 경험을 제공할 수 있습니다.

---

1. 비디오 태그 <video>

웹 페이지 내에서 동영상을 재생할 때 사용합니다.

• 동작 방식: 이미지와 달리 닫는 태그(</video>)가 필요하며, 태그 사이에 "브라우저가 비디오를 지원하지 않습니다"라는 안내 문구를 넣을 수 있습니다.
• 주요 속성:
  • src: 비디오 파일의 경로를 지정합니다.
  • controls: 재생, 일시정지, 볼륨 등 컨트롤 바를 표시합니다. (가장 많이 쓰임)
  • autoplay: 페이지가 로드되면 자동으로 재생합니다. (대부분의 브라우저에서 muted와 함께 써야 작동함)
  • loop: 영상이 끝나면 처음부터 다시 재생합니다.
  • poster: 영상이 로딩 중이거나 재생 전일 때 보여줄 썸네일 이미지를 지정합니다.

---

2. 오디오 태그 <audio>

웹 페이지에 음악이나 음성 파일을 삽입할 때 사용합니다.

• 동작 방식: 비디오와 마찬가지로 src와 controls 속성을 기본으로 사용합니다.
• 특징: controls 속성이 없으면 화면에 아무것도 나타나지 않으므로 주의해야 합니다.
• 주요 속성:
  • src: 오디오 파일 경로입니다.
  • controls: 재생 제어기를 표시합니다.
  • muted: 처음 시작할 때 소리를 끈 상태로 시작합니다.
  • preload: 페이지를 열 때 파일을 미리 다운로드할지 정합니다 (auto, metadata, none).

---

3. 소스 태그 <source> (호환성 확보)

브라우저마다 지원하는 파일 형식(mp4, webm, ogg 등)이 다를 수 있기 때문에, 여러 형식의 파일을 준비하여 호환성을 높일 때 사용합니다.

HTML

 

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

---

4. 실전 예제 코드: "자동 재생되는 배경 영상"

웹사이트 첫 화면에서 소리 없이 반복 재생되는 배경 영상을 만들 때 사용하는 조합입니다.

HTML

 

<video width="100%" autoplay muted loop poster="fallback-image.jpg">
  <source src="background-vid.mp4" type="video/mp4">
  귀하의 브라우저는 비디오 재생을 지원하지 않습니다.
</video>

<audio controls>
  <source src="background-music.mp3" type="audio/mpeg">
  오디오를 재생할 수 없습니다.
</audio>

---

📋 멀티미디어 속성 요약표

속성명	의미	비고
controls	컨트롤 바 노출	사용자가 조작하려면 필수
autoplay	자동 재생	muted와 함께 써야 브라우저가 차단 안 함
loop	반복 재생	배경 영상이나 BGM에 유용
muted	음소거	자동 재생을 위한 필수 파트너
poster	미리보기 이미지	비디오 로딩 전 썸네일 역할

---

학습 정리

• **<video>**와 **<audio>**는 사용자 편의를 위해 controls 속성을 주는 것이 기본이다.
• 브라우저 정책상 **autoplay**는 반드시 **muted**와 함께 사용해야 하는 경우가 많다.
• 여러 기기를 배려한다면 <source> 태그로 다양한 확장자를 제공하는 것이 좋다.

---

웹의 생동감을 담당하는 멀티미디어 태그를 마스터하셨습니다!

---