HTML5 멀티미디어 가이드: <video> 및 <audio> 태그 완벽 정복

 

웹 페이지에 생동감을 불어넣는 비디오와 오디오 삽입 방법은 현대 웹 개발에서 필수적인 요소입니다. 각 태그의 속성과 최적의 사용자 경험을 위한 호환성 설정 방법을 정리해 드립니다.

1. 오디오 삽입하기: <audio> 태그

<audio> 태그는 웹 페이지에 음악이나 음성 파일을 삽입할 때 사용합니다.

기본 문법과 속성

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

주요 속성 설명

• controls: 재생, 일시정지, 볼륨 조절 등 제어기를 표시합니다.
• autoplay: 페이지 로드 시 자동으로 재생합니다. (많은 브라우저에서 사용자 경험을 위해 차단될 수 있음)
• loop: 재생이 끝난 후 반복 재생합니다.
• muted: 음소거 상태로 시작합니다.
• preload: 페이지가 로드될 때 미디어를 어떻게 로드할지 결정합니다 (none, metadata, auto).

브라우저 호환성을 고려한 다중 소스 예제

브라우저마다 지원하는 오디오 포맷(MP3, Ogg, Wav)이 다를 수 있으므로 <source> 태그를 활용하는 것이 권장됩니다.

<audio controls>
  <source src="audio/sample.mp3" type="audio/mpeg">
  <source src="audio/sample.ogg" type="audio/ogg">
  <source src="audio/sample.wav" type="audio/wav">
  사용자의 브라우저가 오디오 태그를 지원하지 않습니다. <a href="audio/sample.mp3">파일 다운로드</a>
</audio>

2. 비디오 삽입하기: <video> 태그

<video> 태그는 영상 콘텐츠를 삽입하며, 오디오보다 시각적인 제어가 더 많이 필요합니다.

주요 속성 설명

• width / height: 비디오 플레이어의 너비와 높이를 설정합니다.
• poster: 비디오가 로드되기 전이나 재생 버튼을 누르기 전에 보여줄 썸네일 이미지 주소입니다.
• playsinline: 모바일 기기에서 전체화면으로 전환되지 않고 페이지 내에서 바로 재생되도록 합니다.

풍부한 비디오 예제 (자동 재생 및 배경 영상 설정)

웹사이트 메인 배경으로 비디오를 사용할 때 흔히 사용하는 설정입니다.

<video width="100%" height="auto" poster="images/thumbnail.jpg" autoplay muted loop playsinline>
  <source src="videos/background.mp4" type="video/mp4">
  <source src="videos/background.webm" type="video/webm">
  브라우저가 비디오를 지원하지 않습니다.
</video>

참고: 대부분의 최신 브라우저에서 autoplay는 muted 속성과 함께 사용되어야만 정상 작동합니다.

3. 브라우저별 호환성 및 포맷 체크

모든 환경에서 미디어가 정상적으로 재생되게 하려면 아래의 호환성 표를 참고하여 소스 파일을 준비하는 것이 좋습니다.

비디오 포맷 호환성

포맷 (Format)확장자주요 지원 브라우저

MP4 (H.264)	.mp4	Chrome, Edge, Safari, Firefox, Opera (범용성 최고)
WebM	.webm	Chrome, Firefox, Opera (고압축 효율)
Ogg	.ogv	Chrome, Firefox, Opera

오디오 포맷 호환성

포맷 (Format)확장자주요 지원 브라우저

MP3	.mp3	모든 주요 브라우저
Wav	.wav	Chrome, Edge, Firefox, Safari, Opera
Ogg	.ogg	Chrome, Edge, Firefox, Opera

4. 실무 팁: 최적의 사용자 경험을 위해

1. 대체 텍스트 및 링크 제공: 태그 내부에 "지원하지 않는 브라우저" 메시지와 함께 파일을 직접 다운로드할 수 있는 링크를 제공하세요.
2. 트랙 제공 (<track>): 자막이나 설명이 필요한 경우 <track> 태그를 사용하여 VTT 파일을 연결하면 접근성이 향상됩니다.
3. 파일 용량 최적화: 웹용으로 인코딩된 적절한 비트레이트의 파일을 사용하여 페이지 로딩 속도가 저하되지 않도록 주의하세요.

<video controls width="640">
  <source src="movie.mp4" type="video/mp4">
  <!-- 자막 추가 예시 -->
  <track src="subtitles_ko.vtt" kind="subtitles" srclang="ko" label="한국어">
</video>

이 가이드를 통해 다양한 기기와 브라우저 환경에서 끊김 없는 멀티미디어 서비스를 구축해 보시기 바랍니다.