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

Posted 2023-02-16

【中文标题】如何检查浏览器是不是支持 HTML5？

【英文标题】：How to Check if the browser supports HTML5?如何检查浏览器是否支持 HTML5？

【发布时间】：2012-03-18 21:40:19

【问题描述】：

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

我有一个支持 Flash 的 HTML5 视频播放器，如果不支持 HTML5，我希望它回退到 Flash。我正在使用

<!--[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

【问题讨论】：

在支持 HTML 5 中引入的一个任意特性和 HTML 5 中引入的另一个任意特性的浏览器之间没有 1:1 映射。测试navigator.geolocation 以查看浏览器是否支持您的视频是一个糟糕的主意。

这就是我不想用它的原因/

如果有人得到答案，我也有同样的问题

【参考方案1】：

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

可以做特征检测

【讨论】：

谢谢，我做了一个 JS 方法来做，但似乎 Modernizr 只是......更好

但是我们如何使用这个现代化工具你能给出一些示例代码

@404 - 在此处查看modernizrs HTML 功能检测：modernizr.com/docs/#features-html5。例如，如果您想检查是否支持 HTML5 画布，您可以这样做 if(Modernizr.canvas) ... 您可能还想查看 HTML5 Shiv 在旧浏览器中模拟 HTML5。

【参考方案2】：

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

【参考方案3】：

更好的解决方案是使用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 :(

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

【讨论】：

或者对于奖励积分，使用 Modernizr 中的 YEPNOPE 插件，如果不支持则加载 excanvas :)

【参考方案4】：

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."
  

【讨论】：

W3Schools 很烂。只是说。

【参考方案5】：

一个班轮检查...

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

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