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

  发布时间:2013-03-28 15:27:27   作者:佚名   我要评论
学习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>

相关文章

  • HTML5中视频音频的使用详解

    这篇文章主要给大家总结介绍了关于HTML5中视频音频的使用的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • HTML5+CSS3模仿优酷视频截图功能示例

    本篇文章主要介绍了HTML5+CSS3模仿优酷视频截图功能示例,在用户上传完成后,可以对播放的视频进行截图,非常具有实用价值,需要的朋友可以参考下。
    2017-01-05
  • canvas与html5实现视频截图功能示例

    本篇文章主要介绍了canvas与html5实现视频截图功能示例,非常具有实用价值,需要的朋友可以参考下。
    2016-12-15
  • html5 视频播放解决方案

    这里主要研究的是通过应用html5来解决视频播放的问题。Adobe公司因为战略错误,忽视了移动互联这块,移动终端对flash支持并不好,特别是苹果终端都不支持flash(苹果电脑和
    2016-11-06
  • HTML5页面音视频在微信和app下自动播放的实现方法

    现在大部分的H5页面都有实现播放背景音乐,播放视频功能。那怎么实现自动播放呢?下面小编给大家带来了HTML5页面音视频在微信和app下自动播放的实现方法
    2016-10-20
  • 浅谈Html5中视频 音频标签 进度条的问题

    下面小编就为大家带来一篇浅谈Html5中视频 音频标签 进度条的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-26
  • 使用HTML5在网页中嵌入音频和视频播放的基本方法

    这篇文章主要介绍了使用HTML5在网页中嵌入音频和视频播放的基本方法,
    2016-02-22
  • 浅谈基于HTML5的在线视频播放方案

    这篇文章主要介绍了基于HTML5的在线视频播放方案,讨论了编码和浏览器支持等相关方面的问题,需要的朋友可以参考下
    2016-02-18
  • HTML5中的音频和视频媒体播放元素小结

    这篇文章主要介绍了HTML5中的音频和视频媒体播放元素小结,是网站页面多媒体开发的基础知识,需要的朋友可以参考下
    2016-01-29
  • 用HTML5制作视频拼图的教程

    这篇文章主要介绍了用HTML5制作视频拼图的教程,主要用到了HTML5的Canvas API,需要的朋友可以参考下
    2015-05-13

最新评论