2011.09.29――― html5 之特征检测 _HTML/CSS

2011.09.29――― html5 之特性检测
2011.09.29――― html5 之特性检测

参考：http://www.mhtml5.com/resources
http://blog.sina.com.cn/s/blog_6aaf309f0100x0xs.html

1、视频检测

依据：如果浏览器支持HTML5 video,被创建<video>元素对应的DOM对象会有一个名为canPlayType()的方法，反之，该对象只会拥有一些所有元素都有的公共属性。

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

2、视频格式检测
参考：http://www.mhtml5.com/resources/html5-%E7%89%B9%E6%80%A7%E6%A3%80%E6%B5%8B%EF%BC%9Avideo-format%E8%A7%86%E9%A2%91%E6%A0%BC%E5%BC%8F

不是所有的浏览器都遵循一种视频编码算法，它们主要遵循两种编码算法，一种是Safari和iphone遵循的需要收费的(MPEG4)，另外一种是Chromium和Mozilla Firefox支持的开源免费的(OGG)。

MPEG4

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"');
}

ogg

function supports_ogg_theora_video(){
  if(!supports_video()){ return false; }
  var v = document.createElement('video');
  return v.canPlayType('video/ogg; codecs="theora,vorbis"');
}

另外：
canPlayType()方法不会返回boolean值（True或者False）。因为视频格式非常的复杂，所以这个方法的返回值有以下几种值：

2.1. “probably“如果你的浏览器确认可以支持你传入的视频格式

2.2. “maybe”如果你的浏览器或许可以支持你传入的视频格式

2.3. “”（空的字符串）如果你的浏览器确认不能支持你传入的视频格式

3、Canvas检测

依据：如果你的浏览器支持The Canvas API，那么检测时候被创建的<canvas>DOM对象会有getContext()这个方法，如果你的浏览器不支持的话，那被创建的<canvas>DOM对象就不会拥有Canvas特定的属性。

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

4、Canvas Text检测

2011.09.29――― html5 之 特征检测

2011.09.29――― html5 之特征检测