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


Posted in HTML / CSS onMarch 28, 2013

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

运行效果:

1.在EditPlus中运行

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

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

2.在chrome浏览器中运行

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

检测浏览器是否支持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>
HTML / CSS 相关文章推荐
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 #HTML / CSS
HTML5中的Article和Section元素认识及使用
Mar 22 #HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 #HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 #HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 #HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 #HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 #HTML / CSS
You might like
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
javascript cookies操作集合
2010/04/12 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
javascript常用对话框小集
2013/09/13 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
JSON相关知识汇总
2015/07/03 Javascript
javascript self对象使用详解
2016/10/18 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
浅谈flask中的before_request与after_request
2018/01/20 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python编写微信公众号首图思路详解
2019/12/13 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
python实现与redis交互操作详解
2020/04/21 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
宝信软件JAVA工程师面试经历
2012/08/19 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
孔子观后感
2015/06/08 职场文书
致接力运动员加油稿
2015/07/21 职场文书