检测浏览器是否支持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动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
html5录音功能实战示例
Mar 25 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 安全过滤函数代码
2011/05/07 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python判断变量是否已经定义的方法
2014/08/18 Python
python动态参数用法实例分析
2015/05/25 Python
django实现用户登陆功能详解
2017/12/11 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
浅谈Python爬虫基本套路
2019/03/25 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
python连接mysql有哪些方法
2020/06/24 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
香港零食网购:上仓胃子
2020/06/08 全球购物
董事长职责范文
2013/11/08 职场文书
高中班主任评语大全
2014/04/25 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
创业计划书之个人工作室
2019/08/22 职场文书