본문으로 바로가기

[HTML5] 6-2장 멀티미디어 태그

category 웹코딩/HTML 2013. 2. 9. 23:30

HTML5에서 추가된 멀티미디어 요소인 video와 audio, 그리고 대체요소(fallback)로 사용될 embed에 대해서 알아봅니다. 현재에도 웹에서 동영상을 시청하는데 지장이 없다고 생각할 수 있습니다만 그 안을 유심히 들여다보면 각종 플러그인과 ActiveX라는 불편함과 보안위협에 노출되어 있습니다. 그런 이유로 브라우저 자체에서 동영상을 재생하게끔 멀티미디어 태그가 필요하게 된 것이죠.

VIDEO

<video> 관련 사양을 알아보기에 앞서 그 이해를 높여봅시다.

비디오 파일 포멧 종류와 이해

'AVI 파일'이나 'MP4 파일'이 비디오 파일이라고 생각하겠지만 실제로 'AVI'나 'MP4'는 비디오 컨테이너 포맷이다. ZIP 파일이 종류에 상관없이 파일을 담을 수 있는 것과 마찬가지로 비디오 컨테이너 포맷은 내부 저장 방법만 정의한다. 어떤 종류의 데이터가 저장되는지와 컨테이너 포맷은 상관이 없다.

비디오 파일은 대개 오디오가 없는 비디오 트랙과 비디오가 없는 하나 이상의 오디오 트랙으로 구성된다. 트랙은 일반적으로 상호 연관돼 있는데, 예를 들어 오디오 트랙은 오디와 비디오를 싱크시키기 위한 표시자를 포함한다. 각 트랙은 비디오 트랙의 화면 비율이나 오디오 트랙의 언어정보 같은 메타데이터를 담고 있다. 컨테이너 역시 비디오 제목과 표지 디자인, 에피소드 번호 등의 메타데이터를 저장한다.

비디오 포멧의 종류에 따라 이를 실행하는데 각각의 코덱이 필요하다. 현재 업계의 표준 코덱은 H.264로서 이 코덱은 'MPEG-4 part 10' 또는 'MPEG-4 AVC'라고 알려져 있다. 애플에서 적극적으로 사용하는 코덱이고 모바일에서 보이는 유투브 동영상도 H.264 코덱을 이용하고 있다. 이 코덱을 이용한 파일의 확장자는 mp4 또는 m4v 이다. 하지만 mp4와 m4v 파일은 라이센스가 있기 때문에 이를 상업용으로 사용하기 위해서는 라이센스 비용이 발생하기 때문에 파이어폭스나 오페라와 같은 브라우저에서는 이를 지원하지 않는다.

그래서 파이어폭스와 오페라는 로열티가 전혀 없는 Theora 코덱을 사용한다. 이는 확장자가 ogg, ogv 이다. 오픈 소스용 동영상 포멧으로 WebM이 있는데 기술적으로 H.264 코덱과 비슷한 품질을 내면서, 향후 발전 가능성이 높아 크롬은 전적으로 이 코덱을 이용해서 서비스를 하겠다고 공헌했다. 확장자는 webm 이고 곧 유투브 사용될 것으로 예상된다.

어도비 플래시는 mp4를 지원한다. 거의 모든 브라우저가 플러그인으로 어도비 플래시를 지원하기에 이를 대체 방안으로 삼을 수 있다.

  IE Chrome Firefox Opera Safari
mp4 IE9이상 지원 지원 미지원 미지원 지원
ogg 미지원 지원 지원 지원 미지원
webM 미지원 지원 지원 지원 미지원

최대의 파일지원을 위해서는 위의 3개의 파일을 모두 링크하고 플래시 기반 비디오 플레이어를 대체 방안으로 지정하는 것이다.

파일 포맷 변경

각자 자주 사용하는 인코더 프로그램을 사용하여 인코딩을 하면 된다. 딱히 없다면 다음 팟인코더 추천.

다음 팟인코더 다운로드

파일을 저장할때는 PC저장용 탭 선택 -> PC/PMP용 체크 -> 파일형식은 원하는 데로, MP4의 경우 환경설정에서 MPEG-4 AVC/H.264를 선택해서 인코딩을 한다.

WebM 인코더는 화면이 매우 직관적이라 쉽게 사용할수 있다.

WebM 인코더 다운로드

video 태그 사용법

가장 기본적인 형태는 아래와 같다.

<video src="movie.mp4" width="360" height="240"></video>

안타깝게도 브라우저 제작사들은 단일 파일 형식에 대해 의견 일치를 이루지 못했기 때문에 각각의 브라우저가 사용하는 코덱에 맞게 파일을 세분화하여 제공해야 한다. 브라우저가 <video> 요소를 만나면 <source>에 지정된 비디오 파일과 오디오 파일이 담긴 컨테이너들을 읽어들여 재생할 수 있는 첫 번째 파일을 재생한다. 이는 source에 지정된 type 속성을 통해 가능하다.

<video width="360" height="240" controls autoplay preload="auto">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogv" type="video/ogg">
    <source src="movie.webm" type="video/webm">
    <p> 현재 사용하고 있는 브라우저는 비디오 태그를 지원하지 않습니다.(대체 콘텐츠) </p>
</video>

대체 텍스트 <p> 요소대신 <object>나 <embed>를 사용하여 플래시 파일을 링크시켜도 된다. 혹은 웹상에서 플레이 되지 못하면 다운로드 받는 형식으로라도 ~

<video width="360" height="240" controls autoplay preload="auto">
    <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'>
    <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4">
        <param name="movie" value="player.swf?file=movie.mp4">
        <a href="movie.mp4">movie 다운로드 받기</a>
    </object>
</video>

<source> 요소에는 media 속성을 붙일수 도 있는데, 이 속성을 사용해 브라우저에 화면 크기를 알아내고 화면 크기에 최적화된 다른 종류의 파일을 전송할 수 도 있다. 

<source src="hi.ogg" ... media="(min-device-width:800px)">
<source src="low.ogg">

video의 속성 값

속성명 값 기능및 역할
autoplay autoplay, 빈값 페이지가 열리면 비디오를 자동으로 재생
controls controls, 빈값 비디오를 제어할 수 있는 컨트롤 패널 사용
preload none, auto, meta 페이지가 열리면 비디오를 미리 로드해 둠
none : 프리로드를 사용하지 않음
auto : 페이지가 모두 열리면 비디오 프리로드
meta : 페이지가 모두 열리면 비디오 메타정보만 로드
poster 이미지 UR 비디오가 로드되기 전에 보여줄 이미지 설정
loop 반복횟수, 숫자 비디오를 몇번 반복재생할 것인지 설정
width, height 픽셀단위 숫자 비디오 스테이지의 너비및 높이

AUDIO

<audio> 태그도 video 태그와 마찬가지로 로얄티 문제로 인해 상황이 복잡하다.

오디오 파일의 종류와 이해

mp3 파일 포맷은 로열티로 인해 파이어폭스와 오페라에서는 지원하지 않는다.

  IE Chrome Firefox Opera Safari
mp3 9.0부터 지원 지원 미지원 미지원 지원
ogg 미지원 지원 지원 지원 미지원

audio 태그는 전반적으로 video 태그와 사용법이 같다. 대체 콘텐츠를 삽입할 수 있으며 여러가지 속성을 부여할 수 있다.

<audio controls>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
    <object type="application/x-shockwave-flash" data="player.swf?soundFile="sound.mp3">
        <param name="movie" value="player.swf?soundFile="sound.mp3">
        <a href="sound.mp3">sound download</a>
    </object>
</audio>

속성값으로는 src, autoplay, controls, loop, preload가 있다.

HTMLMediaElement 속성과 메서드

HTMLMediaElement는 video/audio 요소의 새로운 인터페이스이다. 다음에 설명할 속성과 메서드는 video 요소, audio 요소 둘 모두에서 이용할수 있다.

속성/메서드 설명
error 발생한 에러(MediaError형). 에러가 없으면 null
src 미디어 데이터의 URL. src 속성값에 대응
currentSrc 실제 로딩/재생 중인 미디어 데이터의 URL
NETWORK_EMPTY=0 networkState가 갖는 값. 요소의 초기 상태
NETWORK_IDLE=1 networkState가 갖는 값. 아직 네트워크에 접속하지 않음
NETWORK_LOADING=2 networkState가 갖는 값. 로딩 중
NETWORK_LOADING=3 networkState가 갖는 값. 로딩 완료
NETWORK_NO_SOURCE=4 networkState가 갖는 값. 지원되지 않는 형식의 미디어 파일로 로딩하지 않음
networkState 네트워크 접속 상태를 나타내는 정수 값
autobuffer 자동으로 로딩과 버퍼링을 시작할 것인가. autobuffer값에 대응
buffered 버퍼링된 범위(TimeRanges 형)
HAVE_NOTHING=0 readyState가 갖는 값. 아직 아무것도 다운로드되지 않음
HAVE_METADATA=1 readyState가 갖는 값. 미디어의 메타 데이터(재생 시간, 동영상의 넓이와 높이등) 다운로드 완료
HAVE_CURRENT_DATA=2 readyState가 갖는 값. 현재 재생 위치만큼 다운로드 완료
HAVE_FUTURE_DATA=3 readyState가 갖는 값. 현재 재생 위치에 더해 조금 더 재생할 수 있는 데이터만큼 다운로드 완료
readyState 미디어 데이터의 다운로드 상태를 나타내는 정수값
seeking 지정된 재생 위치로 이동 중인가?
currentTime 현재 재생 위치를 나타내는 정수값
startTime 재생을 시작할 수 있는 위치를 나타내는 정수 값
duration 미디어 데이터의 길이를 초 단위로 나타내는 값
paused 일시 정지 중인가?
defaultPlaybackRate 기본 재생 속도. 기본 값은 1.0
playbackRate 재생 속도. 기본 값은 1.0이며 0 이상의 값이라면 앞으로 재생하거나 마이너스 값이면 거꾸로 재생함
played 재생 완료 시간 범위(TimeRanges 형)
seekable 탐색 가능한 시간 범위(TimeRanges 형)
ended 재생이 끝났는가?
autoplay 재생할 수 잇는 상태가 되면 자동으로 재생을 시작. autoplay 속성값에 대응
loop 재생이 끝나면 처음부터 다시 반복하여 재생을 계속함. Loop 속성값에 대응
controls 각 브라우저 고유의 컨트롤 바를 표시. controls 속성값에 대응
volume 음량을 표시함. 0.0~1.0까지의 값을 가짐(1.0이 최대 음량)
muted 음을 소거했는가?
play() 동영상 재생
pause() 동영상 재생 일시 정지
load() 동영상을 다시 읽어들임(재생하지 않음)
canPlayType(type) 지정된 MIME 타입의 미디어 데이터를 재생할 수 있는가? 다음과 같은 문자열을 반환 값으로 얻음.
" "(공백문자) - 재생할 수 없음
"maybe" - 지원되는 파일 포맷임
"probably" - 아마도 재생 가능
codecs 파라미터가 없는 MIME 타입이라면 "probably"는 반환되지 않음.

또한, 다음과 같은 이벤트는 HTMLMediaElement에 정의되어 있으므로 video/audio 요소 어느 쪽에서나 사용할 수 있다.

이벤트 설명
loadstart 데이터 로딩 개시
progress 데이터 로딩 중(간헐적으로 여러 번 발생)
suspend 데이터 다운로드가 중지됨(에러 아님)
load 데이터 다운로드 완료
abort 데이터 다운로드가 에러에 의해 중지됨
error 에러 발생
loadend 데이터 로딩(무슨 이유든 상관없이) 완료. load, abort, error 뒤에 발생
emptied 로딩 시작과 함께 최초로 발생하는 이벤트
stalled 데이터 다운로드가 느려짐
play 재생과 함께 가장 먼저 일어나는 이벤트
pause 재생이 일시 정지됨
loadedmetadata 미디어의 메타 데이터(재생 시간, 동영상의 넓이와 높이등)를 읽어들임
loadeddata 미디어 데이터 로딩 완료
waiting 다음 프레임의 다운로드를 기다림
playing 재생이 시작됨
canplay 재생을 시작할 수 있음(재생할 수 있을 정도 로딩)
canplaythrough 이대로 다운로드 속도가 계속되면 마지막까지 재생할 수 있음(재생할 수 있을 정도로 로딩)
seeking 지정한 재생 위치로 이동중
seeked 지정한 재생 위치로 이동했음
timeupdate 재생 중(간헐적으로 여러 번 발생)
ended 재생 완료
ratechange 재생 속도가 변경됨
durationchange 미디어 데이터의 길이가 변함(메타 데이터를 읽을 때 발생)
volumechange 음량이 변경됨

source 요소의 속성과 메서드

source 요소의 DOM 인터페이스가 가진 속성과 메서드이다.

속성/메서드 설명
src 미디어 데이터의 URL. src 속성값에 대응
type 미디어 데이터의 MIME 타입. type 속성값에 대응
media 미디어 데이터의 이용 조건인 미디어 쿼리를 지정. media 속성값에 대응

TimeRanges의 속성과 메서드

HTMLMediaElement의 buffered, played, seekable 속성은 시간의 범위를 나타내는 TimeRanges 객체를 반환 값으로 얻는다. TimeRanges의 속성과 메서드는 다음과 같다.

속성/메서드 설명
length 인덱스의 최댓값을 반환
start(index) 지정한 인덱스의 시작 위치에 따른 재생 위치를 반환(초 단위)
end(index) 지정한 인덱스의 종료 위치에 따른 재생 위치를 반환(초 단위)

MediaError 속성과 메서드

HTMLMediaElement의 error 속성에 포함된 에러 객체(MediaError 형)이다.

속성/메서드 설명
MEDIA_ERR_ABORTED=1 미디어 데이터의 다운로드가 사용자에 의해 중지됨
MEDIA_ERR_NEWORK=2 네트워크 에러 때문에 다운로드가 중지됨
MEDIA_ERR_DECODE=3 미디어 데이터의 디코딩 실패
MEDIA_ERR_SRC_NOT_SUPPORTED=4 지원되지 않는 미디어 형식
code 에러코드, 위의 1~4 값 중 하나

EMBED 태그 사용법

embed 태그는 브라우저에 설치되어 있는 플러그인이 필요한 파일을 동작할 때 사용하는 태그로서, 관련 플러그인이 설치되어 있지 않다면 다운로드받을 수 있게 메세지를 띄울수 있다.

<embed src="파일경로.swf" width="550" height="400"></embed>

embed 속성값

속성명 값 기능및 역할
src 파일경로 각종 미디어, 동영상 파일이 위치한 파일의 주소
width, height 픽셀단위 숫자 embed 스테이지의 너비및 높이
loop true, false, 1, 0 기본 값은 false이며 true 또는 1일 경우 무한반복재생
false 또는 0일 경우 한번만 재생
autostart true, false, 1, 0 기본 값은 true이며 true 또는 1일 경우 자동시작
false 또는 0일 경우 시작버튼을 누르기전 까지 실행안됨
hidden true, fasle 기본값은 false이며 화면을 숨기고 싶을땐 true로 지정
volume 0 ~ -3400 0 이 최대볼륨을 나타내고 마이너스 값이 커질수록 소리가 작아진다.
mute true, false, 1, 0  기본값은 false이며 true 또는 1일 경우 음소거
false 또는 0일 경우 정상 볼륨
pluginspage 플러그인 URL 플러그인 프로그램이 설치되어 있지 않는 사용자들을 위하여 그 플러인 프로그램을 설치할 수 있도록 해당 플러그인을 제공하는 사이트의 주소를 알려주는 속성
showcontrols true, false, 1, 0 기본값은 true이며 true 또는 1일 경우 컨트롤(재생,볼륨조절등의 버튼) 패널이 보여짐
fasle 또는 0일 경우 컨트롤 패널이 숨겨짐
showstatusbar true, false, 1, 0 기본값은 false이며 true 또는 1일 경우 상태창이 보여짐
false 또는 0일 경우 상태창이 숨겨짐

미디어 형식에 따라 type옵션으로 플레이어를 지정하기

.WMA : src="http://___.wma" type="audio/x-ms-wma" pluginspage

.ASF : src="http://___.asf" type="audio/x-ms-asf" pluginspage

.MP3 : src="http://___.mp3" type="application/x-mplayer2" pluginspage

.wmv : src="http://___.wmv" type="type=video/x-ms-video" pluginspage

.WMV : src="mms://____.wmv" type="application/x-mplayer2" pluginspage

.WMV : src="http://___.wmv" type="video/x-ms-asf-plugin" pluginspage

.SWF : src="http://___.swf" type="application/x-shockwave-flash"pluginspage

.ra : 리얼플레이어로 재생 : type="audio/x-pn-realaudio-plugin"

.ram : 리얼플레이어로 재생 : type="audio/x-pn-realaudio-plugin"

MIME Media Types


'웹코딩 > HTML' 카테고리의 다른 글

[HTML5] 8장 그밖의 추가된 속성  (0) 2013.02.11
[HTML5] 7장 추가된 글로벌 속성  (2) 2013.02.10
[HTML5] 6-1장 새로운 태그  (0) 2013.02.09
[HTML5] 5장 문서 구조  (0) 2013.02.08
[HTML5] 4-2장 HTML5 기본 템플릿  (2) 2013.02.07
댓글 , 엮인글
WEBDIR
블로그 이미지 흉내쟁이 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바