检测浏览器是否支持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 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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中的UNICODE 编码与解码
2013/06/29 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP中overload与override的区别
2017/02/13 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Python datetime 如何处理时区信息
2020/09/02 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
教学大赛获奖感言
2014/01/15 职场文书
小学家长会邀请函
2014/01/23 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
计算机软件专业求职信
2014/06/10 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers