[STUDY] 멀티미디어 태그: 비디오와 오디오 (video, audio) 정리

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

웹 페이지에 동영상을 재생하기 위한 인라인 요소이다. 브라우저가 해당 영상을 지원하지 않을 때를 대비해 태그 사이에 대체 문구를 작성한다.

• 주요 속성:
  • controls: 재생, 일시정지, 볼륨 등 컨트롤러를 표시한다.
  • poster: 영상 재생 전 보여줄 썸네일 이미지 경로를 지정한다.
  • loop / muted: 반복 재생과 음소거를 설정한다.
  • autoplay: 자동 재생 설정이다. 크롬 등 최신 브라우저에서는 muted가 함께 설정되어야 작동한다.
  • playsinline: iOS 사파리에서 영상 재생 시 전체 화면으로 전환되는 것을 방지하고 페이지 내에서 재생되게 한다.
• preload: 페이지 로드 시 영상을 미리 다운로드할지 결정한다. (none, metadata, auto)

2. <audio> 태그: 오디오 삽입

음악이나 소리를 재생하기 위한 요소이다. 비디오 태그와 속성이 거의 유사하다.

• 주요 특징: 비디오와 달리 poster나 playsinline 같은 시각적 속성은 없으며, controls 속성이 없으면 화면에 표시되지 않는다.
• 자동 재생 주의: 사용자 경험을 위해 대부분의 브라우저에서 오디오 자동 재생(autoplay)을 기본적으로 차단하고 있다.

---

3. <source> 태그와 크로스 브라우징

브라우저마다 지원하는 비디오/오디오 파일 형식이 다르기 때문에, 여러 포맷을 동시에 제공하여 호환성을 높일 때 사용한다.

• 작동 원리: 위에서부터 순서대로 확인하며 브라우저가 재생 가능한 첫 번째 파일을 선택한다.
• 성능 팁: type 속성(MIME 타입)을 반드시 명시해야 한다. 그래야 브라우저가 지원하지 않는 파일을 미리 다운로드하지 않아 성능 저하를 막을 수 있다.

HTML

 

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

---

요약 및 주의사항

구분	<video>	<audio>
공통 속성	src, controls, loop, muted, autoplay, preload
전용 속성	poster, playsinline, width, height	-
크기 조절	HTML 속성보다 CSS로 조절하는 것을 권장한다.	-
자동 재생	muted와 함께 사용해야 안정적으로 작동한다.