<video> 태그

HTML5, 그리고 <video>

HTML4가 웹을 지배한 지난 10여년간 웹 환경에도 많은 변화가 있었습니다. 10년이면 강산도 변하는데 웹이라고 예외는 아니니까요. 그 중 가장 큰 변화를 꼽는다면 웹 문서가 이제는 더 이상 ‘문서’가 아니라 ‘응용프로그램’ 혹은 ‘미디어’로 자리매김했다는 것입니다. 지금의 웹은 역동적이고 인터랙티브하고 다양한 멀티미디어를 보여주며 사용자들도 이를 자연스럽게 받아들이고 요구하기 시작했습니다. 동시에 음악과 동영상은 부가 요소가 아닌 필수 요소가 되어갔습니다.

사용자들의 높아진 요구에 따라 웹 제작자들은 기존의 HTML에 한계를 느꼈습니다. HTML5는 바로 그러한 배경에서 탄생하게 되었습니다. 그런데, 그 중에서도 가장 주목받지 못하는 부분이 멀티미디어, 즉 <video> <audio> 태그였습니다. 거의 모든 브라우저와 OS에 설치되어있어 플러그인 기술이라고 부르기도 어색한 Adobe Flash가 이미 사용자들의 욕구를 충분히 채워주고 있었기 때문입니다. Adobe Flash는 심지어 OS와 함께 배포되는 경우도 많아 명실상부한 사실상 표준(de facto standard)이었기때문에,  불편함은 거의 없었고 Flash를 통해 제공해주는 콘텐츠 품질도 만족스러웠습니다.

‘아이폰이 나타나기 전’까지는요.

iPhone 3G
그림1. iPhone 3G by ivyfield@flickr

Flash vs HTML5

애플에서 2007년에 최초로 발표한 아이폰은 해마다 개량을 거듭하며 스마트폰 돌풍을 이끌고 있습니다. 아이폰은 데스크톱과 동일한 웹 브라우징 경험을 제공하는 것으로도 유명한데 안타까운 사실은 바로 그 ‘웹 브라우징 경험’에 Adobe Flash는 포함되지 않았다는 것입니다.  굳이 스티브 잡스가 발표한 Adobe Flash에 대한 입장까지 들먹이지 않더라도 앞으로도 애플이 아이폰 혹은 아이패드에서 Adobe Flash를 지원하지 않으리라는 것은 쉽게 짐작할 수 있을 것입니다.

이 덕분에 그간 아무런 고민없이 사용해왔던 Flash 기반의 멀티미디어 서비스에 대한 재고(再考)가 이루어졌습니다. 사실 Adobe Flash는 그 자체가 가지고 있는 문제도 적지 않습니다. 게다가 지금은 처음 Flash를 사용해 멀티미디어 서비스를 제공하던 때와는 달리 브라우저에서 직접 지원해주는 쓸만한 대체제가 존재하고 있었습니다. 바로 HTML5 <video> 입니다. HTML5 <video>는 현재 인터넷 익스플로러(이하 IE)를 제외한 모든 주요 브라우저에서 지원하고 있으며, IE도 9버전부터 지원하고 있습니다. HTML5 <video>를 지원하는 주요 웹 브라우저의 종류와 버전은 다음과 같습니다.

<video> 요소 지원 현황
IE
9.0+
Firefox
3.5+
Safari
3.0+
Chrome
3.0+
Opera
10.5+
iPhone
1.0+
Android
2.0+

여전히 Adobe Flash냐 HTML5 <video>냐 하는 부분에 대해서는 논란이 많습니다. 확실히 오랜 시간 서비스해온 만큼 Flash쪽이 더 보편적이고 동일한 플랫폼을 보장해주는 한편 성능 면에서도 이점이 많기 때문입니다. 반면, HTML5 <video>는 웹 브라우저에서 제공하기 때문에 별도의 플러그인이 필요하지 않으며 자바스크립트, CSS 등의 기반 웹 기술을 이용해 훨씬 더 유연하게 다룰 수 있다는 장점이 존재합니다.

간단하게 HTML5 <video>의 장점을 정리해보았습니다.

간편함

아마도 동영상 컨텐츠가 있을 때 이를 가장 빨리 웹 페이지에 게시할 수 있는 방법은 HTML5 일 것입니다. Adobe Flash는 동영상 컨텐츠를 Flash Video (flv) 형식으로 변환하는 것은 물론, *.flv 파일을 재생할 수  있는 별도의 플레이어를 마련해야 하고 플레이어를 사용하기 위해 또 다시 외우기도 힘든 코드를 복사해서 붙여야 합니다.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="550" height="400" id="myMovieName">
<param name="movie" value="myPlayer.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed href="myPlayer.swf" quality="high" bgcolor="#FFFFFF" width="550" height="400" name="myMovieName" type="application/x-shockwave-flash" pluginpage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>

그에 비하면, HTML5 <video>는 너무나 단순합니다.

<video src="example.mp4"></video>

위 코드는 원래대로라면 <video> 태그를 지원하는 모든 브라우저에서 잘 동작했어야 하지만, 아직은 해결하기 힘든 문제가 있습니다.  이 부분에 대해서는 다음에 다루어 보도록 하겠습니다.

만약, <video>를 지원하지 않는 웹 브라우저를 위해 Flash를 대체요소(fallback)로 제공하고 싶다면 다음과 같이 작성할 수 있습니다.

<video src="example.mp4">
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="550" height="400" id="myMovieName">
 <param name="movie" value="myPlayer.swf">
 <param name="quality" value="high">
 <param name="bgcolor" value="#FFFFFF">
 <embed href="myPlayer.swf" quality="high" bgcolor="#FFFFFF" width="550" height="400" name="myMovieName" type="application/x-shockwave-flash" pluginpage="http://www.macromedia.com/go/getflashplayer"></embed>
 </object>
</video>

확장성

HTML5 video demo screenshot
그림2. <canvas>와 <video>를 사용한 특수효과

그림2는 <video>와 <canvas>를 사용해서 구현한 특수효과 예제입니다. Adobe Flash는 아무리 널리 퍼져있다고 해도 플러그인에 기반하고 있기때문에, 플러그인 표시 영역 바깥에서는 인터랙션이 곤란합니다. 하지만, HTML5는 웹 브라우저에서 제공하는 네이티브 객체이므로 그림2처럼 사용자의 클릭에 따라 화면이 깨지는 효과도 어렵지 않게 구현할 수 있습니다.

접근성

앞서 말씀드린대로 아이폰과 아이패드에서는 Flash를 비롯한 웹 브라우저 플러그인 기술을 지원하지 않습니다. 안드로이드 계열의 스마트폰에서는 Flash를 지원하기는 하나 ‘Flash는 안드로이드에서 실패했다(번역 링크)’는 말이 나올만큼 아직은 불안하다고 보는 시각이 많습니다. 모바일 기기에서 Flash를 사용해 동영상을 보기에는 무리라는 의미죠.

그러나 HTML5 기술을 사용하면 아이폰 등의 모바일 기기에서도 동영상을 볼 수 있습니다. 오페라 모바일도 곧 HTML5를 지원한다고 하니 적어도 모바일 기기에서의 접근성은 HTML5가 Flash보다 높다고 볼 수 있습니다.

웹 페이지에 포함된 video 객체
그림3. 웹 페이지에 포함된 video 객체

아이폰에서 웹 페이지에 포함된 HTML5 <video> 객체를 보면 그림 3과 같이 화면에 나타나고, 이 동영상을 클릭하면 그림 4처럼 전체 화면으로 동영상을 재생합니다(데모 링크).

전체화면 video 재생
그림 4. 전체화면 video 재생

디자인

HTML5의 <video> 객체는 자바스크립트로 쉽게 다룰 수 있는 것은 물론 CSS도 자유롭게 적용할 수 있습니다. 따라서, 데모 사이트처럼 간단한 CSS만으로도 동영상에 반사 효과를 주는 것도 가능합니다(데모를 보려면 Safari+QuickTime 혹은 WebKit nightly build 버전이 필요합니다).

반사효과 데모
그림 5. CSS 반사효과를 준 HTML5 video

<video> Now?

<video> 태그는 당장 사용하는 것이 좋을까요? 아쉽지만 이 질문에 대한 대답은 ‘아니요’에 가깝습니다. 여전히 국내에서 대부분을 차지하는 IE6~8 버전에서 지원하지 못한다는 사실은 차치하고라도 <video> 자체의 문제도 있기 때문입니다. 그 중 <video>의 발전을 저해하는 가장 큰 요인으로는 ‘코덱(codec)’ 문제가 있습니다. 코덱에 대해서는 다음 글 ‘코덱 전쟁’에서 다룰텐데, 읽고 나면 만만치 않은 문제라는 생각이 절로 들 것입니다.

그렇다면 사용하지 말아야 할까요?

이 질문에 대한 대답은 정확히 ‘네’라고 하기 힘듭니다. 올해 초 세계 최대의 동영상 서비스인 유튜브는 HTML5 <video>를 제공하기 시작했고, 또 다른 동영상 서비스인 Vimeo 역시 HTML5 <video>를 제공하고 있습니다. 그 외에도 내노라 하는 서비스 업체들이 HTML5 <video>를 지원할만큼 분명 동영상 분야에서도 HTML5는 매력적입니다. 앞서 소개한 모바일 기기에서의 접근성은 굳이 언급할 필요도 없을 것입니다.

To use or not to use.

정답은 없습니다.

.. and Next

다음 글에서는 <video>의 발목을 가장 크게 잡고 있는 ‘코덱’에 대해서 중점적으로 다루어 보겠습니다. 가히 전쟁이라고 불러도 좋을만큼 <video>의 코덱은 격렬하게 움직이고 있습니다. 누구의 승리인가와 상관없이 이 전쟁이 끝나는 날이 <video>가 본격적으로 성장할 때일 것입니다.

  1. 저도 HTML5중 가장 관심있는 부분이 바로 비디오와 캔버스 엘리먼트입니다.
    캔버스야 어렵고 복잡한 이유때문이라도 사용하기 힘든점이 있지만
    비디오나 오디오 엘리먼트는 상대적으로 사용하는데 큰 어려움이 없더군요

    자바스크립트와 css를 이용해서 플래시 플레이어같은걸 만들어보려고 하는데
    생각보다 쉽진 않네요 ㅎ
    video엘리먼트 자체에 css가 적용되는 부분도 제한적이고 말이죠

    아무튼 매력적인 놈입니다.
    공부 많이 해야겠어요 +ㅁ+

  2. classid, codebase 는 HTML5에서 사라진 attribute 에요~

    만약, 를 지원하지 않는 웹 브라우저를 위해 Flash를 대체요소(fallback)로 제공하고 싶다면 다음과 같이 작성할 수 있습니다.

    이 부분의 코드가 수정되어야 할 것 같아요~

    1. 없어진 속성이라는 것은 모르고 있었는데 찾아보니 폐지 상태네요.
      그런데, 그것과는 상관없이 태그 내부에서 만들어주는 fallback은 HTML5를 지원하지 않는 웹 브라우저를 위해 작성한 것이므로 classid, codebase 속성을 남겨두어야 맞을 것 같습니다. ^^

      1. 맞는 말씀이긴 한데..
        실제 코드는 HTML5 DTD 문서내에 있어서 validator 문법 오류로 나오네요..

        Validator는 이렇게 쓰라고 하네요..

  3. 질문하나 드리고 싶어서요
    xe의 xeed를 직접 만들고 계신걸로 알고있는데요
    혹시 xe와 별개로 스마트 에디터처럼 사용할수 있는 버전도 나오게 되나요?
    감사합니다.

    1. 현재의 XEED는 일부 코드가 XE에 종속적이라 별개로 사용할 수 없으며 독립적으로 배포할 계획도 가지고 있지 않습니다. ^^

      1. 답변감사합니다.
        조금은 아쉬운 소식이네요
        그렇다면 스마트 에디터는 어떻게 되나요?
        사용자의 입장에서
        조금은 문제점이라고 여길만한 것들에
        업데이트가 전혀 없는데
        유지 보수 계획은 없는건가욤?
        xeed를 standalone버전으로 내놓지도 않고
        스마트 에디터가 버전업되지도 않고…
        어떻해야 할까요??

      2. 제가 초기의 스마트 에디터 제작에 참여하기는 했지만 오픈소스 버전을 비롯해 현재 버전에는 다른 분들이 참여하셨고, 제가 XE개발팀으로 옮기는 바람에 죄송한 말씀이지만 어떻게 진행되는지 아는 바가 전혀 없습니다.
        XEED는 이름에서 알 수 있듯 XE에서 사용하기 위해 공개된 스마트 에디터를 기반으로 별도로 작성된 에디터입니다. 따라서 스마트 에디터와는 별개의 제품으로 이해해주셔야 합니다. ^^;

  4. 궁금한 것이 있습니다.
    mp4포맷으로 h.246인코딩된 파일을 서버에 올린 후
    익스플로러9테스트버전에서 확인해보니, 동영상박스 자체가 아예 안나옵니다.
    webm포맷으로 올린 건 크롬에서 잘나와요.
    왜 그런걸까요?

    1. 음… 동영상 인코딩에 문제가 있지 않나 싶은데, 정확한 원인을 당장 콕 찝어서 설명하기는 어렵네요 ^^;;

댓글을 남겨주세요