检测浏览器是否支持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心形加载的动画源码的实现
Mar 09 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
html+css实现分层金字塔的实例
Jun 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代码
2010/08/08 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
python写xml文件的操作实例
2014/10/05 Python
Python with用法实例
2015/04/14 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python requests post多层字典的方法
2018/12/27 Python
Python的log日志功能及设置方法
2019/07/11 Python
python tornado修改log输出方式
2019/11/18 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
python 装饰器的基本使用
2021/01/13 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
什么是servlet链?
2014/07/13 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
承诺书的格式范文
2014/03/28 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
法人授权委托书样本
2014/09/19 职场文书
盲山观后感
2015/06/11 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技