检测浏览器是否支持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的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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实现递归循环每一个目录
2010/08/08 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Javascript 二维数组
2009/11/26 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
Python学习笔记之if语句的使用示例
2017/10/23 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
Python和Bash结合在一起的方法
2020/11/13 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
医学生实习自我鉴定
2013/09/27 职场文书
车间班组长的职责
2013/12/13 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL