检测浏览器是否支持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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 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
PHP 中的类
2006/10/09 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php文档更新介绍
2011/07/22 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php中的异常和错误浅析
2017/05/03 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
Python 修改列表中的元素方法
2018/06/26 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
Python eval函数原理及用法解析
2020/11/14 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
中学生打架检讨书
2014/02/10 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android