HTML5 特性检测：Video（视频）

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

Video

HTML5定义了一个新的元素：<video>，用来将视频内嵌到你的页面中。在页面中内嵌视频在过去如果没有诸如Apple的Quick Time或者是Adobe的Flash播放器的话是根本不可能的。

<video>元素的可用性是不需要任何脚本来检测的。你可以指定多个视频文件，随后支持HTML5的video特性的浏览器会选择一个它支持的视频格式来进行播放。（要想了解更多关于视频格式的内容，可以去查看“视频编码概述”的第一部分：Container formats和第二部分：lossy video codecs）。

不支持HTML5 video的浏览器会完全忽略<video>元素，但是你可以告诉浏览器用第三方插件来播放。Kroc Camen设计了一个能让HTML5的video元素在哪里都可以被支持的叫Video for Everybody!的解决方案，这个解决方案对于在早期的浏览器中会自动降级到用第三方的插件来播放视频文件。这个解决方案完全不用javascript，并且在所有的浏览器包括移动终端的浏览器上都工作的很好。

如果你要做的不仅仅是把视频“丢”到页面上，然后让它播放的话，你需要用javascript。这里你可以用之前介绍的检测方法的第二种方法来检测浏览器是否支持HTML5 的video特性。如果你的浏览器支持的话，那么在检测时候用来创建的<video>元素会有一个叫canPlayType()的方法，反之，该元素就不会有这个方法。

function supports_video(){
 return !!document.createElement('video').canPlayType;
}

同样的，如果你不想自己亲手去写这个检测方法的话，你可以使用Modernizr来检测你的浏览器是否支持HTML5的video特性。

if(Modernizr.video){
    //let's play some video!
}else{
    //no native video support available
    //maybe check for QuickTime or Flash instead
}
P.S.
检测技术
当你的浏览器渲染一个web页面的时候，它会构造一个对象的集合DOM(Document Object Model)来表示页面上的HTML元素。每一个元素：<p>,<div>,<span>等都会被表示成DOM中不同的对象。
所有的DOM 对象共享一个公共属性的集合，但是有些对象会拥有更多的属性。在支持HTML5特性的浏览器中，部分特定的对象会有独一无二的属性。通过对DOM的快速了解能够告诉你你哪些HTML5的特性是被支持的。
检测了浏览器是否在支持一个特定的HTML5特性有四种基本的技术，由简入繁依次是：
1、检测全局对象（诸如window或者nagivator）是否支持题特定的属性
2、创建一个元素，然后检测该元素是否存在特定的一些属性
3、创建一个元素，然后检测这个元素上是否存在特定的方法，同时调用这个方法了检查它的返回值
4、创建一个元素，给这个元素设定HTML5特有的属性，然后检查浏览器是否保留了该属性值