HTML 멀티미디어 관련 태그들
과거에 사용하던 플러그인은 문제가 많았다. 확장자 지원 문제도 그렇고 원하지 않는 툴바 등이 설치되는 경우도 있었다. 하지만 최근 플래시 플레이어가 거의 차단 된 만큼, html5에도 그와 관련된 태그가 생겨났다.
object 태그, embed 태그
이 태그들은 사실 플러그인을 지원하는 태그이지만, 아직 html5를 지원하지 않는 브라우저를 위해 알아두면 좋다.
object 태그는 자바 애플릿이나 pdf 파일 등을 웹 문서안에 포함시키기 위해 사용하는 태그이다. 다른 html 문서도 가능하다.
<object data="경로" type="유형" [name, width, height]></object>
많이 사용하지 않기 때문에 여기까지만 알아보도록 하자.
embed 태그는 웹 브라우저에서 재생할 수 없는 외부 파일을 삽입할 때 사용하는 태그이다. 더 오래된 태그이다.
비디오 코덱
동영상 파일을 재생하기 위해 코덱이라는 용어를 많이 봤을 것이다. 그에 앞서 이 과정에서 촬영한 비디오를 압축해서 컴퓨터에서 사용할 수 있는 비디오 파일로 변환하는 과정인 인코딩이 있다면, 비디오 파일에 저장되어 있는 정보를 가져와 플레이어에 보여 주는 과정이 디코딩이다.
코덱이란 인코딩과 디코딩을 수행하는 것이다. 종료가 매우 다양하기 때문에 플레이어에선 코덱을 지원하게 되주는 파일을 지원하지만 html5에선 그게 아니기 때문에 크게 3가지 코덱을 사용하고 있다.
H.264/AVC
mp4 파일에 사용하는 코덱이다. 대부분 멀티미디어 업계에서 표준으로 사용하고 있는 코덱이다.v8, v9
구글 오픈 소스 코덱이다. 화질이 우수하고 무료이다. 파이어 폭스, 오페라, 크롬이 이 코덱을 사용한다.Ogg Theora
H.264에 대응하는 무료 오픈 코덱이며 ogv 파일에서 사용한다. 단점은 모바일 브라우저에선 사용할 수 없다.
주로 사용하는 오디오 코덱에는
MPEG-1 AUDIO Layer3
MP3 코덱이다.Ogg Vorbis
오픈 소스 코덱으로 ogg, oga 확장자를 사용한다. 무료이기 때문에 PC게임에서 많이 사용한다. 단점으로는 인코딩이 오~래 걸린다.
오디오와 비디오 재생하기
- audio 태그
오디오를 재생하기 위한 태그이다.
<audio src="경로" [속성] [속성="속성 값"]></audio>
속성에는 autoplay, controls(컨트롤 막대 표시), loop(반복 재생), muted(소리만 끄기), preload(재생하기 전 오디오 파일 다운로드)
가 있다.
- video 태그
비디오를 재생하기 위한 태그이다. audio 태그와 같다.
- source 태그
여러 미디어를 한꺼번에 지정하는 태그이다.
- track 태그
비디오 화면에 자막을 추가할 수 있다.
<track kind="자막 종류" src="경로" srclang="언어" label="제목" default>
kind 속성에 속성값에는 subtitles(다른 언어로 번역한 자막일 경우 사용), captions, descriptions(비디오 콘텐츠 설명), chapters(비디오 탐색을 위한 장 제목), metadata(비디오 콘텐츠 정보)