检测浏览器是否支持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 相关文章推荐
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
Aug 01 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提取中文首字母
2008/04/09 PHP
PHP注释实例技巧
2008/10/03 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
python读写ini文件示例(python读写文件)
2014/03/25 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python使用tornado实现简单爬虫
2018/07/28 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
文明寄语大全
2014/04/11 职场文书
工会主席事迹材料
2014/06/03 职场文书
销售助理岗位职责
2015/02/11 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript
Python办公自动化解决world文件批量转换
2021/09/15 Python
Python实现批量自动整理文件
2022/03/16 Python
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript