[HTML+CSS][HTML5와 멀티미디어] 01 - 웹과 멀티미디어

 

 

[HTML+CSS][HTML5와 시맨틱태그] 03 - IE8 이하 버전에서 시맨틱태그 사용하기

 

웹이 지원하는 멀티미디어의 종류와

여러 멀티미디어 형식으로 변환하는 방법에 대해서 

알아보도록 하자.

 

---

 

 

웹에서 사용하는 멀티미디어

 

플러그 인 (plug-in)

웹 브라우저에서 처리할 수 없는 작업을 위해

웹 문서 안에 포함시킨 외부 프로그램 기능이다.

 

오디오나 비디오 같은 멀티미디어를 직접 재생할 수 없던 과거의 웹 브라우저에서는 

플러그인(plug-in)이라는 프로그램을 사용했다.

인터넷에서 음악이나 강의 영상을 시청하려고 할 때 

프로그램을 설치하라는 메시지가 뜨곤 했는데 

이 프로그램이 바로 플러그인 프로그램이다.

 

 

---

 

 

<object>와 <embed> : 플러그인 사용

 

<object> 태그 : 외부 파일 삽입

웹 브라우저에서 직접 재생할 수 없는 

자바 애플릿이나 PDF 파일, 플래시 무비 같은 콘텐츠를 

웹 문서 안에  포함시키기 위해 사용하며, 

HTML 문서도 웹 문서에 포함 시킬 수 있다.

 

또한 특정 외부 파일을 가져와 표시할 것인지 여부를 알려주기 위해

최소한 data나 type 속성 둘 중 하나를 반드시
포함해 사용해야 한다.

 

 

<embed> 태그 : 외부 파일 삽입

웹 브라우저에서 재생할 수 없는 콘텐츠를 

웹 문서에 삽입할 때 사용한다.

<objcet> 태그와는 달리 닫는 태그가 없으며 

<object> 태그를 지원하지 않는 이전 브라우저에서 사용한다.

 

 

---

 

 

멀티미디어의 웹 표준화

 

HTML5는 PC뿐만 아니라 웹 브라우저가 설치된 모든 기기에 적용되는 웹 표준이므로 

플러그인 프로그램 없이 웹 브라우저 자체에서 멀티미디어를 재생할 수 있다. 

 

 

 

 

HTML5와 비디오 코덱

 

인코딩(encoding)

원본 비디오를 최대한 압축해

컴퓨터에서 사용할 수 있는 비디오 파일로 변환하는 것이다.

디코딩(decoding)

비디오 파일에 저장되어 있는 비디오 정보를 가져와

비디오 플레이어에 보여주는 과정이다.

비디오 코덱

인코딩과 디코딩을 수행하는 것이다.

 

 

HTML5에서는 플러그인 프로그램 없이

브라우저에서 직접 재생할 수 있는 비디오 코덱만 허용하는데

현재 한 가지 코덱으로 통일되지 않아 

세 가지 비디오 코덱이 함께 사용되고 있다.

 

 

H.264 / AVC

H.264라고 하며 mp4 파일에서 사용한다.

 

고화질 영상을 지원해 많은 사이트들에서 사용되고 있으며,

유료 코덱이지만 온라인 상에서 사용할 경우 무료로 사용 가능하다.

 

v8, v9

구글에서 오픈 소스로 공개한 코덱으로

webm 파일에서 사용한다.

 

H.264 보다 하드웨어 지원이 부족하다는 단점이 있지만

화질이 우수하고 무료로 제공된다는 장점이 있다.

 

오그 테오라 (Ogg Theora)

H.264에 대응해 등장한 무료 공개 코덱으로

ogv 파일에서 사용한다.

 

화질은 다른 코덱보다 떨어지지만 무료이다.

 

모바일 브라우저에서 사용할 수 없다.

 

 

HTML5와 오디오 코덱

 

MPEG-1 AUDIO Layer 3

'MP3 코덱'이라고 부르며 가장 유명한 오디오 코덱이며,
mp3 파일에서 해당 코덱을 사용한다.

 

Ogg Vorbis

오픈 소스로 누구나 무료로 사용할 수 있는 오디오 코덱이며,

.ogg나 .oga를 사용한다.

재생할 수 있는 프레이어가 적고 인코딩 시간이 더 걸리는 단점이 있으나 

무료이기 때문에 PC 게임 등에 많이 사용된다.

 

 

---

 

 

전부터 게임을 하거나 강의를 들을 때

프로그램을 설치하라는 메시지를 받으면서

귀찮으면서도 왜 항상 이 창이 뜨는지 궁금했는데

이러한 속성으로 구성되어 있다는 것을 보니

궁금증이 조금 해소된 것 같다.

 

 

---

 

 

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

 

 

※ 해당 글은 습득 목적으로 작성된 글입니다 ※