检测浏览器是否支持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 相关文章推荐
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 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
PHP入门速成(2)
2006/10/09 PHP
扩展你的 PHP 之入门篇
2006/12/04 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
javascript基础知识讲解
2017/01/11 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
elementui的默认样式修改方法
2018/02/23 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
Python操作MySQL数据库9个实用实例
2015/12/11 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
Python高斯消除矩阵
2019/01/02 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Python 变量的创建过程详解
2019/09/02 Python
在python中做正态性检验示例
2019/12/09 Python
Python configparser模块应用过程解析
2020/08/14 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
写自荐信三大法宝
2014/01/24 职场文书
2014国庆节标语口号
2014/09/19 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL