判断浏览器是否支持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 ...
随机推荐
- c#跨线程访问的代码和窗体关闭退出死循环的代码
一:一段跨线程访问,给页面内的控件赋值的代码找了半天没找到,还得找了以前写的程序. 在这记下来吧 . 这是其他程序内可以跨线程访问的代码 . if (gridControl1.InvokeRequi ...
- 安卓学习 Drawable对象
whie(!images[currentImage].endWith(".PNG")&&!images[currentImage].endWith(".p ...
- Subplot 多合一显示
1.均匀图中图 matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. 使用到的方法叫作 subplot. 使用import导入matplotlib.pyplot模块, 并简写成plt ...
- my new blog
博客迁移至: https://www.dboop.com/
- 利用idea解决git代码冲突问题
问题描述:在开发过程中,如果你开发的代码与其他人造成冲突,在不处理的情况下会无法拉取,并且提交容易造成代码丢失: 解决方法: [此方法是同事郭富城的分享] 1,由于冲突,我们每次拉取都会失败,这时我们 ...
- P2146 [NOI2015]软件包管理器
题目链接:https://www.luogu.org/problemnew/show/P2146 题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安 ...
- 离线eclipse添加web工程
下载了eclipse,先写的后台程序,后来写前台程序的时候发现没有 新建->web dynamic project,如下方式添加: 帮助->安装新软件,在work with中选择版本对应的 ...
- Swagger2基本注解使用
@Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界面上也看到,所以不需要配置&q ...
- redis学习-散列表常用命令(hash)
redis学习-散列表常用命令(hash) hset,hmset:给指定散列表插入一个或者多个键值对 hget,hmget:获取指定散列表一个或者多个键值对的值 hgetall:获取所欲哦键值以及 ...
- abaqus邓肯张模型umat
首先是始点刚度法: SUBROUTINE UMAT(STRESS,STATEV,DDSDDE,SSE,SPD,SCD, RPL,DDSDDT,DRPLDE,DRPLDT, STRAN,DSTRAN,T ...