|
Category :
HTML5
Comments :
댓글쓰기
Posted by
장창학
at
5:06 PM
Mark Pilgrim의 Dive Into HTML5 웹사이트는 HTML5로 구축된 웹사이트이며, 동시에 HTML5로 할 수 있는 재미있는 것들을 책구성으로 만들어 놓은 곳입니다. 일부 브라우저에서는 제대로 보이지 않을 수 있으나 IE 8, FireFox 3.5, Safari 4 등의 이상버전이면 HTML5로 렌더링된 사이트를 볼 수 있을 것 입니다. 브라우저 소스보기를 통해 대강의 HTML5의 태그를 볼 수 있습니다.
오늘 저는 Dive Into HTML5에서 알려주는 HTML5 비디오 삽입예제를 만들어 볼 생각입니다. 일반적으로 완전히 무료인 OGV, OGG 포맷을 써보겠니다. 물론 현재 Youtube나 Vimeo의 경우 .H264코덱을 쓰기 때문에 자유소프트웨어인 Theora코덱은 FireFox만 지원하므로 FireFox에서는 Youtube의 HTML5비디오 플레이어를 재생할 수 없습니다. 아울러 FLV나, WMV, MOV와 같은 포맷은 각각 Adobe, Microsoft, Apple과 같은 특정회사의 포맷이므로 반드시 이들 회사에서 배포한 브라우저 플러그인 플레이어 및 코덱이 필요합니다.(HTML5의 근간은 특정회사의 플러그인에서 벗어나는 것 입니다.) 대부분의 일반 Windows 사용자에게는 OGV나 OGG코덱이 특정 회사의 플레이어안에서만 작동되도록 각각의 플레이어 회사에서 자사의 플레이어에 임베드하여 배포되거나(유명한 것이 Gom Player와 같은 것들) 자사의 포맷외에 재생을 지원하는 것으로 제공됩니다. OGV나 OGG의 Windows용 코덱은 http://www.xiph.org/dshow/ 에서 다운로드 가능합니다.
http://diveintohtml5.org/video.html 에서 소개하는 Firefogg라는 FireFox용 확장기능을 이용해서 OGV비디오를 쉽게 변환할 수 있습니다. (물론 공개된 일반 비디오변환 프로그램에서도 지원하는 것이 있을 것 입니다. OGV변환을 무료로 쓸 수 있는 변환소프트웨어를 소개해 주세요.) Dive Into HTML5(http://diveintohtml5.org/video.html)의 내용을 살펴보면 Firefogg로 쉽게 일반 영상을 변환할 수 있을 것 입니다. (내부적 변환설정 화면은 jQuery의 UI중 Remond 테마를 쓰고 있네요. ^^ 반가운 jQuery!!) 일단 로컬 비디오파일을 다양한 옵션으로 변환할 수 있는데, FireFox 확장기능을 추가한 후 추후 변환을 위해서는 http://firefogg.org/에 접속하여 "Make Ogg Video" 링크를 클릭하면 됩니다. 저장시 OGG로 저장하세요.(기본값은 OGV)
이 비디오를 가지고 HTML5 문서를 만들어 봅니다. FireFox에서 어떻게 재생되는지 확인해 보세요. 우선 간단하게 ColdFusion(또는 PHP에서) HTTP_USER_AGENT를 통해 접속브라우저를 확인한 다음 FireFox에서는 OGG비디오를, 기타 브라우저에서는 MP4포맷을 선택적으로 재생시켜볼 것 입니다. 그렇게 하는 이유는 아직 모든 브라우저가 HTML5태그를 지원하지 않고, FireFox의 경우 OGG, MP4모두 재생가능하지만 이왕이면 오픈소스코덱을 써보자는 것이고, Apple의 사파리는 아이폰등에서 재생을 원활히 하기 위해 아이폰에서도 지원하는 MP4를 선택한 것 입니다.
Source
<cfif CGI.HTTP_USER_AGENT contains "FireFox"> <cfoutput> < !DOCTYPE html> <html> <head> <title>HTML5 Video Sample - PetShop Boys : Did You See Me Coming.OGG</title> </head> <body> <video width="600" height="336" src="DidYouSeeMeComingHD.ogg" controls="controls" autoplay> Your browser does not support the HTML5 <video> tag. - 귀하의 브라우저는 HTML5 <video> 태그를 지원하지 않습니다. </video> </body> </html> </cfoutput> <cfelse> <cfoutput> < !DOCTYPE html> <html> <head> <title>HTML5 Video Sample - PetShop Boys : Did You See Me Coming.MP4</title> </head> <body> <video width="600" height="336" src="DidYouSeeMeComingHD.mp4" controls="controls" autoplay> Your browser does not support the HTML5 <video> tag. - 귀하의 브라우저는 HTML5 <video> 태그를 지원하지 않습니다. </video> </body> </html> </cfoutput> </cfif>
<Firefox 3.5이상에서의 HTML5 비디오 재생 - OGG포맷>
<Safari 4 이상에서의 HTML5 비디오 재생 - MP4포맷>
ColdFusion (74)
Comments