embed 태그 / aidio 태그 / video 태그의 사용

1. embed 요소

---

 

- 외부 애플리케이션이나 상호작용 콘텐츠를 위한 컨테이너

- HTML4.01 에서는 embed 태그를 지원하지 않는다.

 

속성	값	설명
src	"URL"	내장되는 외부 파일의 주소/이름
height	"픽셀"	내장되는 콘텐츠의 높이
width	"픽셀"	내장되는 콘텐츠의 폭
type	"미디어타입"	내장되는 콘텐츠의 미디어 타입

 

 

 

 

2. audio 요소

---

 

- 외부 플러그인의 도움 없이 오디오 재생

 

* 사용법

<audio src="오디오 파일 주소">

audio요소를 지원하지 않는 브라우저에서 대체 표시할 내용

</audio>

 

* 활용법

<audio src="song.mp3">

<embed src="song.mp3">

</audio>

 

속성	값	설명
src	"URL"	재생할 오디오 파일의 URL
autoplay	"속성값"	- 웹 문서 로딩 시에 오디오를 자동으로 재생할 지 여부	- 속성값 없이 사용 가능    → 속성명만 표시 - 속성값을 사용하는 경우    → 속성명="속성명"    > autoplay="autoplay"    > controls="controls"    > loop="loop"    > muted="muted"
controls	"속성값"	오디오 제어기 (재생, 일시정지, 볼륨 등) 의 표시 여부
loop	"속성값"	오디오의 반복 재생 여부
muted	"속성값"	음소거 여부
preload	"none" - 사용자가 재생을 시작하기 전까지는 웹브라우저가 오디오 파일을 미리 로드하지 않음 "auto" (default) - 페이지가 로드될 때 전체 파일을 자동으로 로드 "metadata" - 사용자가 재생시키기 전까지는 오디오의 메타 정보(크기, 프레임 등)만 로드	웹 문서가 로딩될 때 오디오의 로딩상태 제어

 

※ 웹에서 주로 사용되는 오디오 형식은 MP3, Wav, Ogg 등이 있다.

※ 각 브라우저/버전마다 지원되는 오디오 파일 형식이 다르다.

 

오디오 형식	브라우저
	크롬 (52)	IE (11)	파이어폭스 (48)	오페라 (37)	사파리 (9.1)
MP3	O	O	O	O	O
Wav	O	X	O	O	O
Ogg	O	X	O	O	X

 

 

- 다양한 포맷을 지원하는 <source> 태그

 > 하나의 소스파일에 대해 서로 다른 형식을 갖는 여러 파일을 동시에 지정하기 위한 태그

 > <audio>/<video> 태그의 src 속성의 역할을 대신함

 > 하위태그로, 여러개 지정 가능 → 가장 위의 <source>태그부터 차례로 지원하는 형식을 찾아서 재생

 

속성	값	내용
src	"URL"	재생할 미디어 파일의 URL
type	"MIME형식"	재생할 파일의 MIME 형식 - "audio/mp3" - "audio/wav" - "audio/ogg"

 

 

 

 

3. video 요소

---

 

- 비디오 재생

 

* 사용법

<video src="비디오 파일 주소">

video요소를 지원하지 않는 브라우저에서 대체 표시할 내용

</video>

 

* audio 태그의 속성을 그대로 사용

> 위의 audio 태그의 속성을 정리해둔 표를 참고하면 된다.

> 추가로 width, height, poster 등의 속성이 있다.

 

* poster="URL"

> 지정한 비디오 데이터가 설정되어 있지 않거나 비디오가 로딩되는 동안에 보여줄 이미지를 지정

 

* 활용법

<video src="bunny.mp4" controls width="400" height="300"

    poster="bunny_poster.jpg">

현재의 브라우저는 video 요소를 지원하지 않습니다.

</video>

 

※ 웹에서 주로 사용되는 비디오 형식은 MP4, WebM, Ogg 등이 있다.

 

비디오 형식	브라우저
	크롬 (52)	IE (11)	파이어폭스 (48)	오페라 (37)	사파리 (9.1)
MP4	O	O	O	O	O
WebM	O	X	O	O	O
Ogg	O	X	O	O	X

 

 

 

4. 오디오/비디오 재생 구간 지정 방법

---

 

> 미디어 콘텐츠를 재생할 때 특정 구간을 지정하여 재생

> src="파일명#t=[시작시간][, 종료시간]"

> 시간 표시 형식 → 시:분:초

 

* 활용법

 

> src="video.mp4#t=1:20:32, 2:05:00"

→ 1시간 20분 32초 ~ 2시간 5분까지 재생

 

> src="video.mp4#t=10, 20"

→ 10초~20초까지 재생

 

> src="video.mp4#t=,10"

→ 처음부터 10초까지 재생

 

> src="video.mp4#t=20"

→ 20초부터 재생

 

 

 

5. 자막 처리를 위한 <track> 태그

---

 

 

- 여러 언어나 비디오 설명을 제공하거나 또는 자막이나 캡션 같이 시간이 지정된 텍스트 파일을 지정

- <autio>/<video> 태그의 하위 태그로 사용

 

<video src="video_track.mp4" controls autoplay loop>

<track src="video_track.vtt" kind="subtitles" srclang="ko" label="예제 자막표시" default>

</video>

 

속성	값	설명
src	"URL"	※ 필수항목 텍스트 트랙파일(*.vtt)의 URL을 지정
kind	"속성값"	텍스트 트랙의 종류를 지정 - subtitles : 비디오의 자막을 정의 - captions : 대화나 사운드 효과를 글로 옮기거나 번역한것 - descriptions : 비디오 내용에 대한 텍스트 형식의 설명을 정의 - chapters : 장의 제목으로 미디어 자원을 탐색하기 위한 것 - metadata : 스크립트에서 사용하기 위한 내용을 정의
label	"텍스트"	사용자가 읽을 수 있는 트랙의 제목을 지정
srclang	"언어코드"	텍스트 트랙 데이터의 언어를 지정
default	-	사용자가 별도의 트랙을 지정하지 않는 경우 기본 트랙으로 활성화 되어야 함을 표시

 

※ track 파일의 형식

 

파일명.vtt 파일 (텍스트 문서에서 작성하여 저장 가능하다.)

> WebVTT 형식

> UTF-8 형식의 텍스트 파일

 

WEBVTT

 

HH:MM:SS.sss --> HH:MM:SS.sss

해당 시간에 표시될 내용

 

HH:MM:SS.sss --> HH:MM:SS.sss

해당 시간에 표시될 내용

 

HH:MM:SS.sss --> HH:MM:SS.sss

해당 시간에 표시될 내용

 

- 다중 트랙의 사용

 > default 속성을 사용해서 하나의 트랙을 기본으로 지정

 > 여러 트랙을 사용하는 경우 사용자가 언어를 지정/선택하지 않는 경우를 대비 

 

<video src="video_track.mp4" controls autoplay loop>

<track src="video_ko.vtt" kind="subtitles" srclang="ko" label="한국어" default>

<track src="video_en.vtt" kind="subtitles" srclang="en" label="영어">

</video>