如何检查浏览器是否支持HTML5？

Question

编辑我现在更改了一些Javascript,所以如果我能找到一个检测HTML5视频支持的javascript函数,它应该可以工作.

我有一个HTML5视频播放器,闪存后备,如果不支持HTML5,我希望它回退到闪存.我目前正在使用

<!--[if !IE]><!--> then load my custom player else use SWFObject to render it.

是否有可能做到以下几点:

`  If (HTML5 supported browser) {
 <some html and script>  (My custom player)
}else{
  <different html and script> (I would call  SWFobject here)
}
`

试图找到一个很好的简单解决方案的想法.

通常我可以<object>在视频标签中添加一个额外的,但由于播放器插入页面的方式,这是不可能的.

即使我可以使用可能不可靠的方法检测HTML5支持,但我不确定如何根据支持的输出获取HTML

Answer 1

你有没看过http://www.modernizr.com/docs/#features-css

它可以进行特征检测

Answer 2

更好的解决方案是使用Modernizr之类的东西在客户端进行功能检测.Modernizr是一个开源的,MIT许可的JavaScript库,可检测对许多HTML5和CSS3功能的支持.如果您的浏览器不支持canvas API,则Modernizr.canvas属性将为false.

if (Modernizr.canvas) {
  // let's draw some shapes!
} else {
  // no native canvas support available :(
}

参考

如果您使用JQuery的另一个解决方案:检查HTML 5的canvas元素的支持

var test_canvas = document.createElement("canvas") //try and create sample canvas element
var canvascheck=(test_canvas.getContext)? true : false //check if object supports getContext() method, a method of the canvas element
alert(canvascheck) //alerts true if browser supports canvas element

参考

Answer 3

一次班轮检查......

// Plain JavaScript
(typeof document.createElement('canvas').getContext === "function") 

// Or... Using lodash
_.isFunction(document.createElement('canvas').getContext)

Answer 4

查看深入 HTML5 中的所有内容，尤其是“检测 HTML5 技术”部分。它几乎拥有您可能需要的一切。