유튜브의 등장으로 웹을 통한 동영상 서비스를 진행하는 기업들이 전세계적으로 많이 늘어났다. 국내에서도 대부분의 포털 기업들이 앞다투어 동영상 서비스를 선보였다.
웹을 통한 동영상 서비스 제공을 위해서는 순수 브라우저 환경에서는 불가능하며, 별도의 플러그인(Plug In)을 설치해야 한다. 대표적으로 어도비의 플래시 플레이어(Flash Player)와 마이크로소프트 실버라이트를 들 수 있다.
앞서 언급된 기업들도 마찬가지로 플래시와 같은 별도의 플러그인을 설치해야만 한다. 하지만 HTML5의 등장으로 더 이상 별도의 플러그인의 설치 없이도 동영상 서비스가 가능하게 되었다. HTML5에서 새롭게 추가된 비디오 마크업 태그만으로 말이다.
HTML5 Video 브라우저별 지원현황 아래표와 같이 최신 브라우저에서는 모두 Video태그가 지원이 되며 모바일의 경우는 거의
100% 지원된다고 보면 된다. 브라우저별 Video태그 지원현황은 아래와 같다.
HTML5 Video Codecs 브라우저별 지원현황 대부분의 최신 브라우저에서 Video 태그가 지원이 되지만 브라우저 별로 지원되는 코덱은 다르다.
현재까지는 코덱 관련한 표준이 정해지지 않았기에 Video태그를 사용하기 위해서는 브라우저별 코덱 지원사항을
파악할 필요가 있다.
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.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);
HTML5 Video
웹에서 img태그를 사용하여 이미지를 보여주듯이 동영상도 비디오 태그만 잘 알고 있다면 별도의 플러그인 없이도 웹 표준 기술인 HTML만으로 동영상 서비스가 가능해진다.
HTML5는 2014년 최종 권고화 예정인 기술로 아직 표준화 작업이 진행 중이지만, 현재 HTML5 관련 기술을 접목한 많은 서비스가 등장하고 있으며 다양한 개발시도가 이뤄지고 있다.
특히 유튜브, 비메오와 같은 업체들의 경우 HTML5 동영상 서비스를 시범적으로 제공하고 있으며, HTML5의 브라우저 호환성과 관련해서도 자바스크립트 라이브러리를 사용한 해결방법 등을 찾아내고자 노력하고 있다.
아래 내용은 책 JavaScript The Definitive Guide 5/E에서 발췌한 내용이며
유용한 자바스크립트 함수들이다. 사용법을 익혀두자!
객체용 함수들
// 객체 o의 열거 가능한 프로퍼티들의 이름을 담은 배열을 반환한다.
function getPropertyNames(/* object */ o)
{
var r = [];
for(name in o) r.push(name);
return r;
}
//객체 from의 열거 가능한 프로퍼티들을 객체 to로 복사한다.
//만약 to가 null이면 새로운 객체를 생성한다. 이 함수는 결과로 개체 to를 반환하거나
//새롭게 생성한 객체를 반환한다.
function copyProperties(/* object */ from, /* optional object */ to)
{
if(!to) to = {};
for(p in from) to[p] = from[p];
return to;
}
//객체 from의 열거 가능한 프로퍼티들을 객체 to로 복사하되,
//to에 의해 정의되지 않은 프로퍼티만 복사한다.
//이 함수는 to에 미리 정의되어 있지 않은 값들에 대해 from에 저장해 둔
//기본 값들을 사용하려 할 때에 유용하다.
function copyUndefinedProperties(/* object */ from, /* object */ to)
{
for(p in from){
if(!p in to) to[p] = from[p];
}
}
배열용 함수들
//배열 a의 각 원소를 지정된 술어(predicate) 함수로 전달한다.
//술어 함수가 true를 반환한 원소들로 이루어진 배열을 결과로서 반환한다.
function filterArray(/* array */ a, /* Boolean function */ predicate){
var results = [];
var length = a.length; //술어 함수가 배열의 길이를 반환할 경우에 대비하여
for(var i = 0; i < length; i++) {
var element = a[i];
if(predicate(element)) results.push(element);
}
return results;
}
//배열 a의 각 원소를 지정된 함수 f로 전달하여 얻은 결과들을 원소로 하는
//배열을 반환한다.
function mapArray(/* Array */ a, /* function */ f) {
var r = [];
var length = a.length; //함수 f가 배열 길이를 변환할 경우에 대비하여
for( var i = 0; i < length; i++) r[i] = f(a[i]);
return r;
}
함수용 함수들
//함수 f를 객체 o의 메서드로 하여 호출하는 독립형(standalone) 함수를 반환한다.
//이것은 메서드를 함수에 전달하려 할 때 유용한다. 만약 함수를 그 함수의 객체와
//연결하지 않으면, 그 연관 관계는 소실되며 전달한 메서드는 일반 함수처럼 호출된다.
function bindMethod(/* object */ o, /* function */ f) {
return function() { return f.apply(o, arguments) }
}
//함수 f를 지정된 전달인자와 함께 호출해 주는 함수를 반환한다.
//이렇게 반환된 함수는 또한 추가적인 전달인자들과 함께 호출될 수 있다.
//(이것은 때때로 'currying'이라 한다.)
function bindArguments(/* function */ f, /*initial arguments ......*/) {
var boundArgs = arguments;
return function() {
//전달인자들로 구성된 배열을 만든다. 이 배열은 이전에 건내받은 전달인자를
//원소로 시작하여, 지금 추가로 건네받은 전달인자까지 포함한다.
var args = [];
for(var i = 1; i < boundArgs.length; i++) args.push(boundArgs[i]);
for(var i = 0; i< arguments.length; i++) args.push(arguments[i]);
//이제 이 전달인자들과 함께 함수를 호출한다.
return f.apply(this, args);
}
}
