检测浏览器是否支持html5视频的代码

程序员文章站 2023-11-21 12:45:10

学习w3c是看到一个检测您的浏览器是否支持 HTML5 视频的方法，在这里与大家分享下，感兴趣的各位可以参考下哈，希望可以帮助到你... 13-03-28...

在http://www.w3school.com.cn学习html5的时候，看到一个检测您的浏览器是否支持 html5 视频的方法：

运行效果：

1.在editplus中运行

检测浏览器是否支持html5视频的代码

2.在chrome浏览器中运行

检测浏览器是否支持html5视频的代码

=======================================================

代码部分：

=======================================================

复制代码

代码如下:

<!ductype html>
<html>
<script type="text/javascript">
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="yes! full support!";
}
else
{
document.getelementbyid("checkvideoresult").innerhtml="well. some support.";
}
}
}
else
{
if (oggtest=="probably")
{
document.getelementbyid("checkvideoresult").innerhtml="yes! full support!";
}
else
{
document.getelementbyid("checkvideoresult").innerhtml="well. some support.";
}
}
}
else
{
document.getelementbyid("checkvideoresult").innerhtml="sorry. no video support."
}
}
</script>
<body>
<p>检测您的浏览器是否支持 html5 视频：</p>
<div id="checkvideoresult" style="margin:10px 0 0 0; border:0; padding:0;">
<button onclick="checkvideo()" style="font-family:arial, helvetica, sans-serif;">check</button>
</div>
</body>
</html>

上一篇： HTML5中的Article和Section元素认识及使用

下一篇： html5与css3小应用

检测浏览器是否支持html5视频的代码