Front/HTML
HTML - 문서 삽입 태그, 오디오/비디오 태그
by Hyeon_
2021. 12. 5.
문서 삽입 태그 <iFrame>
- <iFrame> 태그
- 현재의 html 문서 내에 다른 문서 포함
- <iFrame> 태그 만들어서 영역 만든 후 <map>의 <area>에서 target = "ifame이름" 지정
- iframe의 위치 설정 중요!! -> css로 크키, 위치 등 속성 설정
오디오 태그 <audio>
<audio> 태그 속성
<audio src="audio.mp3" preload="auto" controls loop></audio>
<source> 태그
- 미디어 파일 지정
- 여러 미디어 파일을 한꺼번에 지정
- 브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에 한 가지 파일만 사용했을 경우 일부 브라우저에서 지원하지 않는 경우 발생
- 따라서 여러 유형의 미디어 파일 지정
<audio>
<source src="a.ogg" type="audio/ogg">
<source src="a.mp3" type="audio/mpec">
</audio>
audio.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오디오 태그</title>
</head>
<body>
<div>
<audio src="media/audio.mp3" preload="auto" controls loop></audio>
</div>
</body>
</html>
비디오 태그 <video>
- 비디오 파일 재생
- mp4, ogv, webm 파일 형식
비디오 파일 속성
<track> 태그
- 자막 표시
- WebVTT 형식 파일(.vtt)
- Web Video Text Tracks
video.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비디오 태그</title>
</head>
<body>
<div>
<video poster="media/poster.jpg" width="640" height="360" controls>
<source src="media/Wildlife.mp4" type="video/mp4"></source>
<track src="media/track.vtt" kind="captions" srclang="ko" label="Korean"></track>
<track src="media/track2.vtt" kind="captions" srclang="eng" label="English"></track>
<track src="media/track2.vtt" kind="captions" srclang="chn" label="Chinese"></track>
<track src="media/track2.vtt" kind="captions" srclang="jp" label="Japanese"></track>
</video>
</div>
</body>
</html>
