멀티미디어 컨텐츠 삽입하기

object 태그

오디오파일, 비디오, 자바 애플릿, PDF등 다양한 멀티미디어 파일을 사용할 때 object태그를 사용한다.

기본형은 다음과 같다

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

data 속성에는 보여줄 멀티미디어 파일을 지정한다.

width, height 속성을 상요해 플레이어의 크기를 지정한다.

object 태그를 활용하여 음악, pdf, 비디오 삽입하기

 

embed 태그

src속성을 사용해 삽입할 멀티미디어 파일을 지정한다.

필요하다면 width, height 속성도 이용 가능하다.

<embed> 태그에는 닫는 태그가 없다.

기본형은 다음과 같다

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

오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있다.

따라서 HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려해야 하면, <embed> 태그를 사용해서 멀티미디어 파일을 삽입한다.

embed 태그를 이용하여 멀티미디어 삽입하기

 

<audio>, <video> 태그

이 태그들은 음악이나 비디오를 재생할 수 있는 컨트롤바와 컨텐츠를 삽입해주는 태그들이다.

기본형은 다음과 같다.

<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>

컨트롤 바가 필요한 경우 controls속성을 추가해주면 된다

width, height 도 사용 가능하다.

audio, video 태그로 멀티미디어 삽입하기

audio와 video 태그에 쓸 수 있는 속성들은 다음과 같다.

종류	설명
controls	플레이어 화면에 컨트롤 바를 표시합니다
autoplay	오디오나 비디오를 자동으로 실행합니다
loop	오디오나 비디오를 반복 재생합니다
muted	오디오나 비디오의 소리를 제거합니다
preload	페이지를 불러올 때 파일을 로딩할 방식을 지정합니다. auto, metadata, none중 하나를 사용 가능하며, 기본값은 auto입니다.
width, height	비디오 플레이어의 크기를 지정합니다.
poster="파일 이름"	비디오의 썸네일 이미지를 지정합니다

오디오 파일을 페이지 배경 음악처럼 사용하려면 autoplay속성과 loop속성은 사용하고 controls속성은 사용하지 않으면 된다. 대부분의 웹 브라우저에서는 소리가 있는 오디오/비디오 파일의 자동 재생을 금지하고 있다.