如何检查浏览器是否支持HTML5
How to Check if the browser supports HTML5?
EDIT我现在已经更改了一些Javascript,所以如果我能找到一个检测HTML5视频支持的Javascript函数,它应该可以工作。
我有一个HTML5视频播放器,它有flash回退,如果不支持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基于支持的输出
你看过吗http://www.modernizr.com/docs/#features-css
它可以进行特征检测
更好的解决方案是使用类似Modernizr的东西在客户端上进行功能检测。Modernizer是一个开源的、麻省理工学院许可的JavaScript库,可以检测对许多HTML5&CSS3功能。如果浏览器不支持canvas API,则Modernzr.canvas属性将为false。
if (Modernizr.canvas) {
// let's draw some shapes!
} else {
// no native canvas support available :(
}
参考
如果您正在使用JQuery,另一个解决方案是:检查是否支持HTML5的画布元素
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
参考
一行检查。。。
// Plain JavaScript
(typeof document.createElement('canvas').getContext === "function")
// Or... Using lodash
_.isFunction(document.createElement('canvas').getContext)
查看Dive into HTML5的所有内容,尤其是"检测HTML5技术"部分。它几乎有你可能需要的一切。
以下是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."
}
}
相关文章:
- jQuery检测浏览器是否支持Zoom
- 浏览器是否持久缓存脚本元素的编译版本
- 如何(功能)检测浏览器是否支持WebM alpha透明度
- 如何知道浏览器是否阻止插件
- 查看浏览器是否在React中更改了路线
- 角度2:检查用户的浏览器是否兼容
- 检查浏览器是否支持iFrame上的加载方法
- 检查浏览器是否支持 HTML 验证
- 如何检测浏览器是否正在加载
- 安卓股票浏览器是否支持WebSocket
- 检查浏览器是否已完成页面加载
- 浏览器是否在选项卡之间传播javascript变量
- 如何检测浏览器是否支持js-onscroll.立即
- 具有辅助功能的浏览器是否支持CSS或JavaScript
- 检测浏览器是否启用了 TLS
- 如何使用JavaScript /条件注释测试浏览器是否符合CSS3
- 大视频.js - 检查浏览器是否支持,背景图像回退
- 如何检测谷歌浏览器是否阻止Flash播放
- 如何检查浏览器是否支持带有javascript的svg
- 浏览器是否缓存下载的javascript