网站地图    收藏   

主页 > 前端 > html5 >

检测浏览器是否支持html5视频的代码_html5教程技巧

来源:自学PHP网    时间:2015-01-26 11:14 作者: 阅读:

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

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

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

运行效果:

1.在EditPlus中运行

2.在chrome浏览器中运行

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

代码部分:

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

复制代码
代码如下:

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

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论