判断浏览器是否支持HTML5 video
话不多说,下面是我从W3C扒的判断浏览器是是否支持H5视频的代码,有需要的小伙伴,拿走不谢
HTML
<div id="checkVideoResult"><button onclick="checkVideo()">检测</button></div>
JS (代码格式是整理过的,不过复制进来就这样了,小伙伴们自己格式化一下哈)
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 = "抱歉你的浏览器不支持HTML5 video标签!."
} else {
if(h264Test == "probably") {
document.getElementById("checkVideoResult").innerHTML = "非常棒!你的浏览器支持HTML5 video标签!";
} else {
document.getElementById("checkVideoResult").innerHTML = "Meh. Some support.";
}
}
} else {
if(oggTest == "probably") {
document.getElementById("checkVideoResult").innerHTML = "非常棒!你的浏览器支持HTML5 video标签!";
} else {
document.getElementById("checkVideoResult").innerHTML = "Meh. Some support.";
}
}
} else {
document.getElementById("checkVideoResult").innerHTML = "Sorry. No video support."
}
}
判断浏览器是否支持HTML5 video的更多相关文章
- 判断浏览器是否支持html5和css3属性
本文章内容是由一个前辈写的. CSS3特有的属性moz-Transform //判断是否具有相应属性 testProps: function (props) { var i; for (i in pr ...
- ie8及ie8以下支持html5 video标签
html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...
- 浏览器不支持HTML5
有些浏览器并不支持HTML5中的新增元素,如IE8或更早版本.想要应用样式,可以头部标记<head>中加入下面JavaScript代码 <html> <head> ...
- 判断浏览器是否支持FileReader
1.js代码: //判断浏览器是否支持FileReader if (typeof FileReader == "undefined") { document.write(" ...
- 新Chrome浏览器不支持html5的问题
window.applicationCache事件,最新chrome浏览器已经不能判断是否支持html5: 之前,在IE和Google中 为ApplicationCache对象,而在FF中为 Offl ...
- 判断浏览器是否支持某个css3属性的javascript方法
判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...
- JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
- document.documentElement.style判断浏览器是否支持Css3属性
1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAn ...
- 判断浏览器是否支持H5
window.onload = function() { if (!window.applicationCache) { alert("请升级您的浏览器版本,你的浏览器不支持HTML5!&q ...
随机推荐
- 微信小程序实战[01]
接触微信小程序也有一段时间了,以天气预报练一下手. 主要实现了以下功能: (1) 首页图标式菜单,便于以后扩展功能 (2)首页顶部滚动消息 (3)页面右上角三点菜单转发功能,便于小程序的传播 (4)天 ...
- 201621123002《JAVA程序设计》第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 用 ...
- java学习(四)
学号 20189214 <Java程序设计>第四周学习总结 教材学习内容总结 枚举 枚举是JDK1.5版本新增的特性(泛型.For-each等如今被广泛应用的特性也是由JDK1.5时所新增 ...
- PlayFramework 一步一步来 之 页面模板引擎
Play的魔板引擎本人认为可以说是为full stack Developers量身打造的功能.在原有的html页面基础上,只需要在html文件名后缀名前面加上”.scala“,就可以在页面上写Scal ...
- 移动端使用fastclick时,模拟原生浏览器对象
移动浏览器原生click事件有300ms的延时,这是浏览器为了区分到底是双击还是单击事件.(实际上有些移动浏览器不支持双击事件.PC版chrome在手机模式下,当禁止用户双击缩放页面时(即有viewp ...
- linux '--stdin'错误 -批量修改密码
虚拟机:VMware虚拟机 系统:Linux ubuntu 4.4.0-31-generic #50~14.04.1-Ubuntu SMP Wed Jul 13 01:07:32 UTC 2016 ...
- css关于浮动的高度塌陷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 得到一个文件夹中所有文件的名称的几个方法(命令指示符, C++, python)
因为最近一直需要获得一个文件下的所有图片的名称,自己又总是跨平台使用,所以把自己在不同环境之下使用的方法总结如下 1.cmd 模式下 优点:简单 例如,我想将一个文件夹下的所有".jpg&q ...
- echarts使用踩坑实录之气泡图
最近想做一个统计文章点击率,评论率和点赞率的功能,听说echarts可以轻易完成它,于是我就选择使用echarts,考虑到我做的模块上文章是没有分类的,所以我的统计是基于一个个点,这一看嘛,感觉散点图 ...
- css响应式
<meta name="viewport" content="width=devicw-width,initial-scale=1.0"> 响应式图 ...