当前位置: 代码迷 >> HTML/CSS >> 2011.09.29――― html5 之 特征检测
  详细解决方案

2011.09.29――― html5 之 特征检测

热度:849   发布时间:2012-08-21 13:00:21.0
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检测




  相关解决方案