HTML5 에서의 멀티미디어 태그



HTML5 이전에 웹에서 동영상을 보거나 음악을 듣기 위해서는 어도비 플래시 플레이어나, Active X, 마이크로소프트 실버라이트, 윈도우 미디어플레이어 등의 플러그인 프로그램을 설치해야 했습니다.


그러나 모바일 기기들이 등장하고 발전하기 시작하면서 기존의 방식에 문제가 생겼습니다. (작은 저장공간에 비해 큰 용량 , 빠른 배터리 소모 등)


또한, 이 방식의 경우 미디어 파일의 확장자에 따라 다른 플러그인이 필요 했고, 이경우 여러가지의 플러그인을 모두 설치해야 했습니다.


요즘은 일반 사이트에서는 거의 보이지 않는 active X 방식도 흔히 사용되었는데, 이 경우 사용자가 원하지 않은 프로그램들이 컴퓨터에 설치 되기도 했습니다. (보안 취약)



이에 따라 HTML5는 플러그인 설치 없이도 웹브라우저에서 영상을 보고, 음악을 들을 수 있는 <video> , <audio> 태그를 지원하기 시작했습니다.


<video 태그 지원 브라우저>



Video



1. 비디오 파일 포맷과 코덱의 종류


우리가 흔히 보는 비디오 파일명을 확인해보면 보면 .mp4 .avi .wmv .mkv 등의 확장자가 붙어 있는 것을 볼 수 있습니다.

이 확장자들이 바로 비디오 파일의 포멧(형식) 에 의해 정해집니다.

비디오 파일 포맷의 종류


이렇게 다양한 비디오 파일들을 컴퓨터나 스마트폰 환경에서 재생 가능하도록 파일 포맷을 변경하거나, 용량을 줄이는 것을 인코딩(Encoding) 이라고 합니다.

또한 이 인코딩 된 비디오파일을 보여주는 과정에서는 디코딩(Decoding) 이 필요합니다.

이러한 과정을 수행하는 것이 코덱(CODEC) 입니다.


- H264

H264/AVC 또는 MPET-4 AVC 라고도 하며, 고화질의 영상을 지원하기 때문에 많은 사이트 들에서 사용하고 있습니다. 애플과 구글이 선호하는 코덱이기도 합니다.

.mp4 파일이나 .mov 파일등에 사용하고, 가장 많이 사용하는 코덱이지만 유료 코덱이라는 이유로 웹 표준으로 지정하기에는 무리가 있다는 의견이 있자 H.264의 특허권을 가지고 있는 MPEG포럼에서 HTML5 웹 표준의 용도로 사용할 경우에는 무료로 허용했습니다.


- 오그 테오라 (Ogg Theora)

H264와 달리 로열티를 지불하지 않아도 되는 오픈 소스 코덱으로 파이어폭스와 모질라가 선호하는 코덱입니다.

.ogv .ogg 파일에서 사용합니다.


- WebM

이 또한 구글에서 공개한 오픈소스 코덱으로 좋은 품질을 무료로 제공하여 발전가능 성이 높습니다.

.webm 파일에서 사용합니다.


브라우저별 코덱 지원 현황

코덱 종류 별로 브라우저 버전별 지원현황 보기

Browser

MP4(H.264) WebM(WebM) Ogg(Theora)

Internet Explorer

YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES YES YES





2. video 태그 사용방법


비디오 태그는 기본적으로 아래와 같이 사용가능합니다.


HTML

<video src="mingcho.mp4" width="450" height="320" controls > </video>


contorls 는 비디오의 컨트롤바를 보이게 해주는 속성으로 사용하지 않으면 컨트롤바가 표시되지 않습니다.

현재 대부분의 브라우저에서 .mp4 포맷의 영상을 디코딩하는 코덱 (H.264) 을 지원하기는 하지만 위와 같이 코딩하면, 해당 코덱을 지원하지 않는 브라우저에서는 영상을 재생할 수 없습니다.

위와 같은 경우에는 아래 방식을 사용 합니다.


HTML

<video> <source src="mingcho.ogv" type="video/ogg"> <source src="mingcho.mp4" type="video/mp4"> <source src="mingcho.webm" type="video/webm"> <p>당신의 브라우저는 HTML5 Video 태그를 지원하지 않습니다. </p> </video>


위와 같이 작성하면, 브라우저는 자신이 재생할 수 있는 첫번 째 파일을 재생합니다.



Audio



1. 오디오 파일 포멧과 코덱의 종류


오디오 파일역시 녹음 된 방법에 따라 포맷이 존재하며, 이러한 파일들의 인코딩 디코딩을 위해 코덱이 필요합니다. 오디오 파일 포맷의 종류


웹에서 자주 사용하는 오디오 코덱의 종류에는 크게 세가지가 있습니다.

- MPEG-1 AUDIO Layer3

우리가 잘알고있는 .mp3 파일을 사용하는데 이용되며, 로열티를 지불해야 했던 유료 코덱이였지만 2017년 4월 특허가 만료되었습니다.

MP3의 특허만료와 차세대 오디오 포맷 AAC


- 오그 보비스 (Ogg Vorbis)

역시 Ogg Theora 와 같이 오픈 소스로 무료로 사용가능하며, .ogg 나 .ogv 파일에 사용합니다.


- ACC

애플이 아이튠즈 기본 포맷으로 선정하면서 유명해진 포맷으로, 위 mp3의 특허만료와 차세대 오디오 포맷 ACC 링크를 참고하시면 ACC 포맷에 대해 더 자세히 알아보실 수 있습니다.


브라우저별 코덱 지원 현황

코덱 종류 별로 브라우저 버전별 지원현황 보기

Browser

MP3 Wav Ogg(Vorbis)

Internet Explorer

YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES




2. audio 태그 사용방법


오디오 태그는 기본적으로 아래와 같이 사용가능합니다.


HTML

<audio src="mingcho.mp3" controls> </audio>


오디오 태그 역시 비디오 태그와 마찬가지로 브라우저마다 지원하는 코덱이 조금씩 다르므로,

아래와 같이 source 태그를 사용합니다.


HTML

<video> <source src="mingcho.mp3" type="audio/mpeg"> <source src="mingcho.oga" type="audio/ogg" codecs="vorbis"> <p>당신의 브라우저는 HTML5 Audio 태그를 지원하지 않습니다. </p> </video>



Video/Audio 태그 속성



video와 audio 태그의 속성은 거의 비슷하기 때문에 같이 설명하며 각각의 속성은 위 태그들과 함께 한번만 작성합니다.

(source 태그에 각각 명시해주지 않습니다.)


로컬에서는 파일재생이 제대로 되었는데 서버에 업로드 후 재생이 안된다면, 서버 MIME TYPE의 문제일 수 있습니다. 서버관리자에게 요청하거나 서버를 직접 운영하는 경우 MIME TYPE을 추가하도록 합시당! 아파치 서버 MIME TYPE 추가하기


속성 설명
width/height 넓이값/높이값 비디오 의 넓이와 높이
src 미디어URL 멀티미디어 파일의 URL 지정
controls controls, 지정안함 각 브라우저의 컨트롤 막대를 표시.
autoplay autoplay, 지정안함 페이지가 로드될때 비디오, 오디오를 자동재생 (모바일 기기에서는 예외, 사용하지 않는 것을 권장)
preload none, metadata, auto 페이지가 열릴때 비디오를 미리 다운 받습니다.
none: 사용자가 재생버튼을 눌렀을때 다운로드를 시작합니다.
metadata: 미디어 파일 전체가 아닌 메타 정보만 다운로드 합니다.
auto: 페이지가 로드됨과 동시에 미디어 파일 전체를 다운로드 합니다 (preload 의 default 값)
muted muted, 지정안함 음소거
loop loop, 지정안함 반복 재생
poster 이미지URL 로드되기 전에 표시될 이미지 URL




+ Recent posts

티스토리 툴바