[HTML] HTML 멀티미디어(오디오와 비디오)

1. HTML 문서에서 오디오 재생
2. HTML 문서에서 비디오 재생 및 자막 처리

HTML5에서는 오디오와 비디오의 재생을 위해 audio요소와 video요소가 추가되어 외부 플러그인 설치 없이 구현 할 수 있게 됐다.
HTML5 이전까지는 enbed 요소나 object 요소를 사용해 왔다.

audio 요소

오디오 재생

사용방법 : <audio controls>웹브라우저에서 지원하지 않을 경우 대체해서 표시 될 텍스트나 이미지</audio>

<audio> 태그의 속성

속성	설명
autoplay	웹 문서 로딩 시 오디오 자동 재생할지 여부를 지정
controls	오디오 제어기(재생, 일시정지, 볼륨 등)의 표시 여부를 지정 지정되지 않을 경우 화면에 아무것도 표시되지 않는다.
loop	오디오 반복 재생 여부를 지정
muted	음소거 여부를 지정
preload="속성값"	웹 문서가 로딩 될 때 오디오의 로딩 상태를 지정 (속성값의 종류 : none-사용자가 재생 한 후 오디오 파일 로드, auto-기본값으로 페이지 로드시 자동으로 로드, metadata-사용자가 재생하기 전까진 메타 정보만 로드)
src="URL"	재생할 오디오 파일의 URL 지정

 

old_melody 재생:

오디오 파일 형식

웹에서 사용 되는 오디오 형식 :
MP3(.mp3 : MPEG-1의 오디오 규격으로 개발 된 오디오 데이터 압축 기술)
Wav(.wav : 윈도우에서 오디오 재생을 위해 마이크로소프트와 IBM이 개발한 비압축 방식의 오디오 형식)
Ogg(.ogg,.oga : MP3 대안으로 개발된 스트리밍 방식의 멀티미디어 표현을 위한 공개소스 기반의 파일 형식)

브라우저별 지원되는 오디오 파일 형식

브라우저	MP3	Wav	Ogg
인터넷 익스플로러 11	O	X	X
크롬 52	O	O	O
파이어폭스 48	O	O	O
오페라 37	O	O	O
사파리 9.1	O	O	X

<source> 태그

브라우저별 미지원에 따른 문제점을 방지하기 위해 다른 형식을 갖는 여러 개의 오디오 파일을 동시에 지정해 준다.
브라우저에서 가장 위에 있는 <source> 태그의 파일부터 차례대로 재생이 가능한지 검사 후 재생이 가능하면 해당 파일 형식으로 오디오를 재생하고 다른 파일 검사를 멈춘다.
<source>태그는 <audio>와 <video>태그의 자식 태그로 src속성의 역할을 하고, 종료태그 없이 사용한다.
사용방법 : <source src="URL" type="MIME형식(audio/mp3, audio/wav, audio/ogg)">

<source> 태그 사용 예제

<audio controls>
 <source src="resource/old_melody.ogg" type="audio/ogg">
 <source src="resource/old_melody.wav" type="audio/wav">
 <source src="resource/old_melody.mp3" type="audio/mp3">
 현재의 브라우저는 audio 요소를 지원하지 않습니다.
</audio>
  
   
   
   
   현재의 브라우저는 audio 요소를 지원하지 않습니다.
  

video 요소

비디오 재생

<oudio>태그의 속성을 그대로 사용 : autoplay, controls, loop, muted, preload, src
<video>태그 추가 속성 : width, height, poster(비디오가 재생되지 않는 동안 보여 줄 이미지)

웹에서 사용 되는 비디오 형식 :
MP4(.mp4 : MPEG-4에서 규정된 비디오 파일 형식, H.264 비디오 코덱과 AAC 오디오 코덱 사용)
WebM(.webm : 구글이 개발한 고화질 영상 압축 형식, VP8 비디오 코덱과 Vorbis 오디오 코덱 사용)
Ogg(.ogv : 멀티미디어 표현을 위한 공개 소스 기반의 파일 형식 , Theora 비디오 코덱과 Vorbis 오디오 코덱 사용)
=> 각 브라우저마다 지원하는 파일 형식이 다르기 때문에 <audio>태그처럼 <source>태그를 사용한다.

<source> 태그 사용 예제

<video width="700" height="400" poster="resource/without.jpg" controls>
 <source src="resource/without.ogv" type="video/ogg">
 <source src="resource/without.mp4" type="video/mp4">
 현재의 브라우저는 video 요소를 지원하지 않습니다.
</video>
  
   
   
   현재의 브라우저는 audio 요소를 지원하지 않습니다.
  

브라우저별 지원되는 비디오 파일 형식

브라우저	MP4	WebM	Ogg
인터넷 익스플로러 11	O	X	X
크롬 52	O	O	O
파이어폭스 48	O	O	O
오페라 37	O	O	O
사파리 9.1	O	X	X

비디오 재생 구간 지정

오디오, 비디오를 삽입 할 때 시작시간과 종료시간을 설정해 재생 구간을 지정 할 수 있다.
src속성의 값을 지정 할 때 '#t=[시작시간], [종료시간]'을 붙인다.
시작시간, 종료시간의 지정은 '시간:분:초'형식을 사용한다.

미디어 콘텐츠의 재생 구간 지정 방법

#t=[시작시간], [종료시간]	설명
src="파일명#t=1:10:30, 1:40:50"	1시간 10분 30초 ~ 1시간 40분 50초 재생
src="파일명#t=10, 20"	10초 ~ 20초 재생
src="파일명#t=, 30"	처음 ~ 30초 재생
src="파일명#t=30"	30초 ~ 끝 재생

자막 처리 <track> 태그

<track> 태그는 여러 언어나 비디오 설명을 제공하거나 자막이나 캡션 같이 시간이 지정된 텍스트 파일을 지정하기 위해 사용된다.

<track> 태그의 속성

속성	설명
default	사용자가 별도의 트랙을 지정하지 않는 경우 기본 트랙으로 활성화되어야 한다는 것을 지정
kind="속성값"	텍스트 트랙의 종류를 지정(생략 가능, 기본값:subtitles)
label="텍스트"	사용자가 읽을 수 있는 트랙의 제목을 지정
src="URL"	(필수 항목) 텍스트 트랙 파일(.*vtt)의 URL을 지정
srclang="언어코드"	텍스트 트랙 데이터의 언어를 지정 (kind="subtitles"인 경우에는 반드시 지정)

kind 속성의 속성값 종류

속성값	설명
subtitles	비디오의 자막을 정의
captions	대화나 사운드 효과를 글로 옮기거나 번역한 것(청각이 약한 사람들에게 적합)
descriptions	비디오 내용에 대한 텍스트 형식의 설명을 정의(시각 장애인에게 적합)
chapters	장의 제목을 정의한 것으로, 미디어 자원을 탐색하기 위한 것
metadata	스크립트에서 사용하기 위한 내용을 정의하는 것으로, 브라우저에는 표시되지 않음