检测浏览器是否支持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 相关文章推荐
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 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
一个简洁的多级别论坛
2006/10/09 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
PDO::prepare讲解
2019/01/29 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
js打造数组转json函数
2015/01/14 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
vue实现购物车小案例
2019/09/27 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
质量标语大全
2014/06/12 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python
Python实现数据的序列化操作详解
2022/07/07 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers