[HTML 이미지 & 미디어 삽입] #02 <audio>, <video> 태그 기본 사용법

 

 

안녕하세요 토스트데브입니다.
이번 글에서는 웹페이지에 오디오와 비디오를 삽입할 수 있는 HTML 태그인 <audio>와 <video> 태그에 대해 알아보겠습니다.
이제는 텍스트와 이미지뿐 아니라, 소리와 영상도 웹 페이지의 중요한 구성 요소입니다.
HTML5에서는 플러그인 없이도 브라우저에서 미디어 재생이 가능해졌죠!
지금부터 기본 사용법과 속성들을 간단한 예제와 함께 정리해보겠습니다.

 

 

🎵 <audio> 태그 – 오디오 삽입하기

✅ 기본 구조

<audio src="music.mp3" controls></audio>

 

• <audio> 태그는 오디오 파일을 삽입하고 재생할 수 있게 해줍니다.
• controls 속성을 추가하면 사용자가 재생/정지/볼륨 조절 등의 UI를 직접 제어할 수 있습니다.

 

🎯 주요 속성

속성	설명
src	오디오 파일 경로 (.mp3, .ogg, .wav 등)
controls	재생 UI 노출
autoplay	페이지 로딩 시 자동 재생
loop	반복 재생
muted	음소거 상태로 시작
preload	사전 로딩 전략 (none, metadata, auto)

 

 

🔁 예시

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

 

 

🎥 <video> 태그 – 영상 삽입하기

✅ 기본 구조

<video src="movie.mp4" controls></video>

 

• <video> 태그는 MP4, WebM, Ogg 형식의 영상 파일을 삽입할 수 있습니다.
• 브라우저에서 바로 재생 가능하며, controls 속성으로 재생 바, 정지, 볼륨 등의 조작 UI를 보여줄 수 있습니다.

 

🎯 주요 속성

속성	설명
src	비디오 파일 경로
controls	사용자 조작 UI 노출
autoplay	자동 재생
loop	반복 재생
muted	음소거 시작
poster	재생 전 썸네일 이미지
width, height	영상의 크기 설정

 

 

📽️ 예시

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

 

 

🧩 실무 팁

• 여러 형식을 <source> 태그로 제공하면 브라우저 호환성이 높아집니다.
• 자동 재생(autoplay) 시 대부분 브라우저는 muted 속성이 함께 있어야 작동합니다.
• 서버에서 MIME 타입을 정확히 설정해야 영상/음성이 정상적으로 출력됩니다.
• 모바일 환경에서는 autoplay가 제한되는 경우가 많으므로 주의!

 

 

✅ 오디오 & 비디오의 공통점

특징	설명
HTML5 기본 태그	플러그인 없이 HTML만으로 구현 가능
<source> 지원	다양한 포맷 대응
controls 지원	UI 자동 생성
접근성 향상	자막(track 태그)도 추가 가능

 

 

📝 마무리

오디오와 비디오는 단순한 보조 요소를 넘어, 웹 사용자 경험을 풍부하게 만들어주는 핵심 콘텐츠가 되었습니다.
HTML5의 <audio>와 <video> 태그는 간단하지만 매우 강력하며,
적절한 속성과 조합을 사용하면 사용자가 더욱 편리하게 콘텐츠를 즐길 수 있습니다.

앞으로는 자막 삽입을 위한 <track> 태그나 JavaScript와 연동한 제어 방법도 함께 익혀보면 좋겠죠?
그럼 다음 글에서 더 유용한 HTML 정보를 가지고 찾아오겠습니다!

 

#HTML #오디오태그 #비디오태그 #audio태그 #video태그 #웹미디어삽입 #HTML미디어 #웹개발기초 #프론트엔드기초  
#코딩입문 #웹접근성 #toastdev #HTML5미디어 #웹퍼블리싱