HTML 멀티미디어

 

 

멀티미디어

HTML4 까지는 웹 브라우저에서 멀티미디어를 직접 재생할 수 없기 때문에 플러그인 프로그램을 연결해서 사용했다. HTML5 웹 표준 이후 웹 브라우저에서 직접 멀티미디어를 재생했다. 일부 사이트에서는 아직도 플래시 플레이어를 사용하는 곳도 있다.

 

 

 HTML5와 비디오 코덱 

비디오 코덱은 비디오 인코딩과 디코딩을 수행하였다. 인코딩이란 원본 비디오를 컴퓨터에서 사용할 수 있는 비디오 파일로 변환하는 것을 말하며 디코딩은 컴퓨터 비디오 파일에 있는 비디오 정보를 가져와 플레이어에 보여주는 과정을 뜻한다. 대부분의 브라우저에서 H.264 코덱을 지원하므로 mp4 파일을 기본적으로 사용한다. 무료이면서 최신 코덱인 v9 코덱을 이용한 webm 파일도 함께 사용한다.

 

 

비디오 코덱 종류

 

① H.264/AVC

고화질의 영상과 mp4, mov 파일 등에서 사용한다. 유료 코덱이지만 온라인에서 사용할 경우 무료로 사용 가능하다. 대부분의 모던 브라우저에서 지원한다.

 

② 오그 테오라

공개 코덱으로 ogv 파일 형식에서 사용할 수 있다. 파이어폭스와 오페라, 크롬에서 지원한다.

 

③ v8, v9

오픈 소스로 공개한 코덱으로 webm 파일에서 사용한다. 화잘이 좋고 무료로 제공한다. 파이어폭스와 오페라, 크롬 등에서 지원한다.

 

 

오디오 코덱

 

① MPEG-1 AUDIO Layer3 (MP3 코덱)

가장 많이 사용하는 오디오 코덱으로 mp3 파일에서 사용된다. 특허권이 등록되어 있어 유료이다. 

 

② 오그 보비스(ogg Vorbis)

공개 코덱으로 ogg 파일 형식에서 사용된다. 재생 플레이어가 적고 인코딩 시간이 더 걸린다. 무료라서 PC 게임 등에 많이 사용된다.

 

 

 웹에서 지원하는 비디오와 오디오 파일

웹에서 지원되는 비디오와 오디오 파일에는 여러 종류가 있지만 뒤이어 코덱으로 비디오와 오디오 파일을 제작할 수 있으며 파일 확장자도 바꿀 수 있다.

 

+ 비디오 확장자

• mp4 : 고화질 지원, 라이센스가 있으므로 웹 용을 제외하면 유료로 사용해야함
• webm : 화질이 우수하고 무료로 제공됨
• ogv : 화질은 떨어지지만 무료이다.

 

+ 오디오 확장자

• mp3 : 대부분의 음원에서 사용되지만 라이선스 때문에 유료로 사용해야 함
• ogg : 무료로 게임 등에서 많이 이용됨

 

오디오와 비디오 재생하기

 

 

 <audio> 태그

배경이나 음악이나 효과음 등 오디오를 재생할 수 있는 태그이다. 배부분 브라우저에서 mp3 지원하므로 mp3 파일만 사용한다.

<!-- audio 태그 속성값
width 와 height 속성으로 비디오 크기를 조절한다.
autoplay : 오디오를 자동 재생한다.
controls : 웹 화면에 컨트롤 막대를 표시한다.
loop : 오디오를 반복 재생한다.
muted : 오디오를 재생해 진행하지만 소리를 끊는다.
preload : 재생 버튼을 눌러 재생하기 전에 오디오 파일을 다운로드해 준비해둔다.
-->

<audio src="오디오 파일 경로" controls muted><audio/>

 

 

 <video> 태그

웹 문서에 비디오 파일을 삽입한다.

<!-- video 태그 속성값
width 와 height 속성으로 비디오 크기를 조절한다.
autoplay : 미디어 파일을 다운로드하자마자 자동으로 재생한다.
controls : 웹 화면에 컨트롤 막대를 표시한다.
loop : 미디어 파일을 반복 재생한다.
muted : 비디오를 재생해 진행하지만 소리를 끊는다. 비디오를 문서 배경으로 사용하거나 소리가 필요하지 않을때 사용한다.
preload : 재생 버튼을 눌러 재생하기 전에 비디오 파일을 다운로드해 준비해둔다.
 - none : 재생 버튼을 눌러야 다운로드를 시작한다.
 - metadata : 미디어 파일 전체를 다운로드 하지않고 메타 정보만 다운로드한다.
 - auto : 웹 문서를 로드할 때 미디어 파일도 모두 다운로드한다. 기본값이다.
poster : 비디오 재생 불가 시 대체 이미지 지정(poster="이미지 경로")
-->

<video src="비디오 파일 경로" controls muted preload="metadata"><video/>

 

 

 <track> 태그

비디오에 외부 자막 파일을 연결하는 태그이다. 

<track kind="자막 종류" src="경로" srclang="언어" lavel="제목" default>

<!-- 속성 설명
kind 속성
 - subtitles : 자막이다. 소리를 켤 수 있지만 이해할 수 없는 경우 다른 언어로 번역한 자막일 경우에 사용한다.
 - captions : 청각장애인용 자막이거나 소리를 들을 수 없는 경우에 사용한다.
 - descriptions : 비디오 컨텐츠에 대한 설명으로 비디오 화면에 표시되지 않는다.
 - chapters : 비디오 탐샘을 위한 창 제목으로 비디오 화면에 표시되지 않는다.
 - metadata : 비디오 콘텐츠 정보로 비디오 화면에 표시되지 않는다.
src : 자막 텍스트 파일 경로를 지정한다.
srclang : 사용 언어를 지정한다.
label : 자막이 여러 개일 경우 자막 식별 제목을 표시한다.
default : 자막 파일이 여러개일 경우 기본으로 사용할 자막을 default 로 지정한다.
-->

 

video 태그와 같이 사용 예시)

<video src="비디오 경로" controls>
    <track src="media/test.vtt" srclang="ko" label="Korean" default>
</video>

 

+ WebVTT 자막 파일(.vtt)

웹 비디오 텍스트 트랙(Web Video Text Track)으로 모든 브라우저에서 공식적으로 지원하는 자막 파일 형식이다. 자막 내용과 시간 정보를 함께 담고 있다. (HTML5 Video Caption Maker)