[HTML] HTML 미디어 태그 완벽 정리 – 오디오, 비디오 활용법

crushed-taro 2025. 3. 16. 13:11

728x90

[HTML] HTML img 태그 필수 속성 – width, height, alt 속성 정리

[HTML] HTML 영역 나누기 – 웹페이지 구조화 태그 총정리 [HTML] HTML 영역 나누기 – 웹페이지 구조화 태그 총정리[HTML] HTML 표 만들기 – table, tr, td 태그 활용법 총정리 [HTML] HTML 표 만들기 – table, t

crushed-taro.tistory.com

1. 미디어 관련 태그

<audio></audio>
- 웹 브라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어 주는 태그

src		음악파일의 경로 지정
controls	"controls”	재생도구 출력 지정
autopaly	"autoplay”	자동 재생 여부 지정
loop	"loop”	반복여부 지정
preload	”none”, “metadata”, “auto”	none: 미리 다운로드 하지 않음 metadata: 기본 정보는 가져옴 (크기, 첫 프레임, 오디오 길이 등) auto: 미리 다운로드 함

<audio src="경로" 
	controls="controls" 
	autoplay="autoplay" 
	loop="loop" preload="none" or "metadata" or "auto">
</audio>

브라우저별 사용 가능한 파일

형식	IE	크롬	파이어폭스	사파리	오페라
MP3	O	O	X	O	X
OGG	X	O	O	O	O
WAV	X	O	O	X	O

<video></video>
- 웹 브라우저에서 플러그인의 도움 없이 영상을 재생할 수 있게 만들어 주는 태그

<video src="경로" 
	controls="controls" 
	autoplay="autoplay" 
	loop="loop" preload="none" or "metadata" or "auto"
	poster="이미지 경로" width="크기" height="크기">
</video>

2. 예제 코드

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>미디어 관련 태그들</title>
 </head>
 <body>
 <!--HTML5부터는 플러그인을 사용하지 않고 미디어(비디오, 오디오)를 직접 html문서에서 실행시킬 수 있는 태그를 제공한다.-->
 <h1>미디어 관련 태그</h1>
 <h3>오디오 관련 태그</h3>
 <audio src="sample/audio/major.mp3" controls="controls" loop="loop"></audio>
 <hr>
 <h3>비디오 관련 태그</h3>
 <video src="sample/video/video1.mp4" controls="controls"></video>
 </body>
</html>

3. 결과 화면

728x90