[HTML] 4-5. 오디오와 비디오 삽입하기

2 minute read

4-5. 오디오와 비디오 삽입하기

< object > 태그

<object width="너비" height="높이" data="파일 경로"></object>

< embed > 태그

<embed src="파일 경로" width="너비" height="높이">

종류	확장자	설명
비디오	mp4	많이 사용하는 비디오 형식으로, 라이선스가 있지만 웹에서는 무료로 사용할 수 있다.
	webm	화질이 우수하고 무료라서 mp4와 함께 많이 사용한다.
오디오	mp3	대부분의 음원에서 사용하는 형식이다. 2017년 이후 라이선스가 종료되면서 무료로 사용할 수 있다.
	mp4, m4a	mp3의 문제점을 개선한 AAC 코덱을 사용한 파일 형식이다. 확장자는 mp4 뿐만 아니라 m4a를 사용하기도 한다.

HTML4까지는 웹 브라우저에 멀티미디어 파일을 삽입한 후에 재생하려면 플러그인 프로그램이 따로 필요했지만 HTML5에서는 웹 브라우저 안에서 멀티미디어 파일을 삽입하고 바로 재생할 수 있다.

따라서 웹 브라우저마다 플레이어가 다르며, 같은 웹 브라우저라 하더라도 버전에 따라 지원 상황이 달라질 수 있다.

오디오와 비디오 파일 삽입하기

<audio src="오디오 파일 경로" width="너비" height="높이" controls></audio>
<video src="비디오 파일 경로" width="너비" height="높이" controls></video>

< audio >, < video > 태그의 속성들

종류	설명
controls	플레이어 화면에 컨트롤 바를 표시한다.
autoplay	오디오나 비디오를 자동으로 실행한다.
loop	오디오나 비디오를 반복 재생한다.
muted	오디오나 비디오의 소리를 제거한다.
proload	페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다. 사용할 수 있는 값은 auto, metadata, none이고 기본값은 none이다.
width, height	비디오 플레이어의 너비와 높이를 지정한다. width나 height의 값 중에서 하나만 지정할 경우 나머지는 자동으로 계산해서 표시한다.
poster = “파일 이름”	< video > 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다.

오디오 파일을 BGM처럼 사용하려면 < audio > 태그에서 autoplay 속성과 loop 속성을 지정하고 controls 속성을 빼면 되는데, 현재 대부분 웹 브라우저에서는 오디오나 소리가 있는 비디오 파일의 자동 재생을 금지하고 있다.

< object > 태그와 < embed > 태그는 다양한 멀티미디어의 삽입이 가능하다. 모두 width와 height 속성을 가지며 < object > 태그는 data 속성, < embed > 태그는 src 속성으로 파일 경로를 지정한다.
< audio > 태그와 < video > 태그는 각각 오디오와 비디오 파일을 삽입한다. 두 태그는 공통되는 여러 속성들이 있는데, 그 중 width, height, controls 등은 기본이니 알아두자.
비디오 파일의 삽입 시에는 width를 지정하여 너비를 지정해주는 것이 좋다.
오디오 파일을 BGM처럼 사용할 수 있지만, 현재 대부분의 웹 브라우저에서는 오디오나 소리가 있는 비디오 파일의 자동 재생을 금지하고 있다.