检测浏览器是否支持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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
React简单介绍
2017/05/24 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Python yield 小结和实例
2014/04/25 Python
使用python实现生成用户信息
2017/03/20 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
python hashlib加密实现代码
2019/10/17 Python
python常用运维脚本实例小结
2020/02/14 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
黄金酒广告词
2014/03/21 职场文书
班主任个人工作反思
2014/04/28 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL