HTML5는 브라우저에 내장한 비디오 플레이어 기능을 통해 비디오를 보여주고 제어를 위해 필요한 다양한 UI를 태그와 자바스크립트 모두를 통해 처리할 수 있도록 지원하고 있다. 또한 HTML5의 캔버스 기능은 브라우저에서 2D 그래픽을 지원하는 기능으로 SVG(Scable Vector Graphic)와는 다르게 픽셀단위로 2D 그래픽을 그릴 수 있는 기능이다. 어떤 개발자들은 이러한 캔버스 기능을 이용해서 둠과 유사한 3D 게임을만들어 공개한 것도 인터넷에서 찾아볼 수 있다.
최근 주요 브라우저들은 HTML5의 비디오 택그와 캔버스 기능을 대부분 지원하고 있기 때문에 이들을 활용한 다양한 시도들이 있는데 이들 중 상당히 재밌는 특수효과를 개발한 사례가있어서 소개하고자 한다. 이는 HTML5 비디오 태그로 정의된 미디어가 보여질 때 이들의 픽셀을 캔버스로 매핑하고 마우스가 보여지는 비디오의 특정 위치 클릭되면 그 위치를 기반으로 주변이 폭발하는 효과를 만들었다. 이는 HTML5의 비디오 태그와 캔버스 기능을 조합하여 전혀 색다른 효과를 만들 수 있다는 예를 보여준다는 차원에서 상당히 흥미롭다.
직접 데모를 보고 싶은 분은 아래 링크를 클릭하여 시험해 보기 바란다. 데모를 실행해 볼때 HTML5의 비디오 및 캔버스 기능을 지원하는 크롬, 오페라, 파이어폭스를 사용해야 한다. 참고로 IE에서는 동작하지 않는다.
(원문): Blowingup HTML5 video and mapping it into 3D space
'HTML5 표준 기술' 카테고리의 다른 글
| HTML5 표준 범위와 W3C HTML WG 표준화 현황 (0) | 2010/06/23 |
|---|---|
| 추가적인 HTML5 비디오 관련 이슈는? (4) | 2010/05/28 |
| HTML5 Video 태그와 캔버스(Canvas) 기능 기반 특수효과? (1) | 2010/05/02 |
| GMail, 화일 첨부시 HTML5 기반 Drag and Drop 지원 (0) | 2010/04/17 |
| HTML5와 모바일 웹 (2) | 2010/04/14 |
| 구글의 VP8 비디오 코덱 오픈 소스화??? 빠른 HTML5 기반 비디오 활성화 예상!!! (0) | 2010/04/14 |
댓글을 달아 주세요
article 2012/03/26 15:19 댓글주소 수정/삭제 댓글쓰기
근데... 이 추운날씨에옷이 도입지... ^.^