话不多说,下面是我从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的更多相关文章

  1. 判断浏览器是否支持html5和css3属性

    本文章内容是由一个前辈写的. CSS3特有的属性moz-Transform //判断是否具有相应属性 testProps: function (props) { var i; for (i in pr ...

  2. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  3. 浏览器不支持HTML5

    有些浏览器并不支持HTML5中的新增元素,如IE8或更早版本.想要应用样式,可以头部标记<head>中加入下面JavaScript代码 <html> <head> ...

  4. 判断浏览器是否支持FileReader

    1.js代码: //判断浏览器是否支持FileReader if (typeof FileReader == "undefined") { document.write(" ...

  5. 新Chrome浏览器不支持html5的问题

    window.applicationCache事件,最新chrome浏览器已经不能判断是否支持html5: 之前,在IE和Google中 为ApplicationCache对象,而在FF中为 Offl ...

  6. 判断浏览器是否支持某个css3属性的javascript方法

    判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...

  7. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

  8. document.documentElement.style判断浏览器是否支持Css3属性

    1.document.documentElement.style 属性定义了当前浏览器支持的所有Css属性 包括带前缀的和不带前缀的 例如:animation,webkitAnimation,msAn ...

  9. 判断浏览器是否支持H5

    window.onload = function() { if (!window.applicationCache) { alert("请升级您的浏览器版本,你的浏览器不支持HTML5!&q ...

随机推荐

  1. SpringMVC 使用PUT请求遇到的问题小结

    最近在使用REST风格的URL进行CURD操作的学习过程中 发现使用PUT请求时候提交表单进行修改操作 报错:Request method 'PUT' not supported 在网上查找资料发现是 ...

  2. 网址导航18A

    [导航] hao268 百度导航 泡泡导航 35Q网址导航 [名站] 百度 网易 腾讯 新华 中新 凤凰 [邮箱] 163邮箱 126邮箱 Yeah邮箱 QQ邮箱 阿里邮箱 189邮箱 [新闻] 联合 ...

  3. Linux permission denied问题

    初试Linux 本来想试一试递归的mkdir -p结果遇到了permission denied,但是自己明明是管理员啊 查了博客,在文件名前加上chmod 777 ,例如chmod 777  temp ...

  4. 《修炼之道:.NET开发要点精讲》读书笔记(二)

    1.简述.NET中CTS.CLS以及CLR的含义与作用. A:CTS指公共类型系统,是.NET平台中各种语言必须遵守的类型规范:CLS指公共语言规范,是.NET平台中各种语言必须遵守的语言规范:CLR ...

  5. SQL0419N 十进制除法运算无效,因为结果将有一个负小数位。 SQLSTATE=42911

    select case when sum(qty_sold*u.um03/u.um08) <> 0 then decimal(coalesce(sum(d.amt_sold_with_ta ...

  6. VUE 组件通信、传值

    一.通过路由进行带参传值: 两个组件A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({path:'/componen ...

  7. thinkpadE系列重装系统:u盘启动

    一.下载深度装机大师,制作启动u盘. 二.重启电脑:按F1;进入bios设置:     thinkpad e430c笔记本使用u盘装系统时无法使用u盘启动,这是由于thinkpad e430c笔记本u ...

  8. 小白的CTF学习之路8——节约内存的编程方式

    今天第二更,废话不说上干货 上一章我们学习了内存和cpu间的互动方式,了解到内存的空间非常有限,所以这样就需要我们在编程的时候尽可能的节省内存空间,用最少的空间发挥最大的效果,以下是几种节约内存的方法 ...

  9. OpenAL音频库例程

    Windows下C++可用的OpenAL demo. 基于alut工具库的OpenAL例程,涵盖了基本的OpenAL指令,对部分作出了注释,并且可以播放(当然得把对应的音频文件放到正确的路径下). # ...

  10. DAO和service的解释

    转自:http://blog.sina.com.cn/s/blog_4b1452dd0102wvox.html 我们都知道有了Hibernate后,单独对数据的POJO封装以及XML文件要耗损掉一个类 ...