처음부터 다시 배우는 html5 & css3 강의자료 6일차
DESCRIPTION
TRANSCRIPT
처음부터 다시 배우는 HTML5 & CSS3
강의 목차
1. 비디오 태그 탄생 배경
2. 비디오 코덱
3. 동영상 변환
4. 비디오 태그 사용
5. 하위 버전 브라우저에서 동영상 재생하기
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 탄생 배경IE9 이 나오기 전에도 사용자들은 웹에서 동영상을 보는 데 전혀 불편하지 않았습니다 . 대표적인 동영상 공유 사이트인 youtube.com 도 현재도 보는 데 전혀 지장이 없는데 , 왜 굳이 HTML5 에서는 video 태그를 추가했을까요 ?
이유는 단순합니다 . 웹 표준 이전까진 사용자가 동영상을 보기 위해선 모든 브라우저에서 플러그 인을 설치하거나 , ActiveX 를 이용해서 해당 플레이어를 설치해야만 했습니다 . 현재 Youtube 동영상도 PC 상에서 보는 영상들은 FLV 파일이며 ,
아이폰이나 아이패드에서 보는 Youtube 영상들은 mp4 파일 포맷입니다 .
이 책에서도 여러 번 언급했지만 , 이런 플러그인 또는 ActiveX 를 이용한 별도의 프로그램은 보안상 위험이 항상 존재합니다 .
따라서 HTML5 에선 브라우저 자체에서 별도의 플러그 인을 설치하지 않더라도 , 동영상을 재생할 수 있게끔 video 태그가 추가된 것입니다 .
보통 동영상이라 하면 흔히들 알고 있듯이 확장자가 avi 파일일 때가 많습니다 . 또는 mp4 파일도 많죠 . 아이폰으로 찍은 동영상은 대부분 확장자가 mp4 입니다 . 하지만 , 여기서 주의해야 하는 것이 avi 니 mp4 니 하는 것은 하나의 파일 타입일 뿐입니다 .
중요한 것은 동영상이 어떤 형식으로 제작되었는지가 중요합니다 . 즉 흔히 말하는 인코딩이 어떻게 되었는가가 HTML5 에서는 중요하다는 말입니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 코덱PC 에서 비디오를 보게 되면 비디오 플레이어는 이 파일 포맷이 뭔지 확인하고 , 인코딩은 어떻게 되었으며 , 오디오는 어떤 포맷으로 되었는지를 검사해서 , 오디오를 디코딩하고 , 동영상 또한 디코딩 과정을 통해 플레이어에서 재생되는 것입니다 .
한국에서는 흔히 동영상을 볼 때 곰 플레이어나 KMP 플레이어를 사용해서 동영상을 많이 보는데 , 이때 어떤 동영상을 재생할 때 “해당 코덱을 찾을 수 없습니다 . 프로그램을 업그레이드 해주세요 .” 라는 메시지가 가끔 뜰 때가 있습니다 . 여기서 해당코덱이라는 것이 동영상을 인코딩하는 하나의 알고리즘입니다 .
현재 업계의 표준 코덱은 H.264 입니다 . 이 코덱은 ‘ MPEG-4 part 10’ 또는 ‘ MPEG-4 AVC’ 라고 알려져 있습니다 . 2003 년 MPEG 그룹에서 개발되고 표준화된 코덱입니다 . 가장 유명하며 ,
애플에서 적극적으로 사용하는 코덱입니다 . 그래서 맥킨토시에 있는 기본적인 동영상 프로그램들은 기본적으로 H.264 코덱을 이용해서 저장됩니다 . 또한 모바일에서 보이는 Youtube 동영상도 H.264 코덱을 이용합니다 . 보통 H.264 코덱을 이용한 파일의 확장자는 mp4 또는 m4v 입니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 코덱하지만 mp4 와 m4v 파일은 파이어 폭스나 오페라에서는 재생되지 않습니다 . 가장 큰 이유는 mp4 파일 즉
H.264 코덱은 라이센스가 있습니다 . 즉 공공기관에서 사용하려면 사용료를 지급해야 합니다 . 자세한
라이센스 이야기는 하진 않겠습니다 .
단지 H.264 코덱을 상업용으로 사용하기 위해서는 라이센스 비용이 발생한다는 내용만 알면 됩니다 .
그래서 파이어 폭스와 오페라는 로열티가 전혀 없는 포맷을 지원하고 있습니다 .
바로 Theora 라고 불리는 코덱입니다 . 이 동영상 포맷은 Xiph.org 재단에서 개발된 코덱으로 로얄티가 전혀
없고 특허에서도 자유로운 동영상 포맷입니다 . 동영상이나 오디오 파일을 많이 가지고 있는 분들은 아시는
포맷입니다 . 흔히 확장자가 ogg 로 끝나는 파일입니다 . 동영상의 확장자는 ogv 파일입니다 .
또 다른 코덱은 WebM 이 있습니다 . 이 포맷은 VP8 비디오 코덱과 Vorbis 오디오코덱을 이용한 포맷으로
오픈 소스용 동영상 포맷입니다 . 기술적으로 H.264 코덱과 비슷한 품질을 내면서 , 향후 더욱 더 발전
가능성이 높은 코덱입니다 . 확장자가 .webm 입니다 . 이 코덱 역시 로열티가 없으며 , 구글이 향후 구글
크롬에선 전적으로 이 코덱을 이용해서 서비스하겠다고 공표한 적도 있습니다 .
처음부터 다시 배우는 HTML5 & CSS3
동영상 변환먼저 HTML5 문서에 동영상을 추가하기 위해선 적절한 인코딩으로 파일을 변환해 줘야 합니다 .
보통 많은 동영상 제작기기에서 나온 파일들의 확장자는 AVI , MP4, 또는 OV 인 경우가 많습니다 .
그러면 이 파일들을 웹에서 보여주기 위해서는 파일 인코딩으로 코덱을 바꿔서 변환할 필요가 있습니다 . 먼저 맥에서는 Quick Time Player 에서 바로 H.264 파일 포맷으로 동영상 변환이 가능합니다 .
맥에 있는 Quick time 플레이어에서 동영상 변환
QuickTime Player 의 메뉴에서 “파일 > 웹용으로 저장…”하면 그림과 같은 화면이 나오며 원하는 파일 사이즈로 변환해주면 됩니다 .
처음부터 다시 배우는 HTML5 & CSS3
동영상 변환맥은 이렇게 사용하지만 대부분의 사용자는 PC 를 사용하기 때문에 PC 에서 포맷을 변환해야 하는데요 .
많은 인코더가 있지만 이 책에서는 다음 팟 인코더를 사용해서 변환해 보겠습니다 .
다음 팟 인코더는 직관적인 인터페이스와 사용법이 정말 쉽다는 장점이 있습니다 . 그리고 여러 가지 파일 포맷과 인코딩 옵션을 지원하기 때문에 웹 용으로 사용하기에 아주 좋습니다 .
그림과 같이 http://
tvpot.daum.net/encoder/PotEncoderSpec.do
에서 다음 팟 인코더를 다운 받은 후 설치하면 됩니다 .
설치 방법도 굉장히 쉽습니다 .
설치 후 다음 팟 인코더를 실행하여 원하는 파일 포맷으로 동영상을 저장해 주면 끝 입니다 .
처음부터 다시 배우는 HTML5 & CSS3
동영상 변환그림을 보면 저장할 때 웹 업로드용을 선택하지 말고 반드시 PC 저장용을 선택한 후 PC/PMP 용에서 파일 형식을 MP4 로 하나 인코딩을 하고 나서 ogv 파일 포맷으로 하나 더 만들어 주기 바랍니다 .
반드시 웹 업로드용으로 설정하지 말고 , PC 저장용으로 설정해야 합니다 .
처음부터 다시 배우는 HTML5 & CSS3
동영상 변환그림에서와 같이 환경설정에 들어가면 MP4 를 저장하는 옵션이 보입니다 .
여기서 MPEG-4 AVC/H.264 를 선택해서 인코딩을 해주면 됩니다
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title> 비디오 예제 </title></head> <body><video src="DSC_2190.mp4"></video> </body></html>
이렇게 해서 변환된 파일을 해당 폴더 ( 여기서는 html 문서가 있는 폴더 ) 에 넣은 후다음과 같이 입력해 주면 됩니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용예제에서 width 과 height 를 적용해서 비디오 파일의 화면 크기도 조정할 수 있습니다 .
<video src="DSC_2190.mp4" width="400" height="240"> </video>
이렇게 비디오의 크기를 조정한 결과는 다음 그림 입니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용그런데 이것을 어떻게 플레이 할까요 ? 막상 이 태그만 가지고 실행하면 동영상이 재생되지 않습니다 . 물론 동영상에 마우스 포인터를 올려놓고 왼쪽 버튼을 클릭하면 팝업 메뉴가 나와서 재생 가능합니다만 , 보통은 그런 생각을 해낼 수 없겠죠 ?
이럴 경우 <video> 태그 내부에 여러 가지 옵션을 줄 수 있습니다 .
autoplay, controls, preload 와 같은 옵션을 지정하면 동영상이 자동 재생되거나 , 밑 부분에 컨트롤러가 생기거나 , 또는 파일 사이즈가 큰 동영상일 때는 preload 가 될 수 있습니다 .
여기에서는 아래와 같이 옵션을 추가해 보겠습니다 .
<video src="DSC_2190.mp4" width="400" height="240" controls> </video>
결과는 오른쪽 그림과 같습니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title> 비디오 예제 </title></head><body><video src="DSC_2190.mp4" width="400" height="240" controls autoplay preload="auto"> </video></body></html>
마우스 포인터가 동영상 화면 위로 가면 동영상 밑부분에 재생과 관련된 컨트롤러가 보이게 됩니다 .
또한 autoplay 를 추가하게 되면 해당 화면에서 바로 동영상이 재생됩니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용하지만 여기서 보이는 mp4 파일은 파이어폭스나 오페라에서는 재생할 수 없습니다 . 그림에서 보시면 파이어 폭스에서는 X 로 표시되어 나타나지 않습니다 . 그러면 이 경우에는 어떻게 할까요 ?
다음 팟 인코더에서 mp4 파일로 인코딩한 후 , 한번 더 ogv 파일로 인코딩을 하라고 했습니다 .
이렇게 ogv 파일인 경우에는 파이어폭스와 오페라에서 재생 가능합니다 .
이 경우에는 두 개의 파일을 불러와야 하기 때문에 다음 페이지의 예제와 같은 방법을 사용해야 합니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용<!DOCTYPE HTML><html><head><meta charset="utf-8"><title> 비디오 예제 </title></head><body><video width="400" height="240" controls au-toplay 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>
파이어 폭스에서 동영상 재생
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용마지막으로 WebM 파일은 현재 http://webmsoft.com/free-webm-encoder.html 여기서 WebM
인코더를 다운 받을 수 있습니다 . 인코더의 화면이 매우 직관적이어서 쉽게 webm 파일을 만들 수 있습니다 . 그림에서 보면 add 버튼을 누르고 Convert to WebM 만 누르면 끝입니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title> 비디오 예제 </title></head><body><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"'> <source src="DSC_2190.webm" type='video/webm; codecs="vp8, vorbis"'></video> </body></html>
최종적으로 모든 동영상 파일을 추가한 코드는 다음과 같습니다 .
처음부터 다시 배우는 HTML5 & CSS3
비디오 태그 사용현재 video 태그는 IE 는 9 부터 지원되기 때문에 하위 브라우저에서는 사용할 수 없습니다 . 파이어 폭스는 3.5 이상 사파리는 3.0 이상 오페라와 크롬은 전부 지원됩니다 .
그렇기 때문에 다음과 같이 IE9 하위 버전을 사용할 경우 video 가 지원되지 않는다는 메시지를 보여줘야 합니다 .
<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"'> <source src="DSC_2190.webm" type='video/webm; codecs="vp8, vorbis"'> <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 파일을 지원한다고 하지만 현재 언제까지 지원한다고는 공표하지 않은 상태입니다 .
처음부터 다시 배우는 HTML5 & CSS3
하위 버전 브라우저에서 동영상 재생하기Internet Explorer 인 경우 9 버전을 제외한 하위 버전인 경우 HTML 5 을 지원하지 않습니다 .
하지만 이 책에서 보여줬듯이 약간의 편법을 통해 HTML 5 태그들이 하위 버전의 IE 에서도 동작하는 것을 확인했습니다 .
하지만 동영상인 경우에는 하위 버전 호환성을 이용해서 태그를 인식하는 방법을 사용하더라도 video
태그에 있는 파일 포맷을 브라우저에서 재생할 수 없습니다 .
동영상 파일이 정말 중요하고 , 사용자들에게 보여줘야만 하는 파일일 경우 IE9 이하의 브라우저를 사용하는 사용자들에게도 보여져야 합니다 .
특히 IE9 인 경우 윈도우 비스타 또는 윈도우 7 에서만 설치되기 때문에 윈도우 XP 사용자인 경우 IE9 을 설치하고 싶어도 설치하지 못합니다 .
그렇다면 방법이 없을까요 ? 몇 가지 편법을 이용하면 사용할 수 있습니다 .
실버라이트 (MS 에서 만든 플래시 대항마 ) 를 사용하는 방법과 플래시 비디오 플레이어를 이용하는 방법이 있습니다 .
이 부분부터 P.421 부록 참조하세요 .
처음부터 다시 배우는 HTML5 & CSS3
하위 버전 브라우저에서 동영상 재생하기첫번째 방법은 실버라이트를 이용한 방법입니다 .
이 방법은 브라우저에 실버라이트 플러그 인이 설치 된 경우 사용 가능합니다 .
실버라이트는 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 태그 부분은 건너뛰고 , 바로 실버라이트가 적용된 부분에서 파일이 재생되는 것입니다 .
처음부터 다시 배우는 HTML5 & CSS3
하위 버전 브라우저에서 동영상 재생하기<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"'> <source src="DSC_2190.webm" type='video/webm; codecs="vp8, vorbis"'> <!-- 실버라이트 이용하기 --> <object data="data:application/x-silverlight-2," type="application/x-sil-verlight-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>
처음부터 다시 배우는 HTML5 & CSS3
하위 버전 브라우저에서 동영상 재생하기
실버라이트 플레이어를 다운 받을 수 있는 Silverlight Video Player 사이트
IE tester 의 IE8 모드에서 재생되는 동영상
처음부터 다시 배우는 HTML5 & CSS3
하위 버전 브라우저에서 동영상 재생하기두번째 방법은 실버라이트를 사용하는 것과 비슷한 방법으로 플래시 비디오 플레이어를 사용하는 방법입니다 . 일반적으로 실버라이트 플러그인 보단 플래시 플러그인이 보편적으로 많이 설치되어 있기 때문에 이 방법이 어떻게 보면 더 유효 할지 모릅니다 .
플래시를 이용한 비디오 플레이어는
http://flowplayer.org/download/index.html
여기서 다운로드 할 수 있습니다 .
그림 참조
처음부터 다시 배우는 HTML5 & CSS3
하위 버전 브라우저에서 동영상 재생하기플레이어를 다운 받은 후 예제와 같이 입력합니다 . <!DOCTYPE HTML><html><head><meta charset="utf-8"><title> 비디오 예제 </title></head><body><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"'> <source src="DSC_2190.webm" type='video/webm; codecs="vp8, vorbis"'> <!-- flow plyaer 이용하기 --> <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>
처음부터 다시 배우는 HTML5 & CSS3
하위 버전 브라우저에서 동영상 재생하기예제를 보시면 일반적인 플래시 파일 삽입과 매우 유사하다는 것을 알 수 있습니다 .
사실 똑 같다고 보시면 되며 , 일반 플래시 파일을 추가할 때와 차이점은 아래의 코드 부분입니다 .
<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 표준 포맷의 사이트를 만들고 , 마지막에 하위 브라우저에 대한 처리를 해 줌으로써 , 모든 브라우저에서 동일한 결과를 얻을 수 있습니다 .