//canvas
var myCanvas = document.createElement("canvas");
if (!!myCanvas.getContext) {
//alert('support canvas api');
} else {
//alert('no support canvas api');
}
//canvas fileText
var myCanvas = document.createElement("canvas");
if (!!myCanvas.getContext) {
//get canvas content panel
var context = myCanvas.getContext('2d');
//alert(context.fillText);
//alert(typeof context.fillText);
if (typeof (context.fillText) == 'function') {
//alert('internet exploer is support canvas text api');
}
} else {
//alert('no support');
}
//video
var myVideo = document.createElement("video");
if (!!myVideo.canPlayType) {
//alert('support video api');
//detect video the specific video format
var myViedoflag = myVideo
.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"');
//alert(myViedoflag);
switch (myViedoflag) {
case 'probably':
//alert(' the internet exploer is probably support mp4');
break;
case 'maybe':
//alert(' the internet exploer is maybe support mp4');
break;
default:
//alert(' no support mp4');
break;
}
var myViedoflag = myVideo
.canPlayType('video/ogg;codecs="theora,vorbis"');
//alert(myViedoflag);
switch (myViedoflag) {
case 'probably':
//alert(' the internet exploer is probably supportogg');
break;
case 'maybe':
//alert(' the internet exploer is maybe support ogg');
break;
default:
//alert(' no support ogg');
break;
}
var myViedoflag = myVideo.canPlayType('video/webm;codecs="vp8,vorbis"');
//alert(myViedoflag);
switch (myViedoflag) {
case 'probably':
//alert(' the internet exploer is probably support webm');
break;
case 'maybe':
//alert(' the internet exploer is maybe support webm');
break;
default:
//alert(' no support webm');
break;
}
} else {
//alert('no support video api');
}
//detection detection探测,检测 local storage
if (window.localStorage) {
//alert(window.localStorage);
//alert('internet exploer is support local storage!');
} else {
//alert('internet exploer is no support local storage!');
}
//detection web Workers
if (window.Worker) {
//alert(window.Worker);
//alert('internet exploer is support Worker!');
} else {
//alert('internet exploer is no support Worker!');
}
if (window.applicationCache) {
//alert(window.applicationCache);
//alert('internet exploer is support applicationCache!');
} else {
//alert('internet exploer is no support applicationCache!');
}
if (navigator.geolocation) {
//alert(navigator.geolocation);
//alert('internet exploer is support geolocation!');
} else {
//alert('internet exploer is no support geolocation!');
}
HTML5学习笔记:
<!--[if !supportLists]-->1.
<!--[endif]-->html5特性检测
Html5特性(Y/N)
|
IE9
|
CHROME11
|
canvas
|
Y
|
Y
|
Canvas fillText
|
Y
|
Y
|
vedio
|
Y
|
Y
|
Vedio format of mp4
|
Y
|
Y
|
Vedio format of ogg
|
N
|
Y
|
Vedio format of webm
|
N
|
Y
|
Local storage
|
N
|
Y
|
Web workers
|
N
|
Y
|
离线web应用
|
N
|
Y
|
Geolocation地理位置
|
Y
|
Y
|
|
|
|
Html5特性(Y/N)
|
IE9
|
CHROME11
|
canvas
|
Y
|
Y
|
Canvas fillText
|
Y
|
Y
|
vedio
|
Y
|
Y
|
Vedio format of mp4
|
Y
|
Y
|
Vedio format of ogg
|
N
|
Y
|
Vedio format of webm
|
N
|
Y
|
Local storage
|
N
|
Y
|
Web workers
|
N
|
Y
|
离线web应用
|
N
|
Y
|
Geolocation地理位置
|
Y
|
Y
|
<input type="search"
/>
|
N
|
Y
|
<input type="number"
/>
|
N
|
Y
|
<input type="range"
/>
|
N
|
Y
|
<input type="color"
/>
|
N
|
N
|
<input type="tel"
/>
|
N
|
N
|
<input type="url"
/>
|
N
|
N
|
<input type="date"
/>
|
N
|
Y
|
<input type="email"
/>
|
N
|
N
|
<input type="month"
/>
|
N
|
Y
|
<input type="week"
/>
|
N
|
Y
|
<input type="time"
/>
|
N
|
Y
|
<input type="datetime"
/>
|
N
|
Y
|
<input type="datetime-local"
/>
|
N
|
Y
|
<input
placeholder="hehehehh"/>
|
N
|
Y
|
<input autofocus="autofocus"/>
|
N
|
Y
|
分享到:
相关推荐
### HTML5特性检测技术 随着HTML5的普及与应用,开发者越来越关注如何高效地判断浏览器对HTML5特性的支持情况。HTML5引入了许多新的API和技术,但并非所有的浏览器都完整支持这些新特性。为了确保网站或应用能够在...
#### 三、Modernizr——HTML5特性检测工具 Modernizr是一款非常实用的JavaScript库,用于检测HTML5和CSS3特性。它可以方便地集成到项目中,通过简单的步骤即可实现对多种HTML5特性的检测。 - **获取Modernizr**:...
“HTML5特性检测”介绍了多种针对不同特性的检测方法;“本地存储”揭开了如何把“数据库”搬到客户端的神秘面纱;“离线应用”展示了脱机状态下依然能让Web应用完好无损的神奇技艺;“疯狂的表单”大秀了一把炫酷...
“HTML5特性检测”介绍了多种针对不同特性的检测方法;“本地存储”揭开了如何把“数据库”搬到客户端的神秘面纱;“离线应用”展示了脱机状态下依然能让Web应用完好无损的神奇技艺;“疯狂的表单”大秀了一把炫酷...
HTML5特性检测 Modernizr能够检测的HTML5特性包括但不限于: - **离线存储(Offline Storage)**:如Application Cache,使网页在离线状态下也能访问。 - **语义元素**:如, , , , 等,提高网页内容结构化。 - **...
做web前段开发人员已经习惯了处理多浏览器兼容(如IE...所以我们需要对浏览器对html5的支持做一定的检测,从而给用户以有好提示;当浏览器在渲染web页面的时候会构造一个文档对象模型(DOM),通过它来表示页面上的HTML元
### HTML5: Up and Running — 详尽解析与核心知识点 #### 一、书籍概览与背景介绍 ...通过对HTML5发展历程的回顾、特性检测方法的讲解以及核心特性的详细介绍,读者可以全面了解HTML5,并将其应用于实际项目中。
#### 三、HTML5特性检测 随着HTML5的推出,浏览器支持情况变得至关重要。《深入HTML5》第二章详细介绍了如何检测浏览器是否支持特定的HTML5特性,这包括使用JavaScript进行条件判断的方法。作者通过“元素法”...
本项目是一个自制的HTML5检测页面,主要用于检查用户的浏览器是否支持HTML5中的关键特性,特别是`canvas`标签。`canvas`是HTML5中的一个强大元素,允许动态渲染图形,包括图像、形状和动画,为网页带来了丰富的交互...
三、HTML5特性检测 某些HTML5特性只能在特定的浏览器中支持。通过检测这些特性,可以间接推断出浏览器类型。例如,检查`document.createElement('canvas').getContext`是否存在,可以判断是否支持HTML5的Canvas,...
在这个"HTML5设备环境检测大数据页面"项目中,我们利用HTML5的技术特性,构建了一个能够实时监测和展示设备环境数据的平台。这个平台可以收集并分析各种设备的信息,包括设备数量、使用频率、开关机次数以及环境的...
在H5实现人脸活体检测时,常用的技术框架有WebGL、HTML5 Canvas和JavaScript库,如Face++、Azure Face API等。这些工具可以进行实时的图像处理和分析,包括人脸检测(定位眉毛、眼睛、鼻子、嘴巴等关键点)、特征...
3. **HTML5特性检测**:微信浏览器在某些HTML5特性的支持上可能与其他浏览器有所不同。可以通过检测这些特性来辅助判断,例如WebSocket的支持: ```javascript function isWeChatBrowserByWebSocketSupport() { ...
以上方法可以基本覆盖常见的HTML5特性检测,前端开发者可以根据自身项目需求,选择合适的检测方式。需要注意的是,随着浏览器的不断更新和升级,对HTML5的支持度越来越高,因此这些检测方法也会随之更新,开发者需...
标题 "让IE旧版本浏览器也支持HTML5的特性" 暗示了本文将讨论如何在Internet Explorer(IE)的老版本中启用HTML5的新功能。HTML5是超文本标记语言的最新版本,引入了许多增强的网页开发功能,如音频和视频嵌入、离线...
现代izr是一个强大的JavaScript库,专为开发者设计,用于检测用户浏览器对HTML5和CSS3新特性的支持情况。这个库的出现,极大地帮助了开发者在跨浏览器开发中确保网站或应用的兼容性,使得前端技术的创新能够更广泛地...
在这个“html5做的路况检测”应用中,开发者巧妙地利用了HTML5的一些关键特性,包括Geolocation API、加速度传感器、Audio API以及jQuery库,创建了一个功能完善的路况监测系统。下面我们将详细探讨这些技术在实现...