检测浏览器是否支持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轻松实现圆角效果
Nov 09 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
html实现弹窗的实例
Jun 09 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
纯html+css实现打字效果
Aug 02 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 信息采集程序代码
2009/03/17 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php 如何获取数组第一个值
2013/08/06 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
项目管理计划书
2014/01/09 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
学生会主席事迹材料
2014/01/28 职场文书
岗位职责的构建方法
2014/02/01 职场文书
银行简历自我评价
2014/02/11 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
具结保证书
2015/01/17 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
时尚女魔头观后感
2015/06/04 职场文书
钢琴师观后感
2015/06/12 职场文书
关于Vue中的options选项
2022/03/22 Vue.js
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript