1. 오디오 태그
<audio src="파일 위치 경로 or URL">
<audio src="sound.mp3">
<audio src="sound.mp3" controls autoplay loop>
* HTML5부터 지원
* 속성
controls | 컨트롤러 표시 유무 |
autoplay | 자동 실행 설정 |
loop | 무한 반복 설정 |
muted | 음소거 설정 |
* 오디오 파일 포맷 지원
mp3 | Chrome, Firefox, Safari |
ogg | Chrome, Firefox, Opera |
wav | Chrome, Firefox, Safari, Opera |
2. 오디오 태그 예시
<body>
<h2>AUDIO 태그</h2>
<audio src="./SAMPLE_1.MP3" controls autoplay loop></audio>
<audio src="https://blogattach.naver.net/87129b2d320c0db8907d102510fb80fb590cf889/20120101_178_blogfile/realminus1_1325394501355_74i9HO_MP3/SAMPLE_2.MP3" controls autoplay loop></audio>
</body>
3. 비디오 태그
<video src="파일 위치 경로 or URL
<video src="video.mp4">
<video src="video.mp4" controls autoplay loop>
* HTML5부터 지원
* 태그 속성
controls | 컨트롤러 표시 유무 |
autoplay | 자동 재생 설정 |
loop | 무한 반복 설정 |
muted | 음소거 설정 |
preload | 웹 사이트 로딩시 사전에 영상을 다운로드 할지 지정 |
poster | 시작 화면의 썸네일 설정 |
* 비디오 파일 포맷 지원
mp4 | Chrome, Firefox, Opera, Safari |
webm | Chrome, Firefox, Opera |
ogg | Chrome, Firefox, Opera |
4. 비디오 태그 예시
<body>
<h2>VIDEO 태그</h2>
<video src="day04-4.mp4" controls loop autoplay></video>
<video src="day04-4.mp4" controls loop poster="daum.png"></video>
<video src="day04-4.mp4" controls loop autoplay width="300px"></video>
<video src="day04-4.mp4" controls loop autoplay height="100px"></video>
<video src="day04-4.mp4" controls loop autoplay height="100px" width="300px"></video>
</body>
5. 멀티미디어 대체 태그
* <embed> : 임베디드 태그로 audio, video, image, pdf 등 태그 대신함
* <iframe> : 아이프레임 태그로 embed와 같은 기능을 하지만 외부 사이트를 연결하기 위해 주로 사용한다.(사이트 보안 관련)
<body>
<embed src="SAMPLE_1.mp3" type="" controls/>
<embed src="day04-4.mp4" type="video" controls/>
<embed src="day04-4.pdf" width="500px" height="800px" type="application/pdf" controls />
<iframe src="https://www.koreaisacademy.com/"></iframe>
</body>
'FrontEnd > HTML' 카테고리의 다른 글
[HTML] HTML 입력 폼 태그, 이미지 태그 (0) | 2022.09.15 |
---|---|
[HTML] HTML 리스트, 테이블 태그 (0) | 2022.09.15 |
[HTML] HTML 시맨틱, 레이아웃, 텍스트 태그 (0) | 2022.09.15 |
[HTML] HTML의 개요, 구성요소, 문서구조 (0) | 2022.09.14 |