HTML5와 멀티미디어 2

HTML5와 멀티미디어 2

멀티미디어의 웹 표준화

• HTML5는 PC뿐만 아니라 웹 브라우저가 설치된 모든 기기에 적용되는 웹 표준이므로 플러그인 프로그램 없이 웹 브라우저 자체에서 멀티미디어를 재생할 수 있습니다.
• 다만 아직까지 웹 브라우저마다 재생할 수 있는 멀티미디어 파일 종류가 다르기 때문에 어떤 파일 형식이 표준이 될 것인지가 개발자와 사용자들 사이에서 논의되는 중입니다.

 

1. 브라우저별 비디오/오디오 파일 지원여부

• 괄호 안의 내용은 해당 미디어 파일을 지원하는 버전입니다.

 

브라우저	비디오			오디오
	mp4	webm	ogv	mp3	ogg
인터넷 익스플로러	O (9+)	X	X	O (+9)	X
크롬	O (all)	O (25+)	O (all)	O (all)	O (all)
파이어폭스	O (35+)	O (28+)	O (3.5+)	O (22+)	O (3.5+)
사파리	O (3.2+)	X	X	O (4+)	X
오페라	O (25+)	O (16+)	O (11.5+)	O (15+)	O (11.5+)
iOS 사파리	O (all)	X	X	O (4.1+)	X
안드로이드 브라우저	O (4.4+)	X	X	O (2.3+)	O (2.3)

 

2. 웹에서 지원하는 비디오 / 오디오 파일 종류

• 웹에서 지원되는 비디오 / 오디오 파일에는 여러 종류가 있는데 코덱으로 비디오 / 오디오 파일을 제작할 수 있으며 파일 확장자도 바꿀 수 있습니다.

 

종 류	확장자	설 명
비디오	mp4	고화질 영상을 지원해 많은 사이트에서 사용되고 있습니다. 라이선스가 있으므로 웹 용을 제외하면 유료로 사용해야 합니다.
	webm	화질이 우수하고 무료로 제공되어 최근 많이 사용되고 있습니다.
	ogv	화질은 다른 비디오 유형보다 떨어지지만 무료라는 장점 때문에 webm 형식이 등장하기 전에 많이 사용되었습니다.
오디오	mp3	대부분의 음원에서 사용되지만 라이선스 때문에 유료로 사용해야 합니다.
	ogg	무료이므로 게임 등에서 많이 사용합니다.

HTML5와 비디오 코덱

• 전문 촬영 장비나 캠코더, 핸드폰 등 여러 장치를 이용해 촬영한 비디오 파일이 있더라도 컴퓨터에서 곧바로 사용할 수는 없고 원본 비디오를 최대한 압축해 컴퓨터에서 사용할 수 있는 비디오 파일로 변환해야 합니다. 이 과정을 인코딩(encoding)이라고 합니다.
• 반대로 비디오 파일에 저장되어 있는 비디오 정보를 가져와 비디오 플레이어에 보여주는 과정을 디코딩(decoding)이라고 합니다.
• 인코딩과 디코딩을 수행하는 것이 비디오 코덱인데 현재 사용할 수 있는 비디오 코덱은 여러 종류가 있습니다. 예를 들어 우리가 자주 보는 WMV(Window Media Video)라는 코덱은 원본 비디오를 윈도우의 '윈도우 미디오 플레이어'로 볼 수 있도록 변환해 줍니다.
• 대부분의 브라우저에서 H.264 코덱을 지원하므로 mp4파일을 기본적으로 사용하고 무료이면서 최신 코덱인 v9코덱을 이용한 webm 파일도 함께 사용하는 경우도 있습니다. 또한 모던 브라우저 중에서도 이전 버전에서는 ogv 파일만 지원하는 경우도 있으므로 ogv파일도 함께 사용합니다.
• HTML5에서는 플러그인 프로그램 없이 브라우저에서 직접 재생할 수 있는 비디오 코덱만 허용하는데 아직 한 가지 코덱으로 통일되지 않아 다음의 세가지 비디오 코덱이 함께 사용되고 있습니다.

 

HTML5에서 사용되는 비디오 코덱

1) H.264/AVC

• 간단히 줄여 H.264라고 하며 mp4 파일에서 사용합니다.
• 고화질 영상을 지원하기 대문에 멀티미디어 업계에서 표준으로 사용되고 있고 지금까지 많은 사이트들에서 사용되고 있습니다.
• H.264는 유료 코덱이기 때문에 웹 브라우저의 표준으로 지정하기에는 많은 논란이 있지만 온라인 상에서 사용할 경우에 한해 H.264 코덱을 무료로 사용할 수 있어 인터넷 익스플로러 9 이상을 비롯해 크롬, 파이어폭스, 오페라 등의 PC용 모던 브라우저뿐만 아니라 대부분의 모바일 브라우저에서 사용 가능합니다.

 

2) v8, v9

• 구글에서 오픈 소스로 공개한 코덱으로 처음에는 v8에서 시작해 v9 코덱이 개발중이며 webm 파일에서 사용합니다.
• 하드웨어 가속이 가능한 H.264보다 하드웨어 지원이 부족하다는 단점이 있지만 화질이 우수하고 무료로 제공되므로 파이어 폭스와 오페라, 크롬 등에서 사용가능합니다.

 

3) 오그 테오라(Ogg Theora)

• H.264에 대응해 등장한 무료 공개 코덱으로 ogv 파일에서 사용합니다.
• 화질은 다른 코덱보다 떨어지지만 무료라는 장점때문에 파이어 폭스와 오페라, 크롬 브라우저에서 사용 가능하지만 모바일 브라우저에서는 사용할 수 없습니다.

HTML5와 오디오 코덱

• 오디오 파일도 여러 코덱을 이용해 인코딩할 수 있는데 각 브라우저에서 따라 사용하는 코덱이 달라집니다.

 

HTML5에서 사용되는 오디오 코덱

1) MPEG-1 AUDIO Layer3

• 흔히 'MP3 코덱'이라고 부르며 가장 유명한 오디오 코덱입니다.
• MP3는 1991년에 표준화되었고 특허권이 등록되었는데 mp3파일에서 이 코덱을 사용합니다.

 

2) Ogg Vorbis

• MP3와 달리 오픈 소스이며 누구나 무료로 사용할 수 있는 오디오 코덱입니다.
• 확장자 ogg나 .oga를 사용합니다.
• 재생할 수 있는 플레이어가 적고 인코딩 시간이 더 걸린다는 단점이 있지만 무료로 사용할 수 있기 때문에 PC게임 등에 많이 사용됩니다.