检测浏览器是否支持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 Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python实现在线音乐播放器
2017/03/03 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python实现机器学习之多元线性回归
2018/09/06 Python
java判断三位数的实例讲解
2019/06/10 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
最好的商品表达自己:Cafepress
2019/09/04 全球购物
校园歌手大赛策划书
2014/01/17 职场文书
市场部规章制度
2014/01/24 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
微笑服务演讲稿
2014/05/13 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python