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

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

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

then load my custom player else use SWFObject to render it.

有可能做到以下几点:

 ` If (HTML5 supported browser) {  (My custom player) }else{  (I would call SWFobject here) } ` 

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

通常我可以在video标签中有一个额外的 ,但由于播放器插入页面的方式,这是不可能的。

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

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

它可以进行特征检测

更好的解决方案是使用Modernizr之类的东西在客户端进行function检测.Modernizr是一个开源的,MIT许可的JavaScript库,可检测对许多HTML5和CSS3function的支持。 如果您的浏览器不支持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 

参考

查看Dive into HTML5中的所有内容,尤其是“检测HTML5技术”部分。 它有你可能需要的一切。

一次class轮检查……

 // Plain JavaScript (typeof document.createElement('canvas').getContext === "function") // Or... Using lodash _.isFunction(document.createElement('canvas').getContext) 

以下是w3schools的工作方式:

 function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest) { h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); if (!h264Test) { document.getElementById("checkVideoResult").innerHTML="Sorry. No video support." } else { if (h264Test=="probably") { document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!"; } else { document.getElementById("checkVideoResult").innerHTML="Meh. Some support."; } } } else { if (oggTest=="probably") { document.getElementById("checkVideoResult").innerHTML="Yeah! Full support!"; } else { document.getElementById("checkVideoResult").innerHTML="Meh. Some support."; } } } else { document.getElementById("checkVideoResult").innerHTML="Sorry. No video support." } }