nooree's coldfusion blog

23 February 2010

Full HD on HTML5 - HTML5 비디오의 성능 과연 Flash에 밀리나?

Category : HTML5

Comments : 댓글쓰기

Posted by 장창학 at 4:27 AM

Ajaxian(I Can’t Believe It’s Not Flash-이게 플래시가 아니란 것을 믿을 수 없어요.)에서 재밌는 글을 보았습니다. Jilion.com에서 테스트 중인 HTML5 비디오 플레이어의 성능이 Flash보다 낫다는 것 인데요. Ajaxian 그림에서 보면 Full HD 영상의 CPU점유률이 HTML5는 10%대 Flash는 100%라고 되어 있는데 다소 공격적으로 한말 같지만 HTML5의 비디오 성능은 거의 브라우저에 의존적인데 어떻게 저런 평가가 나올 수 있나 했습니다. 하지만 코덱의 성능이 곧 영상재생의 성능이라고 봤을때 적절한 코덱의 선택으로 Flash보다 나은 퍼포먼스를 보일 수 도 있겠네요. 암튼 브라우저의 성능이나 Flash의 성능이나 다들 앞으로 많은 개선이 있겠지만 무엇보다 저야 OGV포맷을 아무래도 오픈소스라 미는 입장입니다만. Flash에서도 오픈소스 코덱을 지원했으면 하는데 제 바램이지만 뭐 지들 Flash Player 성능 개선이 우선이겠죠. 괜히 넣었다가 성능 꽝이면 바로 깨작이니..ㅋ

암튼 HTML5의 비디오는 앞으로 발전할 것은 자명한 사실이고, Flash가 98% 이하의 점유율이 내려가는 것이 너무나 안타까운 분들에게는 다소 실망스럽겠지만 일부 Flash의 비디오 영역을 잠식할 것으로 보는 것은 저만의 생각은 아닐 것으로 확신합니다. 하지만 Flash를 능가하는 점유율을 보이진 않겠네요.(이건 순전히 Flash, HTML5, Silverlight 등 많은 기술이 비슷한 점유율로 공존했으면 하는 제 바램하고는 다소 거리가 멀지만 일단 "Flash의 상대는 없다"는 완고한 생각을 가진 분들께 드리는 저만의 립서비스라고 해두죠.)

Ajaxian의 제목과 댓글만 봐도 알다시피 외국에서도 HTML5 vs. Flash가 이슈기는 한가 봅니다만, 사실 Flash는 끝났다는 식의 거북한 말을 서슴치 않게 했던 저로서도 이젠 그런 기분 상하는 식의 발언은 안하려고 합니다. 문제가 있음을 반성하고 있으니까요. 다만 Flash가 모든 웹기술의 명제라고만 보는 시각도 문제는 분명있다고 보는데.. 뭐.. 이건 우열을 가리자는 문제는 아닌거 같고, 일단 시장의 선두기업 입장에서 다른 기술의 관심몰이는 분명 귀찮은 존재이니 일단 한 번 까고보자일것이고.. 후발 기술입장에서는 어떻게서든 선두기술의 약점을 과대포장하여 까발리는 것이 뭐 이 바닥의 흔하디 흔한일이니 괜시리 서로 핏대 세우며 혈압 오를 필요는 없다고 봅니다.

본론으로 들어가서 문제는 HTML5의 비디오 기능이 브라우저에 전적으로 의존하다보니 브라우저의 벤더마다의 비디오 재생플레이어가 통일되어 있지 않아 인터페이스의 통일성을 중시하는 웹디자이너 입장에서는 선뜻 HTML5의 비디오를 선택하기 쉽지 않아보였습니다. 그런데 Jilion.com에서 현재 HTML5를 지원하는 브라우저인 Google의 Chrome과 FireFox, Apple의 Safari용(IE는 HTML5를 지원하지 않기 때문에 IE for Chrome Frame를 설치해야 함.) SublimeVideo이라는 HTML5용 비디오 플레이어(Javascript기반으로 추측됨)를 만들었다고 합니다. 모든 브라우저에서 동일한 모습을 보이도록 말이죠. PC의 브라우저 뿐만 아니라 iPhone/iPod/iPad의 Safari에서도 지원한다고 하니 테스트해봐야 겠네요. 성능에는 자신있어라 하는 것 같은데, 굳이 Flash랑 비교해서 혈압오르고 싶지는 않네요. ㅎㅎㅎ 아래의 비교 그림을 보시길 바랍니다. 아울러 곧 비상용 목적으로 사용할 시 무료로 사용할 수 있는 버전이 공개될 예정이라네요. 비슷한 오픈소스 프로젝트들이 많아 질 것 같습니다. Demo를 꼭 살펴보세요. Firefox나 Safari, Chrome의 경우 바로 접속하면 되고 IE의 경우 위에서 언급한 IE for Chrome Frame을 설치하시면 IE에서도 볼 수 있습니다. (추가 : 제게 설치된 Windows 7환경에서의 간단 비교로는 OGG포맷의 FireFox가 HD환경 Full Screen에서 가장 고화질의 버벅임이 없군요. Safari의 MP4나 IE에서의 Chrome모듈로의 재생은 그닥..)

SublimeVideo

24 January 2010

HTML5 Video

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>

HTML5 Video on FireFox
<Firefox 3.5이상에서의 HTML5 비디오 재생 - OGG포맷>

HTML5 Video on Safari 4
<Safari 4 이상에서의 HTML5 비디오 재생 - MP4포맷>

24 January 2010

RIA의 또 다른 경쟁자 HTML5

Category : HTML5

Comments : 댓글쓰기

Posted by 장창학 at 1:36 PM

HTML5 Video Sample 브라우저 플러그인의 최대 권력자인 Adobe Flash, 그리고 열심히 그 뒤를 쫓고 있는 Microsoft의 Silverlight, 그리고 나름대로 갈길을 가고 있는 JavaFX 등 브라우저내의 플러그인들의 입장에서야 "엥? 또다른 경쟁자? 누규~?" 하겠지만.. 사실 이들이 알게 모르게 HTML5는 2004년부터 착실히 준비를 해왔습니다. 아직 HTML5 자체가 완전히 정립이 안된데다 예전처럼 Internet Explorer가 절대군주가 아닌 브라우저 춘추전국시대의 브라우저간 비호환성때문에 활성화가 더디지만 아뭏튼 HTML5는 언젠가는 나올 수 밖에 없는 것이죠.

문제는 Flash나 Silverlight 등이 입이 마르게 자랑하는 것 중 하나인 비디오/오디오 재생능력이나, Grid와 같은 데이터바인딩 오브젝트를 HTML5에서 지원한다는 것 입니다. 물론 이들은 HTML5의 재생능력과 활용성이 자사의 기술에 비해 현저히 떨어지거나 보조적인 역할만 할 것이라고 주장하지만 스마트폰 환경이나 웹의 단일표준을 위해서도 브라우저 자체내의 HTML5지원은 반드시 이루워져야 할 기술입니다. 다만, 언제나 그렇듯 각 브라우저 제조사별로 HTML5의 스펙에 대하여 이해관계가 다른데요. Microsoft의 경우 HTML5에는 대체적으로 동의하지만 이제 막 활성화되기 시작한 Silverlight플러그인에 피해가 되는 요소는 꺼리고 있고, Adobe의 경우 브라우저간의 비호환성 문제가 완전히 해결되지 않은 상황에서 Flash가 유일한 답이다고만 반복하고 있으며, Mozilla, Google과 Apple은 HTML5가 대세다고 밀어붙히는 형국이지요.

Microsoft는 Silverlight를 확실히 Adobe Flash의 대항마로 밀고 있는 상황에서 HTML5에게마저 밀려버리면 말그대로 자사의 Internet Explorer가 Netscape꼴 날 것이라는 것을 잘 알고 있을 것입니다. 지구상 마지막 IE의 보루국가인 한국에서마저 ActiveX를 무기로 버티고는 있지만 한국내에서도 이제 ActiveX가 싫다고들 아우성이니 정말 이만저만 걱정이 아닐겁니다. 어서 ActiveX를 Silverlight로 대체해야 하는 이유입니다.(Silverlight 자체의 Spec이 정립되기도 전에 막 버전업을 해가면서 밀리지 않으려 애쓰는 모습이 안타깔울 지경입니다. 물론 MS빠들은 좋다고들 하겠지만 대부분의 사용자는 또다른 플러그인은 일단 무조건적으로다가 싫습니다.)

Adobe의 입장에서는 자사의 Flash가 전천후 공격을 받고 있어 어서 후발주자들을 압도해야 하는 시간과 기술혁신의 스트레스에 있다고 볼 수 있습니다. 막대한 Flash개발자를 이끌고 있고, 수년간 대적할 만한 적수를 만나지 않고 군주로 군림했는데 Silverlight 이후 조금 긴장했다는 것이 저의 생각입니다. 더욱이 믿었던 Apple의 아이폰에서 "팽"당한 후 모바일시장에서 다시 군주로 군림하겠다는 야심에 적잖은 타격을 입고 있어 시간이 많지 않음을 잘 알고 있겠죠. 더욱이 Apple에게 팽당해서 Google과 친해져서 안드로이드안에 Flash를 박는데는 성공했지만 아직 Google이 이에 대해 별 관심이 없어서이지, 특정회사의 플러그인이 인터넷 시장을 좌지우지하는 꼴을 못보는 구글의 입장에서는 향후 5년내에 Flash를 자사의 서비스에서 제거할 확률이 매우 높습니다. 그 증거가 바로 HTML5를 서둘러 웹에 그리고 모바일에 도입하고자 노력하는 것이죠. HTML5처럼 누구에게 종속적이지 않아야, 자사의 메일, 검색 등 온라인 서비스를 원활히 확장할 수 있으니까요.

개인적으로는 Adobe의 기술을 아끼는 입장이므로 지금 처럼 너무 Flex나 Flash에만 매달리지 않았으면 하는 것이 제 충고입니다.(개인적인 생각에는 염려스러울 정도로 Flash에 집착합니다.) 이들기술에만 매진할 경우 당분간은 압도적인 점유율과 지지개발자들로 경쟁 기술에 비해 우위에 있겠지만 만일에 하나 Flash기술이 시장에서 팽당하기 시작한다면 Adobe로서는 Flash만 잃는게 아니라, 자사의 존립자체를 걱정해야할 상황에 직면할지도 모릅니다. 그만큼 지금의 Adobe는 여러 기술적 새로운 시장과 수요가 있음에도 너무 Flash기술 하나에 모든 역량을 집중하고 있어 역으로 그만큼 Risk가 크다는 것도 알아야 할 것입니다. 오히려 드림위버나 ColdFusion에서 HTML5 또는 jQuery와 같은 브라우저 기반 기술을 선도하거나, Flash와 함께 브라우저에 구현 가능한 모든 기술에 대해 Adobe가 선도적인 기업이 될 수 있는 기회가 다른 회사보다 많다는 것을 제발 알기를 바랍니다.

어쨌든 프로토타입이기는 하지만 일부 브라우저별로 HTML5를 도입하고 있는데요. 우선 몇일전 업그레이된 FireFox3.6과 함께 Apple의 Safari 4, Google의 Chrome, Opera가 가장 적극적입니다. 또, Vimeo, Youtube와 같은 비디오 공유 웹서비스 등도 HTML5를 도입했는데요. 아직 브라우저간 호환성때문에 전면적으로 대체하진 못하지만 곧 서비스가 본격적으로 개시될 수 있을 것 입니다.

가장 빠른 실례로 여러분이 Opera 9.52(Opera 10은 별도의 OGG, OGM코덱을 설치해야 함)나 FireFox 3.6이 깔려 있다면 다음의 샘플 비디오를 재생해 보십시오. Flash나 Silverlight, JavaFX와 같은 플러그인 없이 비디오가 재생되고, 제어할 수 있습니다. (Apple Safari4는 http://xiph.org/quicktime/ 에서 퀵타임에 OGG, OGM 코덱을 설치하세요.) 현재 그나마 가장 완벽히 HTML5을 지원하는 브라우저는 Google의 Chrome과 FireFox뿐입니다.

참조 : http://diveintohtml5.org/video.html#what-works

Opera Labs의 <video> HTML5 Sample Videos
(http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/)

Examples

Here are some pages using the video element:

Here are some pages using the video element in SVG:

Entries Tagged as 'HTML5'

Examples

About me

Categories

Monthly Archives

Links

Recent Posts

Recent Comments