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

时间:2012-02-29 11:43:23

标签: javascript jquery html5 browser swfobject

编辑我现在更改了一些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

5 个答案:

答案 0 :(得分:18)

您是否看过http://www.modernizr.com/docs/#features-css

它可以进行特征检测

答案 1 :(得分:9)

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

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

Ref

如果您使用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

Ref

答案 2 :(得分:5)

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

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

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

答案 3 :(得分:4)

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

答案 4 :(得分:-2)

以下是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."
  }
}