오디오 & 비디오 : <audio>, <video>
-
웹 사이트에서 가장 많이 사용하는
멀티미디어 형태 -
HTML에서는
<audio>태그와<video>태그로
멀티미디어 파일을 더 편리하게 삽입할 수 있다.
<audio>태그
-
배경음악, 효과음 등 오디오 파일을 삽입할 때 사용
-
<audio>태그의 속성- src : 오디오 파일명(경로)설정
- controls : 화면에 오디오 플레이어(컨트롤 바) 표시
- autoplay : 자동재생(크롬은 정책적으로 자동재생 허용X)
-
기본문법
<audio src="오디오 파일 경로"></audio>사용예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오디오 파일 삽입하기</title>
</head>
<body>
<audio src="medias/Paper+plane_s+adventure.mp3" controls></audio>
</body>
</html>
<video>태그
-
비디오 파일을 삽입할 때 사용
-
<video>태그의 속성- src : 오디오 파일명(경로)설정
- width : 비디오 영상의 너비(가로)지정
- height : 비디오 영상의 높이(세로)지정
- controls : 화면에 오디오 플레이어(컨트롤 바) 표시
- autoplay : 자동재생(크롬은 정책적으로 자동재생 허용X)
- loop : 반복재생
- poster="파일 이름" : 비디오가 재생되기 전, 화면에 표시될 이미지 지정
-
기본문법
<video src="비디오 파일 경로" width="너비" height="높이"></video>사용예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비디오파일 삽입하기</title>
</head>
<body>
<video src="medias/salad.mp4" controls width="500" height="300"></video>
</body>
</html>
<audio> + <video>태그 속성
- controls : 화면에 컨트롤 바 표시
- autoplay : 자동재생(크롬브라우저에서는 허용 불가)
- loop : 반복재생
- muted : 오디오, 비디오 소리제거
- preload
- 웹 페이지를 불러올 때 오디오, 비디오 파일을 어떻게 로딩할 지 지정
- 기본값 : preload="auto"
- 사용할 수 있는 값 : auto, metadata, none
참고
- Do it! HTML+CSS+자바스크립트 웹 표준의 정석
- HTML/CSS 입문
