检测浏览器是否支持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系列之3D制作方法案例
Aug 14 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
Li list-style-image 图片垂直居中实现方法
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
MySQL中create table语句的基本语法是
2007/01/15 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP中的替代语法简介
2014/08/22 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
js前端导出Excel的方法
2017/11/01 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python识别验证码的实现示例
2020/09/30 Python
杭州-DOTNET笔试题集
2013/09/25 面试题
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
《灯光》教学反思
2014/02/08 职场文书
2014年管理工作总结
2014/11/22 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python