본문 바로가기

html5

HTML5 Video


유튜브의 등장으로 웹을 통한 동영상 서비스를 진행하는 기업들이 전세계적으로 많이 늘어났다. 국내에서도 대부분의 포털 기업들이 앞다투어 동영상 서비스를 선보였다.
웹을 통한 동영상 서비스 제공을 위해서는 순수 브라우저 환경에서는 불가능하며, 별도의 플러그인(Plug In)을 설치해야 한다. 대표적으로 어도비의 플래시 플레이어(Flash Player)와 마이크로소프트 실버라이트를 들 수 있다.
앞서 언급된 기업들도 마찬가지로 플래시와 같은 별도의 플러그인을 설치해야만 한다. 하지만 HTML5의 등장으로 더 이상 별도의 플러그인의 설치 없이도 동영상 서비스가 가능하게 되었다. HTML5에서 새롭게 추가된 비디오 마크업 태그만으로 말이다.

HTML5 Video 브라우저별 지원현황
아래표와 같이 최신 브라우저에서는 모두 Video태그가 지원이 되며 모바일의 경우는 거의
100% 지원된다고 보면 된다. 브라우저별 Video태그 지원현황은 아래와 같다.

(출처 : http://www.findmebyip.com/litmus)

HTML5 Video Codecs 브라우저별 지원현황
대부분의 최신 브라우저에서 Video 태그가 지원이 되지만 브라우저 별로 지원되는 코덱은 다르다.
현재까지는 코덱 관련한 표준이 정해지지 않았기에 Video태그를 사용하기 위해서는 브라우저별 코덱 지원사항을
파악할 필요가 있다.
(출처 : http://www.findmebyip.com/litmus)

HTML5 Video 브라우저 지원유무 확인
대부분의 최신 브라우저는 Video 태그를 지원하지만 오래된 브라우저를 사용하는 고객이 존재하기 마련이다.
아래 코드를 사용하여 현재 브라우저가 Video 태그를 지원하는지의 여부를 알 수 있다.

function supports_video(){     return !!document.createElement("video").canPlayType;}
브라우저가 HTML5 Video를 지원한다면 Video 엘리먼트 DOM 객체가 canPlayType() 메소드를 가지게 되며 지원되지 않는 브라우저는 해당 메소드가 존재하지 않는다.

더 쉬운 방법으로는 Modernizr 라이브러리를 사용하는 방법이다.
Modernizr는 HTML5의 다양한 기능을 지원하는지 확인하는 자바스크립트 라이브러리로 위와 같은 코드를 작성하는 수고를 덜어준다.(Modernizr download http://www.modernizr.com/)

if(Modernizr.video){
    alert("동영상 지원이 된다.");
}else{   
    alert("동영상 지원이 되지 않는다.");
}
HTML5 Video 태그 사용
Video 태그를 사용하기 위해서는 아래와 같이 코딩하면 된다.
Video 태그를 지원하는 브라우저는 source 엘리먼트를 읽어 각 브라우저별 지원 코덱일 경우 동영상 Play하게 된다.
Video 태그를 지원하지 않는 브라우저의 경우는 아래소스와 같이 대체 텍스트를 출력된다.

아이폰 Video태그 구동화면





Video 태그 주요 속성

속성 설명
audio muted 오디오 소리유무, 음소거
autoplay autoplay 로딩시 비디오 자동 재생 설정
controls controls 재생 컨트롤 표시
height pixels 동영상 높이 값
loop loop 동영상 자동 재시작
poster url 동영상 스틸컷 이미지
preload preload 페이지 로딩과 동시에 브라우저는 비디오 다운로드
src url 동영상 경로
width pixels 동영상 가로 값
(출처 : http://w3schools.com/html5/html5_video.asp)


Video 태그 미지원 브라우저 처리
대표적으로 Video.JS, JW Player, Mediaelement.JS 등이 있으며 해당 라이브러리를 사용하면 Video 태그가 지원되지 않는 브라우저의 경우 Flash FallBack을 이용하여 동영상 서비스를 제공하게 된다.
20종의 HTML5 Video Player : http://praegnanz.de/html5video/


안드로이드 Tip
안드로이드 웹 브라우저에서는 HTML5 Video를 제대로 실행하기 위해서는 source의 type을 지정하면 안된다.
또한 Play의 경우도 자바스크립트를 사용해야한다. 아래와 같이 말이다.


var video = document.getElementById('video'); video.addEventListener('click',function(){ document.play();} ,false);

(출처 : http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/)

HTML5 Video
웹에서 img태그를 사용하여 이미지를 보여주듯이 동영상도 비디오 태그만 잘 알고 있다면 별도의 플러그인 없이도 웹 표준 기술인 HTML만으로 동영상 서비스가 가능해진다.
HTML5는 2014년 최종 권고화 예정인 기술로 아직 표준화 작업이 진행 중이지만, 현재 HTML5 관련 기술을 접목한 많은 서비스가 등장하고 있으며 다양한 개발시도가 이뤄지고 있다.
특히 유튜브, 비메오와 같은 업체들의 경우 HTML5 동영상 서비스를 시범적으로 제공하고 있으며, HTML5의 브라우저 호환성과 관련해서도 자바스크립트 라이브러리를 사용한 해결방법 등을 찾아내고자 노력하고 있다.

HTML5 Video Demo 및 자세한 사항을 확인하고 싶다면 아래 사이트를 참고하길 바란다.
http://www.html5video.org/demos/
http://diveintohtml5.org/video.html

'html5' 카테고리의 다른 글

[30회 정기세미나] HTML5 실무적용 전략 발표자료  (0) 2011.07.07
HTML5 Canvas Shapes 2  (1) 2011.04.21
HTML5 Canvas Shapes 1  (0) 2011.04.20