. Modernizr(http://www.modernizr.com) : 2011-05-27 현재
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 browser detect</title>
<script src="/html5/js/modernizr-1.7.min.js"></script>
<script language="javascript">
if (Modernizr.canvas) {
alert("html5 canvas supported");
} else {
alert("html5 canvas not supported");
} if (Modernizr.canvastext) { alert("html5 canvastext supported"); } else { alert("html5 canvastext not supported");
if (Modernizr.video) {
if (Modernizr.video.ogg) {
alert("html5 video theora supported");
} else if (Modernizr.video.h264) {
alert("html5 video H.264 supported");
}
} else {
alert("html5 video not supported");
}</script>
</head>
<body>
...
</body>
</html>
2. 직접 소스로 알아보기
- canvas
. DOM <canvas> 엘리먼트 객체의 getContext 속성이 지원되는지 확인
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
function supports_canvas_text() {
if (!supports_canvas()) { return false; }
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}
if (supports_canvas_text()) {
alert("html5 canvastext supported");
} else {
alert("html5 canvastext not supported");
}
- 비디오
. DOM <video> 엘리먼트 객체의 canPlayType 속성이 지원되는지 확인
function supports_video() {
return !!document.createElement('video').canPlayType;
}
/* Mac, iPhone 에서만 지원하는 유료 코덱
* MPEG-4 컨테이너의 H.264 베이스라인 비디오와 AAC LC 오디오 지원
* return string : "probably" - 지원, "maybe" - 아마도, "" - 미지원
*/
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement('video');
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
/* firefox 와 같은 오픈소스 브라우저가 지원하는 코덱
* ogg 컨테이너와 Theora 비디오와 Vorbis 오디오를 지원
*/
function supports_ogg_theora_video() {
if (!supports_video()) { return false; }
var v = document.createElement('video');
return v.canPlayType('video/ogg; codecs="theora, vorbis"');
}
/* Chrome, firefox, Opera 와 같은 오픈소스 브라우저가 지원하는 오픈소스 코덱
* WebM 컨테이너와 vp8 비디오와 Vorbis 오디오를 지원
*/
function supports_webm_video() {
if (!supports_video()) { return false; }
var v = document.createElement('video');
return v.canPlayType('video/webm; codecs="vp8, vorbis"');
}
if (supports_h264_baseline_video() == 'probably') { alert("html5 video H.264 supported"); } else { alert("html5 video H.264 not supported"); } if (supports_ogg_theora_video() == 'probably') { alert("html5 video theora supported"); } else { alert("html5 video theora not supported"); } if (supports_webm_video() == 'probably') { alert("html5 video vp8 supported"); } else { alert("html5 video vp8 not supported"); }
- 로컬 저장소
- 위치정보
. 전역 객체(window, navigator)의 속성이 지원되는지 확인
. navigator.geolocation;
