检测浏览器是否支持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实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 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实现的生成静态HTML速度快类库
2007/03/31 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python Tkinter版学生管理系统
2019/02/20 Python
python日志logging模块使用方法分析
2019/05/23 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
JSF界面控制层技术
2013/06/17 面试题
办理护照介绍信
2014/01/16 职场文书
高中美术教学反思
2014/01/19 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
KVM基础命令详解
2022/04/30 Servers