HTML5+CSS3 - 멀티미디어 관련 태그

HTML4에서는 <embed>, <object> 태그를 사용하여 멀티미디어을 삽입했는데, 이는 재생을 위한 ActivX 프로그램이나 플러그인들이 필요하다.

HTML5부터는 간단히 태그만 사용으로 플러그인 없이 재생이 가능하다.

<video>태그 - HTML5와 비디오

<video src="비디오 파일 경로" [속성] [속성="속성값"]>

width 속성 : 동영상의 가로 폭을 지정한다.

height 속성 : 동영상의 세로 폭을 지정한다.

촬영한 비디오를 최대한 압축해서 컴퓨터에서 사용할 수 있는 파일로 변환하는 과정을 인코딩이라 하며, 비디오 파일에 저장되어 있는 비디오 정보를 가져와서 플레이어에 보여주는 과정을 디코딩이라 한다. 이를 수행하는 것은 비디오 코덱인데, 여러 비디오 코덱 중 HTML5에서 허용하는 비디오 코덱은 아래 3가지이다.

1 - H.264/AVC : 고화질의 영상을 지원하여 많이 사용되며, mp4 파일이나 mov 파일 등 많은 곳에 사용되지만, 로열티를 지불해야 하는 코덱이다.

2 - 오그 테오라(Ogg Theora) : 로열티가 필요없는 공개 코덱이며, 파일형식은 ogv이다.

3 - WebM : 구글에서 오픈 소스로 공개한 코덱이며, webm 파일에서 사용한다. 화질이 좋고 무료이다.

현재 브라우저별로 지원하는 비디오 파일형식은 아래와 같다.

브라우저	mp4	WebM	Ogg
인터넷 익스플로러	O	X	X
크롬	O	O	O
파이어폭스	O	O	O
사파리	O	X	X
오페라	O	O	O

위 내용도 브라우저 버전에 따라 달라질 수 있으므로, 대부분의 브라우저에서 재생할 수 있게 하려면 mp4, ogv, webm 파일들을 모두 준비하여 태그에 사용하는것이 좋다.

<video> 태그 내에 <source> 태그를 사용하면 된다. 사용법은 아래에.

이렇게 동영상 하나를 여러 코덱방식으로 준비해 놓으려면 변환이 필요한데, 아래 링크를 참조하자.

http://blog.naver.com/hji0223/220498356505

Info - 동영상 변환 방법

HTML5에서 지원하는 파일형식은 mp4, ogv, webm 이므로 세가지 변환 방법을 정리한다.Miro Video Converter 라는 프로그램이 있는데 무료에...

blog.naver.com

근데, 엣지 브라우저는 mp4 방식만 지원하는듯 하다.

<audio>태그 - 오디오 파일 삽입

<audio src="오디오 파일 경로" [속성] [속성="속성값"]>

 

HTML5에서 주로 사용하는 오디오 코덱은 다음과 같다.

1 - MPEG-1 AUDIO Layer3 : mp3 코덱

2 - OGG Vorbis : 오픈 소스이며 무료이다. 확장자는 ogg나 oga를 사용한다.

오디오도 비디오와 마찬가지로 브라우저별로 재생가능한 파일이 다르므로, <source> 태그를 사용하여 여러개의 오디오 파일을 등록하도록 한다.

비디오와 오디오의 속성

controls 속성 : 미디어에 컨트롤 막대가 표시된다. 속성 값은 없다. 마우스 오버를 해야 나타난다.

preload 속성 : 재생 전 미리 다운로드 여부를 지정한다.

 - none: 재생버튼을 누르면 다운로드를 시작한다.

 - metadata: 미디어 파일의 메타 정보만 다운로드한다.

 - auto: 페이지가 펼쳐지면 즉시 미디어 파일 전체를 다운로드한다.

autoplay 속성 : 미디어 파일을 다운로드하자마자 재생한다. 모바일기기는 예외. HTML5에서는 자동재생을 사용하지 않기를 권장한다고 한다.

loop 속성 : 미디어 파일 재생이 끝났을 때 맨 앞으로 돌아가 다시 재생한다.

<source>태그 - 여러 미디어 파일 한꺼번에 지정하기

미디어 파일을 모든 브라우저에서 재생 가능하다록 하기 위해 여러 방식의 미디어 파일을 준비하고, 이 태그를 사용하여 등록한다.

<video>

  <source src="test.ogv" type="video/ogg">

  <source src="test.mp4" type="video/mp4">

  <source src="test.webm" type="video/webm"> 

</video>

type 속성은 생략이 가능하다.

<track>태그 - 동영상 화면에 자막 추가하기

<track kind="자막의 종류" src="파일 경로" srclang="사용한 언어" label="제목" default>

동영상에 자막을 추가하고자 할 때 사용되며, <video>태그 안에 사용한다.

<video>

  <source src="test.mp4" type="video/mp4">

  <track src="subtitle.vtt" srclang="ko" label="Korean" default>

</video>

속성

 - kind : 자막의 종류를 지정한다. 종류는 아래와 같으며, 기본값은 subtitles이다.

subtitles	자막. 소리를 사용할 수 있지만 이해할 수 없는 경우, 한 언어에서 다른 언어로 번역한 자막일 경우 사용한다. 동영상 화면에 표시된다.
captions	캡션. 청각 장애인을 위한 자막이거나 소리를 들을 수 없는 상황을 위한 자막일 경우 사용한다. 동영상 화면에 표시된다.
descriptions	동영상 콘텐츠에 대한 설명입니다. 동영상 화면에는 표시되지 않는다.
chapters	동영상 탐색을 위한 장 제목이다. 동영상 화면에 표시되지 않는다.
metadata	동영상 콘텐츠의 비시각 정보이다. 동영상 화면에 표시되지 않는다.

 - src : 자막 텍스트 파일 경로를 지정한다.

 - srclang : 사용한 언어를 지정한다. kind 속성이 subtitle이면 반드시 지정해야 한다. 약어로 표시한다. (ko, en)

 - label : 자막이 여러 개일 경우 자막을 서로 식별할 수 있게 해주는 제목이다.

 - default : 자막 파일이 여러 개일 경우 기본으로 사용할 자막을 default로 지정할 수 있다.

smi : 자막 내용만 존재

srt : 자막의 시작 시간과 끝시간 같은 시간 정보가 함께 들어있다.

HTML5에서는 srt도 사용하긴 하지만 모든 브라우저에서 공식적으로 지원하는 자막 파일 형식은 WebVTT(Web Video Text Track)라고 한다.

vtt 확장자를 가지며, 텍스트 편집기에서 만들어 낼 수 있고, 형식은 아래를 따라야 한다.

시작시간-->끝시간 자막내용 빈 줄   ...

시간은 HH:MM:SS.ttt 형식을 따른다.