HTML5特性检測：



   1.检測全局对象：诸如window或navigator是否拥有特定的属性



   2.创建元素：检測该元素的DOM对象是否拥有特定的属性



   3.创建元素：检測该元素的DOM对象是否拥有特定的方法



   4.创建元素：赋予该元素的DOM对象设定的属性值，检測浏览器



              是否保留该属性值



Modernizr：HTML5特性检測库，用于检測浏览器是否支持HTML5



         和CSS3特性.下载Development版http://www.modernizr.com/



eg.   



Ⅰ.检測浏览器是否支持canvas API



1. html5特性检測2：



<html>



<head>



<title>Dive into HTML5</title></head>



<body>



<script>



function supports_canvas() {



return !!document.createElement('canvas').getContext;}



alert(supports_canvas());



</script></body></html>



2.使用modernizr库提供的方法检測



<html><head><meta charset="utf-8">



<title>Dive into HTML5</title>



<script src="modernizr.custom.57110.js" ></script>



</head><body><script>



if (Modernizr.canvas) {



alert("OK"); }   // let's draw some shapes!



 else {



alert("no");}     // no native canvas support available



</script></body></html>



Ⅱ.检測浏览器是否支持HTML5 viedo



1.使用HTML5特性检測2



function supports_video(){



       return !!document.CreateElement(“video”).canPlayType;}



2.使用modernizr库提供的方法检測



if(modernizr.video){



let's play some video!}



else{



// no native video support available



// maybe check for QuickTime or Flash instead }



Ⅲ.检測浏览器是否支持某种视频格式



一．检測MPEG-4容器里的h.264编码格式的视频和AACLC格式的音频(mac和Iphone支持)



1.使用HTML5检測特性3



     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”’);}



canPlayType()方法返回一个字符串：



“probably”表示浏览器有充分把握能够播放此格式



 “maybe”表示浏览器可能播放此格式



“”(空字符串)表示浏览器无法播放此格式



二．检測Ogg容器内Theora编码格式的视频和Vorbis编码格式的音频(Mozilla Firefox等开源浏览器支持)



1.使用HTML5检測特性3



  function supports_ogg_theora_video(){



         if(!supports_video()){return false;}



         var v=document.createElement(“video”);



         return v.canPlayType(‘video/ogg;codecs=”theora,vorbis”’);}



三．检測 Matroska容器内webM视频编码格式和Vorbis编码格式的音频



1.使用HTML5检測特性3



function supports_webm_video() {



if (!supports_video()) { return false; }



var v = document.createElement("video");



return v.canPlayType('video/webm; codecs="vp8, vorbis"');



使用modernizr库提供的方法检測浏览器是否支持各种HTML5格式



    if (Modernizr.video) {



// let's play some video! but what kind?



if (Modernizr.video.ogg) {



// try Ogg Theora + Vorbis in an Ogg container



} else if (Modernizr.video.h264){// try H.264 video + AAC audio in an MP4 container



}}



Ⅳ.检測浏览器是否支持本地存储。

1.检測方法1

function supports_local_storage() {

return ('localStorage' in window) && window['localStorage'] !== null;

}



2.使用modernizr库

     if (Modernizr.localstorage) {

               // window.localStorage is available!}

       else {

           // no native support for local storage :(

          // maybe try Gears or another third-party solution

}



Ⅴ.检測浏览器是否支持Web Workers。

1.检測方法1

   function supports_web_workers() {

return !!window.Worker;

}

2.使用modernizr库

    if (Modernizr.webworkers) {

// window.Worker is available!

} else {

// no native support for web workers :(

// maybe try Gears or another third-party solution

}

Ⅵ.检測浏览器是否支持离线web应用（Offline Web Applications）

 1.检測方法1

    function supports_offline() {

return !!window.applicationCache;

}

2.使用modernizr库

  if (Modernizr.applicationcache) {

// window.applicationCache is available!

} else {

// no native support for offline :(

// maybe try Gears or another third-party solution

}

Ⅶ.检測浏览器是否支持地理位置应用

 1.检測方法1

    function supports_geolocation() {

return !!navigator.geolocation;

}

2.使用modernizr库

  if (Modernizr.geolocation) {

// let's find out where you are!

} else {

// no native geolocation support available :(

// maybe try Gears or another third-party solution

}

Ⅷ。检測浏览器是否支持输入框类型

1.检測方法4

function supports_inputtypes{

   var i = document.createElement("input");

   i.setAttribute("type", "color");

   return i.type !== "text";

}

2.使用modernizr库

  if (!Modernizr.inputtypes.date) {

// no native support for <input type="date"> :(

// maybe build one yourself with

// Dojo

// or jQueryUI

}

Ⅸ.检測浏览器是否支持站位文本（Placeholder Text）

   1.检測方法2

      function supports_input_placeholder() {

var i = document.createElement('input');

return 'placeholder' in i;

}

2.使用modernizr库

  if (Modernizr.input.placeholder) {

// your placeholder text should already be visible!

} else {

// no placeholder support :(

// fall back to a scripted solution

}

Ⅹ。检測浏览器是否支持自己主动聚焦

    1.检測方法2

        function supports_input_autofocus() {

var i = document.createElement('input');

return 'autofocus' in i;

}

2.使用modernizr库

if (Modernizr.input.autofocus) {

// autofocus works!

} else {

// no autofocus support :(

// fall back to a scripted solution

}

 Ⅺ。检測浏览器是否支持HTML5微数据API

 1.检測方法1

        function supports_microdata_api() {

return !!document.getItems;

}

HTML5特性检測的更多相关文章

  1. 浏览器对HTML5特性检測工具Modernizr

    近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...

  2. C++内存泄露检測原理

    转自:http://hi.baidu.com/jasonlyy/item/9ca0cecf2c8f113a99b4981c 本文针对 linux 下的 C++ 程序的内存泄漏的检測方法及事实上现进行探 ...

  3. 使用nodeitk进行角点检測

    前言 东莞,晴,33至27度.今天天气真好,学生陆续离开学校.忙完学生答辩事情,最终能够更新一下nodeitk.本文继续介绍node的特征识别相关内容,你会看到,採用nodeitk实现角点检測是一件十 ...

  4. Canny边缘检測算法原理及其VC实现具体解释(一)

    图象的边缘是指图象局部区域亮度变化显著的部分,该区域的灰度剖面一般能够看作是一个阶跃,既从一个灰度值在非常小的缓冲区域内急剧变化到还有一个灰度相差较大的灰度值.图象的边缘部分集中了图象的大部分信息,图 ...

  5. Android内存泄漏检測与MAT使用

    公司相关项目须要进行内存优化.所以整理了一些分析内存泄漏的知识以及工作分析过程. 本文中不会刻意的编写一个内存泄漏的程序,然后利用工具去分析它.而是通过介绍相关概念,来分析怎样寻找内存泄漏.并附上自己 ...

  6. 背景建模或前景检測之PBAS

    申明,本文非笔者原创,原文转载自:http://blog.csdn.net/kcust/article/details/9931575 Pixel-Based Adaptive Segmenter(P ...

  7. 图像边缘检測--OpenCV之cvCanny函数

    图像边缘检測--OpenCV之cvCanny函数 分类: C/C++ void cvCanny( const CvArr* image, CvArr* edges, double threshold1 ...

  8. 检測磁盘驱动的健康程度SMART

    在server中,全部组件中一般最easy坏掉的就是磁盘.所以一般採取RAID来保证系统的稳定性,通过冗余磁盘的方式防止磁盘故障. 现代硬件驱动器一般支持SMART(自我监測分析和报告技术),它可以监 ...

  9. OpenCV图像处理篇之边缘检測算子

    3种边缘检測算子 灰度或结构等信息的突变位置是图像的边缘,图像的边缘有幅度和方向属性.沿边缘方向像素变化缓慢,垂直边缘方向像素变化剧烈.因此,边缘上的变化能通过梯度计算出来. 一阶导数的梯度算子 对于 ...

随机推荐

  1. DELPHI 通過窗口句柄或窗口标题得到进程句柄

    DELPHI 通過窗口句柄或窗口标题得到进程句柄2009年05月08日 星期五 10:15procedure TForm1.Button1Click(Sender: TObject);varhWind ...

  2. c#1所搭建的核心基础之类型系统的特征

    类型系统的特征简介 几乎每种编程语言都有某种形式的一个类型系统.类型系统大致被分为:强/弱,安全/不安全,静态/动态,显式/隐式等类型. c#在类型系统世界中的位置 c#1的类型系统是静态的.显式的和 ...

  3. linux shell 正则表达式(BREs,EREs,PREs)差异比较

    linux shell 正则表达式(BREs,EREs,PREs)差异比较 则表达式:在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符 串的单个字符串.在很多文本编辑器或其他工具里 ...

  4. Swift - 触摸事件（点击，移动，抬起等）说明及用例

    在iOS开发中,UIGestureRecognizer可以方便的响应处理手势事件. 而如果要想更精细的处理,我们还需要借助touchesBegan,touchesMoved,touchesEnded等 ...

  5. 打印org.eclipse.xsd.XSDSchema对象

    由于网上关于Eclipse XSD的中文资料比較少,可是有的时候.我们须要使用Eclipse XSD的API去构造或者改动一个XSD文件. 那么当我们创建了org.eclipse.xsd.XSDSch ...

  6. Craig可能是个冲浪爱好者

    最近有个叫Dweeb的Mac管理员,在他的blog中声称发现,主管OS X和iOS等软件产品的苹果资深副总裁Craig是一个冲浪爱好者.他通过对6月10日的苹果WWDC发布会视频的研究,指出Craig ...

  7. MFC消息响应机制分析

    ---- 摘要: ---- MFC是Windows下程序设计的最流行的一个类库,但是该类库比较庞杂,尤其是它的消息映射机制,更是涉及到很多低层的东西,我们在这里,对它的整个消息映射机制进行了系统的分析 ...

  8. XP下的进程静音技术（遍历进程，遍历输入模块，遍历输入函数，找到函数并HOOK） good

    很多浏览器有这种功能,实现原理都是一样.发声源基本都来自Flash,比如Flash游戏啦,视频播放器啦等等 而Flash的发声都是通过winmm.dll::waveOutWrite函数来完成,所以,我 ...

  9. JSP中两种include的区别

    首先说明这两种都是什么: <%@ include file=”relativeURI”%> 可以叫作静态include(静态包含),是jsp指令中的一种,(JSP指令控制JSP编译器如何去 ...

  10. Android - 隐藏最顶端的通知条(Top Notification Bar)

    隐藏最顶端的通知条(Top Notification Bar/ActionBar) 本文地址: http://blog.csdn.net/caroline_wendy Android中, 视频播放等功 ...