`

html5特性检测

阅读更多

 

//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特性的支持情况。HTML5引入了许多新的API和技术,但并非所有的浏览器都完整支持这些新特性。为了确保网站或应用能够在...

    检测浏览器支持哪些HTML5新特性的方法

    #### 三、Modernizr——HTML5特性检测工具 Modernizr是一款非常实用的JavaScript库,用于检测HTML5和CSS3特性。它可以方便地集成到项目中,通过简单的步骤即可实现对多种HTML5特性的检测。 - **获取Modernizr**:...

    HTML5揭秘中文版

    “HTML5特性检测”介绍了多种针对不同特性的检测方法;“本地存储”揭开了如何把“数据库”搬到客户端的神秘面纱;“离线应用”展示了脱机状态下依然能让Web应用完好无损的神奇技艺;“疯狂的表单”大秀了一把炫酷...

    HTML5 揭秘中文版

    “HTML5特性检测”介绍了多种针对不同特性的检测方法;“本地存储”揭开了如何把“数据库”搬到客户端的神秘面纱;“离线应用”展示了脱机状态下依然能让Web应用完好无损的神奇技艺;“疯狂的表单”大秀了一把炫酷...

    HTML5/CSS3检测库 Modernizer.zip

    HTML5特性检测 Modernizr能够检测的HTML5特性包括但不限于: - **离线存储(Offline Storage)**:如Application Cache,使网页在离线状态下也能访问。 - **语义元素**:如, , , , 等,提高网页内容结构化。 - **...

    easyhtml5-HTML5特性检测

    做web前段开发人员已经习惯了处理多浏览器兼容(如IE...所以我们需要对浏览器对html5的支持做一定的检测,从而给用户以有好提示;当浏览器在渲染web页面的时候会构造一个文档对象模型(DOM),通过它来表示页面上的HTML元

    HTML5揭秘英文版HTML5:up and running

    ### HTML5: Up and Running — 详尽解析与核心知识点 #### 一、书籍概览与背景介绍 ...通过对HTML5发展历程的回顾、特性检测方法的讲解以及核心特性的详细介绍,读者可以全面了解HTML5,并将其应用于实际项目中。

    Dive Into HTML5(英文版)

    #### 三、HTML5特性检测 随着HTML5的推出,浏览器支持情况变得至关重要。《深入HTML5》第二章详细介绍了如何检测浏览器是否支持特定的HTML5特性,这包括使用JavaScript进行条件判断的方法。作者通过“元素法”...

    自制html5检测页面

    本项目是一个自制的HTML5检测页面,主要用于检查用户的浏览器是否支持HTML5中的关键特性,特别是`canvas`标签。`canvas`是HTML5中的一个强大元素,允许动态渲染图形,包括图像、形状和动画,为网页带来了丰富的交互...

    判断浏览器类型(判断浏览器类型)

    三、HTML5特性检测 某些HTML5特性只能在特定的浏览器中支持。通过检测这些特性,可以间接推断出浏览器类型。例如,检查`document.createElement('canvas').getContext`是否存在,可以判断是否支持HTML5的Canvas,...

    HTML5设备环境检测大数据页面

    在这个"HTML5设备环境检测大数据页面"项目中,我们利用HTML5的技术特性,构建了一个能够实时监测和展示设备环境数据的平台。这个平台可以收集并分析各种设备的信息,包括设备数量、使用频率、开关机次数以及环境的...

    H5 人脸活体检测(数字读取检验)

    在H5实现人脸活体检测时,常用的技术框架有WebGL、HTML5 Canvas和JavaScript库,如Face++、Azure Face API等。这些工具可以进行实时的图像处理和分析,包括人脸检测(定位眉毛、眼睛、鼻子、嘴巴等关键点)、特征...

    识别微信浏览器

    3. **HTML5特性检测**:微信浏览器在某些HTML5特性的支持上可能与其他浏览器有所不同。可以通过检测这些特性来辅助判断,例如WebSocket的支持: ```javascript function isWeChatBrowserByWebSocketSupport() { ...

    js判断浏览器是否支持html5

    以上方法可以基本覆盖常见的HTML5特性检测,前端开发者可以根据自身项目需求,选择合适的检测方式。需要注意的是,随着浏览器的不断更新和升级,对HTML5的支持度越来越高,因此这些检测方法也会随之更新,开发者需...

    让IE旧版本浏览器也支持HTML5的特性

    标题 "让IE旧版本浏览器也支持HTML5的特性" 暗示了本文将讨论如何在Internet Explorer(IE)的老版本中启用HTML5的新功能。HTML5是超文本标记语言的最新版本,引入了许多增强的网页开发功能,如音频和视频嵌入、离线...

    Modernizr是一个JavaScript库,可以检测用户浏览器中的HTML5和CSS3特性.zip

    现代izr是一个强大的JavaScript库,专为开发者设计,用于检测用户浏览器对HTML5和CSS3新特性的支持情况。这个库的出现,极大地帮助了开发者在跨浏览器开发中确保网站或应用的兼容性,使得前端技术的创新能够更广泛地...

    html5做的路况检测

    在这个“html5做的路况检测”应用中,开发者巧妙地利用了HTML5的一些关键特性,包括Geolocation API、加速度传感器、Audio API以及jQuery库,创建了一个功能完善的路况监测系统。下面我们将详细探讨这些技术在实现...

Global site tag (gtag.js) - Google Analytics