关注前端开发微信微信号web007007

HTML5 特性检测:Video(视频)

作者 管理员 发布时间 2012-05-31 07:37 文章分类 HTML5 文章评论 抢沙发 阅读次数

你或许会问:“如果早期的浏览器不支持HTML5我该如何开始使用它呢?”。但是这个问题本身就会让人产生误解。HTML5只是一些特性的集合,因 此你不能说检测浏览器“是否支持HTML5”,但是你可以检测浏览器是否支持诸如“canvas“,“video”,“geolocation”等等这些 特性。

Canvas

HTML5定义了<canvs>元素作为位图画布在浏览器中的相关解决方案,它用于渲染图形,游戏图像或者其他飞行中的视觉图形。 一个Canvas代表了页面中的一个矩形区域,在这个区域里面,你可以用Javascript来画你想画的任何东西。HTML5定义了一系列的方法 (“The Canvas API”)用来画图形,定位路径,创建渐变以及将图形变形。

检测你的浏览器是否支持The Canvas API可以使用之前介绍过的第二种方法,如果你的浏览器支持The Canvas API,那么检测时候被创建的<canvas>DOM对象会有getContext()这个方法,如果你的浏览器不支持的话,那被创建 的<canvas>DOM对象就不会拥有Canvas特定的属性。

function supports_canvas(){</div>
<div>return !!document.createElement(‘canvas’).getContext;</div>
<div>}

这个方法执行后会创建一个和页面无关的<canvas>元素。这个元素有永远不会被看到。它只是内存中的一个片段,并且游离在内存中,就好像是水流缓慢的小河上一叶扁舟。

return !!document.createElement(‘canvas’).getContext;
在你创建完<canvas>元素后,紧接着你开始测试它是否存在getContext()方法。这个方法只会在你浏览器支持The Canvas API才会存在。

return !!document.createElement(‘canvas’).getContext;

最后,你用两个否定的一元操作符来强制这个检测方法返回一个Boolean值。
return !!document.createElement(‘canvas’).getContext;
这个方法可以检测你的浏览器是否支持绝大部分的the canvas API,包括 shapes,paths,gradients 和 patterns。它不会检测实现让微软的IE浏览器支持HTML5特性的第三方explorercanvas库。
如果你不想自己亲手去写检测方法的话,你可以使用Modernizr来检测你的浏览器是否支持The Canvas API
if(Modernizr.canvas){</div>
<div>//let’s draw some shapes!</div>
<div>}else{</div>
<div>//no native canvas support available</div>
<div>}
P.S.:
检测技术
当你的浏览器渲染一个web页面的时候,它会构造一个对象的集合DOM(Document Object Model)来表示页面上的HTML元素。每一个元素:<p>,<div>,<span>等都会被表示成DOM中不同的对象。
所有的DOM 对象共享一个公共属性的集合,但是有些对象会拥有更多的属性。在支持HTML5特性的浏览器中,部分特定的对象会有独一无二的属性。通过对DOM的快速了解能够告诉你你哪些HTML5的特性是被支持的。
检测了浏览器是否在支持一个特定的HTML5特性有四种基本的技术,由简入繁依次是:
1、检测全局对象(诸如window或者nagivator)是否支持题特定的属性
2、创建一个元素,然后检测该元素是否存在特定的一些属性
3、创建一个元素,然后检测这个元素上是否存在特定的方法,同时调用这个方法了检查它的返回值
4、创建一个元素,给这个元素设定HTML5特有的属性,然后检查浏览器是否保留了该属性值

本文固定链接: http://www.web92.net/102.html | WEB前端开发

该日志由 于2012年05月31日发表在 HTML5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: HTML5 特性检测:Video(视频) | WEB前端开发