반응형
⚫audio 태그 : 서버에 저장된 소리 파일을 제공받아 재생하는 태그
🔘embed 태그 : 플래시 재생, object 태그 : 멀티미디어 파일 재생
=> 웹에서 사용한 소리 파일 : mp3 파일, ogg 파일 등
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>audio 태그</h1>
<hr>
<!-- autoplay 속성 : 자동 재생 기능을 제공하는 속성 - 속성값 생략 가능 -->
<!-- controls 속성 : 재생 관련 제어판을 기능을 제공하는 속성 - 속성값 생략 가능 -->
<!-- loop 속성 : 반복 재생 기능을 제공하는 속성 - 속성값 생략 가능 -->
<!-- preload 속성 : none, metadata, auto(기본) 중 하나를 속성값으로 설정 -->
<!--
<audio src="/web/html/audio/horse.mp3" autoplay controls loop preload="auto"></audio>
-->
<audio controls>
<!-- source 태그: 멀티미디어 파일을 제공하기 위한 태그 -->
<!-- type 속성 : 파일의 형태(MimeType)를 속성값으로 설정 -->
<source src="/web/html/audio/horse.ogg" type="audio/ogg">
<source src="/web/html/audio/horse.mp3" type="audio/mpeg">
</audio>
</body>
</html>
실행결과⬇️
⚫video 태그 : 서버에 저장된 동영상 파일을 제공받아 재생하는 태그
=> 동영상 파일 : mp4 파일, ogg 파일(ogv 파일), webm 파일 등
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>video 태그</h1>
<hr>
<video src="/web/html/video/movie.mp4" autoplay controls width="600"></video>
</body>
</html>
실행결과⬇️
반응형
'Frontend > HTML' 카테고리의 다른 글
| [HTML]14_input 태그 (0) | 2023.12.26 |
|---|---|
| [HTML]13_form 태그 (1) | 2023.12.26 |
| [HTML]10_iframe 태그 (0) | 2023.12.25 |
| [HTML]09_map 태그 (0) | 2023.12.25 |
| [HTML]08_anchor 태그 (0) | 2023.12.25 |
