HTML에서 멀티미디어 표현 (6)

태그 명	태그 역할	특이사항
<embed>	외부 애플리케이션이나 상호작용 콘텐츠를 위한 컨테이너	HTML4에서 미 지원
<audio>	브라우저에서 간단히 오디오 재생
<source>	하나의 소스파일에 대해 서로 다른 형식을 갖는 여러 파일을 동시에 지정하기 위한 태그	<audio> , <embed> 태그의 src 속성의 역할을 대신 수행

1. (1) <embed> 태그 속성

1. (2) <audio> 태그 속성

속성 명		표현 형태	속성 역할	특이사항
src		src="URL"	재생할 오디오 파일의 URL
autoplay		1. 속성 값 없이 사용 가능 (속성명만 표시) 2. 속성 값을 사용 시 -> 속성명="속성명"	웹 문서 로딩 시에 오디오를 자동으로 재생할 지 여부
controls			오디오 제어기 표시 여부
loop			오디오의 반복 재생
muted			음소거
preload	none	preload="속성 값" ex) preload="auto"	사용자가 재생을 시작하기 전까지는 오디오 파일을 미리 로드하지 않음	autoplay 속성을 지정 시 preload는 무시
	auto		페이지가 로드될 때 바로 전체 파일을 자동 로드 (default)
	metadata		사용자가 재생시키기 전까지는 오디오의 정보(크기, 첫 프레임 등)만 로드

※ preload : 웹 문서가 로딩될 때 오디오의 로딩 상태

1. (3) <source> 태그 속성

태그 명	태그 역할	특이사항
<video>	브라우저에서 간단히 비디오 재생	<audio> 태그와 거의 유사함
<source>	하나의 소스파일에 대해 서로 다른 형식을 갖는 여러 파일을 동시에 지정하기 위한 태그	<audio> , <embed> 태그의 src 속성의 역할을 대신 수행
<track>	여러 언어나 비디오 설명을 제공하거나, 자막이나 캡션 같이 시간이 지정된 텍스트 파일을 지정	하위 태그로 사용하지 않고, 단독으로 사용시 표시되지 않음

※ 비디오 재생 구간 지정

미디어 콘텐츠를 재생할 때 특정 구간을 지정하여 재생할 수 있습니다.

- <audio>, <video> 또는 <source> 태그의 src 속성을 이용합니다.

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

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

예제

2. (1) <video> 태그

속성 명		표현 형태	속성 역할	특이사항
src		src="URL"	재생할 오디오 파일의 URL
autoplay		1. 속성 값 없이 사용 가능 (속성명만 표시) 2. 속성 값을 사용 시 -> 속성명="속성명"	웹 문서 로딩 시에 오디오를 자동으로 재생할 지 여부
controls			오디오 제어기 표시 여부
loop			오디오의 반복 재생
muted			음소거
preload	none	preload="속성 값" ex) preload="auto"	사용자가 재생을 시작하기 전까지는 오디오 파일을 미리 로드하지 않음	autoplay 속성을 지정 시 preload는 무시
	auto		페이지가 로드될 때 바로 전체 파일을 자동 로드 (default)
	metadata		사용자가 재생시키기 전까지는 오디오의 정보(크기, 첫 프레임 등)만 로드
width		width="픽셀"	비디오 콘텐츠가 표시될 너비
height		height="픽셀"	비디오 콘텐츠가 표시될 높이
poster		poster="URL"	지정한 비디오 데이터가 없거나, 비디오가 로딩되는 동안 보여줄 이미지를 지정

2. (2) <source> 태그

2. (3) <track> 태그

속성 명		표현 형태	속성 역할	특이사항
src		src="URL"	텍스트 파일의 주소/이름 지정
kind	subtitles	kind="속성 값"	비디오의 자막을 정의	언어를 이해할 수 없는 경우 적합
	captions		대화나 사운드 효과를 글로 옮기거나 번역한 것	청각이 약한 사람에게 적합
	descriptions		비디오 내용에 대한 텍스트 형식의 설명을 정의	시각 장애를 가진 사람에게 적합
	chapters		장의 제목을 정의
	metadata		스크립트에서 사용하기 위한 내용을 정의	브라우저에는 표시되지 않음
label		label="텍스트"	사용자가 읽을 수 있는 트랙의 제목 지정
srclang		srclang="언어코드"	텍스트 트랙 언어 지정
default		default	사용자가 별도의 트랙을 지정하지 않는 경우 기본 트랙으로 활성화 할 트랙을 지정

krujy의 IT 일기장