[HTML] 멀티미디어 표현

HTML에서 멀티미디어 표현

HTML 오디오 / 비디오 재생

1. audio 요소

mp3(.mp3)
- MPEG-1 오디오 규칙 (MPEG-1 Audio Layer-3) 으로 개발된 오디오 압축 기술
Wav(.wav>
- 윈도우에서 오디오 재생을 위해 MS와 IBm이 개발한 비압축 방식)
OGG(.ogg/.oga)
- MP3 대안으로 개발되어 스트리밍 방식으로 멀티미디어 표현을 위한 공개 소스기반의 파일 형식

<HTML>
  <head>
    <title>오디오/비디오 재생</title>
  </head>
  <body>
    <embed src"...URL...">
  </body>
</HTML>

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

2. video 요소

비디오 파일 형식

웹에서 주로 사용되는 비디오 형식 01) MP4

MPEG-4 에서 규정된 비디오 파일형식
H.264 비디오 코덱
AAC 오디오 코덱

02) WebM(*.webm)

구글이 개발한 고화질 영상 압축형식
VP8 비디오 코덱
Vorbis 오디오 코덱

03) Ogg(*.ogv)

멀티미디어 표현을 위한 공개 소스 기반의 파일 형식
Theora 비디오 코덱
Vorbis 오디오 코덱

<audio>태그의 속성을 그대로 사용
- src, autoplay, controls, loop, buted, preload

- width= "픽셀" , height = "픽셀"
   ㄴ  비디오 컨텐츠가 표시될 영역의 크기 ( 폭, 넓이)

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

------------------------
ex) 

<body>
비디오 재생: <br/><br/>
<video src="bunny.mp4" controls
width="400" height="300"
poster="bunny_poster.jpg">
현재의 브라우저는 video 요소를 지원하지 않습니다.
</video>
</body>

: 속성 명 :	: 표현 형태:	: 속성 역할 :
: src :	: src=”URL :	: HTML4에서 미 지원:
: height :	: height=”픽셀” :	: 내장되는 콘텐츠의 높이 :
: width = “픽셀”	:내장되는 콘텐츠의너비:	: 내장되는 콘텐츠의 너비 :
: type :	: type= “ type= “미디어타입”:	: 내장되는 콘텐츠의 미디어타입 :

<video src="bunny.mp4" controls>
<embed src="bunny.mp4">
</video>

source 태그

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

<audio>와 <video> 태그의 src 속성의 역할을 대신한다.
<audio>와 <video) 태그의 내에서 여러개 지정>
  ㄴ 가장 위의 (source) 태그부터 지원하는 형식을 찾아서 재생

src = "URL" -> 내장되는 외부 파일의 주소 이름 
height = "픽셀" -> 내장되는 콘텐츠의 높이 
width = "픽셀" -> 내장되는 콘텐츠의 폭
type = "미디어타입" -> 내장되는 콘텐츠의 미디어타입 

track 태그

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

<video src="video_track.mp4" controls autoplay loop>
  <track src="video_track.vtt" kind="subtitles"
      srclang="ko" label="예제 자막표시" default>
</video>

1) 속성

src = “URL” -> 텍스트 트랙 파일의 URL 지정
kind = “속성값” -> 텍스트 트랙의 종류 지정
label = “텍스트” -> 사용자가 읽을 수 있는 트랙의 제목 지정
srclang = “언어코드” -> 텍스트 트랙 데이터의 언어 지정
default -> 사용자가 별도의 트랙을 지정하지 않는 경우 기본 트랙으로 활성화되어야 함을 지정

2) 속성값의 종류

subtitles : 비디오의 자막을 정의
captions : 대화나 사운드 효과를 글로 옮기거나 번역한것
descriptions : 비디오 내용에 대한 텍스트 형식의 설명을 정의
chapters : 장의 제목을 정의 미디어 자원을 탐색하기 위한 것
metadata : 스크립트에서 사용하기 위한 내용을 정의