처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차

처음부터 다시 배우는

HTML5&CSS3
실전 웹 표준 사이트 제작까지

양용석(ugpapa@gmail.com)

처음부터 다시 배우는 HTML5 & CSS3

강의 목차

1. 비디오 태그 탄생 배경

2. 비디오 코덱

3. 동영상 변환

4. 비디오 태그 사용

5. 하위 버전 브라우저에서 동영상 재생하기


비디오 태그 탄생 배경
IE9이 나오기 전에도 사용자들은 웹에서 동영상을 보는 데 전혀 불편하지 않았습니다. 대표적인 동영상 공유 사이트인
youtube.com도 현재도 보는 데 전혀 지장이 없는데, 왜 굳이 HTML5에서는 video 태그를 추가했을까요?

이유는 단순합니다. 웹 표준 이전까진 사용자가 동영상을 보기 위해선 모든 브라우저에서 플러그 인을 설치하거나,
ActiveX를 이용해서 해당 플레이어를 설치해야만 했습니다. 현재 Youtube 동영상도 PC상에서 보는 영상들은 FLV 파일
이며, 아이폰이나 아이패드에서 보는 Youtube 영상들은 mp4 파일 포맷입니다.

이 책에서도 여러 번 언급했지만, 이런 플러그인 또는 ActiveX를 이용한 별도의 프로그램은 보안상 위험이 항상 존재합
니다. 따라서 HTML5에선 브라우저 자체에서 별도의 플러그 인을 설치하지 않더라도, 동영상을 재생할 수 있게끔 video
태그가 추가된 것입니다.

보통 동영상이라 하면 흔히들 알고 있듯이 확장자가 avi 파일일 때가 많습니다. 또는 mp4 파일도 많죠. 아이폰으로 찍은
동영상은 대부분 확장자가 mp4입니다. 하지만, 여기서 주의해야 하는 것이 avi니 mp4니 하는 것은 하나의 파일 타입일
뿐입니다.
중요한 것은 동영상이 어떤 형식으로 제작되었는지가 중요합니다. 즉 흔히 말하는 인코딩이 어떻게 되었는가가 HTML5
에서는 중요하다는 말입니다.


비디오 코덱
PC에서 비디오를 보게 되면 비디오 플레이어는 이 파일 포맷이 뭔지 확인하고, 인코딩은 어떻게
되었으며, 오디오는 어떤 포맷으로 되었는지를 검사해서, 오디오를 디코딩하고, 동영상 또한 디
코딩 과정을 통해 플레이어에서 재생되는 것입니다.

한국에서는 흔히 동영상을 볼 때 곰 플레이어나 KMP 플레이어를 사용해서 동영상을 많이 보는
데, 이때 어떤 동영상을 재생할 때 “해당 코덱을 찾을 수 없습니다. 프로그램을 업그레이드 해주
세요.”라는 메시지가 가끔 뜰 때가 있습니다. 여기서 해당코덱이라는 것이 동영상을 인코딩하는
하나의 알고리즘입니다.

현재 업계의 표준 코덱은 H.264입니다. 이 코덱은 „MPEG-4 part 10‟ 또는 „MPEG-4 AVC‟라고 알
려져 있습니다. 2003년 MPEG 그룹에서 개발되고 표준화된 코덱입니다. 가장 유명하며, 애플에
서 적극적으로 사용하는 코덱입니다. 그래서 맥킨토시에 있는 기본적인 동영상 프로그램들은 기
본적으로 H.264 코덱을 이용해서 저장됩니다. 또한 모바일에서 보이는 Youtube 동영상도 H.264
코덱을 이용합니다. 보통 H.264 코덱을 이용한 파일의 확장자는 mp4 또는 m4v입니다.


비디오 코덱
하지만 mp4와 m4v 파일은 파이어 폭스나 오페라에서는 재생되지 않습니다. 가장 큰 이유는 mp4 파일 즉
H.264 코덱은 라이센스가 있습니다. 즉 공공기관에서 사용하려면 사용료를 지급해야 합니다. 자세한 라이센스
이야기는 하진 않겠습니다.

단지 H.264 코덱을 상업용으로 사용하기 위해서는 라이센스 비용이 발생한다는 내용만 알면 됩니다.
그래서 파이어 폭스와 오페라는 로열티가 전혀 없는 포맷을 지원하고 있습니다.
바로 Theora라고 불리는 코덱입니다. 이 동영상 포맷은 Xiph.org 재단에서 개발된 코덱으로 로얄티가 전혀 없
고 특허에서도 자유로운 동영상 포맷입니다. 동영상이나 오디오 파일을 많이 가지고 있는 분들은 아시는 포맷
입니다. 흔히 확장자가 ogg로 끝나는 파일입니다. 동영상의 확장자는 ogv 파일입니다.

또 다른 코덱은 WebM이 있습니다. 이 포맷은 VP8 비디오 코덱과 Vorbis 오디오코덱을 이용한 포맷으로 오픈
소스용 동영상 포맷입니다. 기술적으로 H.264 코덱과 비슷한 품질을 내면서, 향후 더욱 더 발전 가능성이 높은
코덱입니다. 확장자가 .webm입니다. 이 코덱 역시 로열티가 없으며, 구글이 향후 구글 크롬에선 전적으로 이 코
덱을 이용해서 서비스하겠다고 공표한 적도 있습니다.


동영상 변환
먼저 HTML5 문서에 동영상을 추가하기 위해선 적절한 인코딩으로 파일을 변환해 줘야 합니다.

보통 많은 동영상 제작기기에서 나온 파일들의 확장자는 AVI , MP4, 또는 OV인 경우가 많습니다.
그러면 이 파일들을 웹에서 보여주기 위해서는 파일 인코딩으로 코덱을 바꿔서 변환할 필요가 있습니
다. 먼저 맥에서는 Quick Time Player에서 바로 H.264 파일 포맷으로 동영상 변환이 가능합니다.

QuickTime Player의 메뉴에서 “파
일 > 웹용으로 저장…”하면
그림과 같은 화면이 나오며 원하
는 파일 사이즈로 변환해주면 됩
니다.

맥에 있는 Quick time 플레이어에서 동영상 변환


동영상 변환
맥은 이렇게 사용하지만 대부분의 사용자는 PC를 사용하기 때문에 PC에서 포맷을 변환해야 하는데요.
많은 인코더가 있지만 이 책에서는 다음 팟 인코더를 사용해서 변환해 보겠습니다.

다음 팟 인코더는 직관적인 인터페이스와 사용법이 정말 쉽다는 장점이 있습니다. 그리고 여러 가지 파
일 포맷과 인코딩 옵션을 지원하기 때문에 웹 용으로 사용하기에 아주 좋습니다.

그림과 같이
http://tvpot.daum.net/encoder/PotEncoderSpec.do
에서 다음 팟 인코더를 다운 받은 후 설치하면 됩니다.
설치 방법도 굉장히 쉽습니다.
설치 후 다음 팟 인코더를 실행하여 원하는 파일 포맷
으로 동영상을 저장해 주면 끝 입니다.


동영상 변환
그림을 보면 저장할 때 웹 업로드용을 선택하지 말고 반드시 PC 저장용을 선택한 후 PC/PMP용에서 파일 형식
을 MP4로 하나 인코딩을 하고 나서 ogv 파일 포맷으로 하나 더 만들어 주기 바랍니다.
반드시 웹 업로드용으로 설정하지 말고, PC 저장용으로 설정해야 합니다.


동영상 변환
그림에서와 같이 환경설정에 들어가면 MP4를 저장하는 옵션이 보입니다.
여기서 MPEG-4 AVC/H.264를 선택해서 인코딩을 해주면 됩니다


비디오 태그 사용
이렇게 해서 변환된 파일을 해당 폴더(여기서는 html 문서가 있는 폴더)에 넣은 후
다음과 같이 입력해 주면 됩니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>비디오 예제</title>
</head>

<body>
<video src="DSC_2190.mp4"></video>
</body>
</html>


예제에서 width 과 height를 적용해서 비디오 파일의 화면 크기도 조정할 수 있습니다.

<video src="DSC_2190.mp4" width="400" height="240"> </video>

이렇게 비디오의 크기를 조정한 결과는 다음 그림 입니다.


그런데 이것을 어떻게 플레이 할까요? 막상 이 태그만 가지고 실행하면 동영상이 재생되지 않습니다.
물론 동영상에 마우스 포인터를 올려놓고 왼쪽 버튼을 클릭하면 팝업 메뉴가 나와서 재생 가능합니다
만, 보통은 그런 생각을 해낼 수 없겠죠?

이럴 경우 <video> 태그 내부에 여러 가지 옵션을 줄 수 있습니다.

autoplay, controls, preload와 같은 옵션을 지정하면 동영상이 자동 재생되거나, 밑 부분에 컨트롤러가
생기거나, 또는 파일 사이즈가 큰 동영상일 때는 preload가 될 수 있습니다.

여기에서는 아래와 같이 옵션을 추가해 보겠습니다.

<video src="DSC_2190.mp4" width="400" height="240" controls> </video>

결과는 오른쪽 그림과 같습니다.


마우스 포인터가 동영상 화면 위로 가면 동영상 밑부분에 재생과 관련된 컨트롤러가 보이게
됩니다. 또한 autoplay를 추가하게 되면 해당 화면에서 바로 동영상이 재생됩니다.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video src="DSC_2190.mp4" width="400" height="240" controls autoplay preload="auto">
</video>
</body>
</html>


하지만 여기서 보이는 mp4 파일은 파이어폭스나 오페라에서는 재생할 수 없습니다. 그림에서 보시면
파이어 폭스에서는 X로 표시되어 나타나지 않습니다. 그러면 이 경우에는 어떻게 할까요?

다음 팟 인코더에서 mp4 파일로 인코딩한 후, 한번 더 ogv 파일로 인코딩을 하라고 했습니다.

이렇게 ogv 파일인 경우에는 파이어폭스와 오페라에서 재생 가능합니다.

이 경우에는 두 개의 파일을 불러와야 하기 때문에 다음 페이지의 예제와 같은 방법을 사용해야 합니다.


<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video width="400" height="240" controls autoplay
preload="auto">
<source src="DSC_2190.mp4">
<source src="DSC_2190.ogv">
</video>
</body>
</html> 파이어 폭스에서 동영상 재생

여기서 더욱 더 정확하게 사용하기 위해서는 다음과 같이 각 동영상의 타입과 코덱을 정의해 주면 더
좋습니다.

<video width="400" height="240" controls autoplay preload="auto">
<source src="DSC_2190.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="DSC_2190.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>


마지막으로 WebM 파일은 현재 http://webmsoft.com/free-webm-encoder.html 여기서 WebM 인코더를
다운 받을 수 있습니다. 인코더의 화면이 매우 직관적이어서 쉽게 webm 파일을 만들 수 있습니다. 그림
에서 보면 add 버튼을 누르고 Convert to WebM만 누르면 끝입니다.


최종적으로 모든 동영상 파일을 추가한 코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<source src="DSC_2190.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</body>
</html>


현재 video 태그는 IE는 9부터 지원되기 때문에 하위 브라우저에서는 사용할 수 없습니다. 파이어 폭스
는 3.5 이상 사파리는 3.0 이상 오페라와 크롬은 전부 지원됩니다.

그렇기 때문에 다음과 같이 IE9 하위 버전을 사용할 경우 video가 지원되지 않는다는 메시지를 보여줘
야 합니다.

<p>현재 사용하고 있는 브라우저는 비디오 태그를 지원하지 않습니다.</p>
</video>

현재 브라우저에서 지원되는 비디오 포맷은 다음 표와 같습니다.

코덱/브라우저 IE FireFox 사파리 크롬 오페라 아이폰 안드로이드
ogg, ogv - 3.5+ - 5.0+ 10.5+ - -
mp4, m4v 9+ - 3.0+ 5.0+ - 3.0+ 2.0+
WebM 9+ 4.0+ - 6.0+ 11.o+ - -

주) IE9에서는 WebM을 지원하는데, 이것은 사용자가 VP8 코덱을 직접 설치했을 경우 지원한다고 합니다. 안드로이
드 기반의 스마트 폰에서는 WebM 파일을 지원한다고 하지만 현재 언제까지 지원한다고는 공표하지 않은 상태입니다.

이 부분부터 P.421 부록 참조하세요.

하위 버전 브라우저에서 동영상 재생하기
Internet Explorer 인 경우 9 버전을 제외한 하위 버전인 경우 HTML 5을 지원하지 않습니다.

하지만 이 책에서 보여줬듯이 약간의 편법을 통해 HTML 5 태그들이 하위 버전의 IE에서도 동작하는 것
을 확인했습니다.

하지만 동영상인 경우에는 하위 버전 호환성을 이용해서 태그를 인식하는 방법을 사용하더라도 video
태그에 있는 파일 포맷을 브라우저에서 재생할 수 없습니다.

동영상 파일이 정말 중요하고, 사용자들에게 보여줘야만 하는 파일일 경우 IE9 이하의 브라우저를 사용
하는 사용자들에게도 보여져야 합니다.

특히 IE9 인 경우 윈도우 비스타 또는 윈도우 7에서만 설치되기 때문에 윈도우 XP 사용자인 경우 IE9을
설치하고 싶어도 설치하지 못합니다.

그렇다면 방법이 없을까요? 몇 가지 편법을 이용하면 사용할 수 있습니다.

실버라이트(MS 에서 만든 플래시 대항마)를 사용하는 방법과 플래시 비디오 플레이어를 이용하는 방법
이 있습니다.


첫번째 방법은 실버라이트를 이용한 방법입니다.

이 방법은 브라우저에 실버라이트 플러그 인이 설치 된 경우 사용 가능합니다.

실버라이트는 MS 에서 어도비의 플래시에 대항하기 위해 만든 동영상 포맷입니다.

우선 실버라이트로 만들어진 동영상 플레이어를 다운 받습니다.

http://slvideoplayer.codeplex.com/ 여기에서 다운 받을 수 있습니다.

그리고 나서 <video> 태그 사이에 코드를 입력합니다. ( 다음 페이지)

코드가 보기엔 복잡하게 보이지만 별로 복잡한 것은 없습니다.
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="240"> 여기서
실버라이트에 대한 정의와 동영상이 재생되는 크기를 정해 줍니다.

<param name="source" value="VideoPlayer.xap"/>

여기가 중요한데, 다운 받은 VideoPlayer.xap 의 경로를 지정해 주는 곳입니다.

<param name="initParams" value="m=DSC_2190.mp4" />

여기서 동영상 파일의 위치를 지정합니다. 결과는 다 다음 페이지에서 확인 가능합니다.
IE9 이하 브라우저에서는 video 태그를 인식하지 못하기 때문에 video 태그 부분은 건너뛰고, 바로 실버라이트가 적용된
부분에서 파일이 재생되는 것입니다.

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400"
height="240">
<param name="source" value="VideoPlayer.xap"/>
<param name="background" value="white" />
<param name="initParams" value="m=DSC_2190.mp4" />
<param name="minruntimeversion" value="2.0.31005.0" />
<a href="http://go.microsoft.com/fwlink/?LinkId=124807" style="text-decoration:
none;"><img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft
Silverlight" style="border-style: none"/>
</a>
</object>
</video>



실버라이트 플레이어를 다운 받을 수 있는
Silverlight Video Player 사이트

IE tester의 IE8 모드에서 재생되는 동영상


두번째 방법은 실버라이트를 사용하는 것과 비슷한 방법으로 플래시 비디오 플레이어를 사용하는 방법
입니다. 일반적으로 실버라이트 플러그인 보단 플래시 플러그인이 보편적으로 많이 설치되어 있기 때
문에 이 방법이 어떻게 보면 더 유효 할지 모릅니다.

플래시를 이용한 비디오 플레이어는

http://flowplayer.org/download/index.html

여기서 다운로드 할 수 있습니다.

그림 참조

플레이어를 다운 받은 후 예제와 같이 입력합니다.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<object width="400" height="240" type="application/x-shockwave-flash" data="flowplayer-
3.2.7.swf">
<param name="movie" value="flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url":
"http://css3.zerois.net/images/DSC_2190.mp4","autoPlay":false, "autoBuffering":true}}' />
</object>
</video>
</body>
</html>


예제를 보시면 일반적인 플래시 파일 삽입과 매우 유사하다는 것을 알 수 있습니다.
사실 똑 같다고 보시면 되며, 일반 플래시 파일을 추가할 때와 차이점은 아래의 코드 부분입니다.
<param name="flashvars" value='config={"clip": {"url":
"http://css3.zerois.net/images/DSC_2190.mp4","autoPlay":false, "autoBuffering":true}}' />
여기서 동영상의 위치를 지정해 주고 몇 가지 값에
대한 설정만 해주면 문제 없이 IE9 하위 버전의
브라우저에서도 mp4 파일이 재생 가능합니다.
그림 참조

HTML 5에서 아무리 좋은 기능을 지원한다고 하지만
정작 사용자들이 많이 쓰는 브라우저에서 해당 요소를
볼 수 없다면, 사실 무용지물과 같습니다.

여기 제시된 방법이 최선은 아니며, 이외에도 인터넷
검색을 통하면 여러 가지 방법을 더 찾을 수도 있습니다. 여러분들도 본인에 맞는 방법을 찾아서 제일
따라서, 먼저 HTML 5 표준 포맷의 사이트를 만들고,
마지막에 하위 브라우저에 대한 처리를 해 줌으로써,
모든 브라우저에서 동일한 결과를 얻을 수 있습니다.

처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차 (20)

처음부터 다시 배우는 HTML5 & CSS3 강의자료 6일차