话不多说,下面是我从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. MyEclipse 编译错误 web项目中的 js,jsp报错 更改

    搜索   validation   语法检测 必须 选定一个  不然不编译

  2. vue项目跳转到外部链接

    vue项目中遇到一个打印的功能.思考之后决定点击按钮,跳转到一个HTML页面(后台写的),利用window.print()方法调用浏览器的打印的功能. 所以,现在的问题是,怎样跳转到外部链接.开发vu ...

  3. 设计模式学习心得<代理模式 Proxy>

    在代理模式(Proxy Pattern)中,一个类代表另一个类的功能.这种类型的设计模式属于结构型模式. 在代理模式中,我们创建具有现有对象的对象,以便向外界提供功能接口. 概述 意图 为其他对象提供 ...

  4. Servers无法打开

    有时候打开MyEclipse莫名Servers窗口挂掉, 出现"Could Not Create The View :An Unexpected Exception Was Thrown&q ...

  5. O365 Manager Plus帮助台委派功能一览表

    O365 Manager Plus帮助台委派介绍 虽然Office 365允许您在全球任何地方工作,但它提供的管理功能十分不足.当一个组织分布在多个国家/地区时,一个管理员很难单独管理所有用户和邮箱. ...

  6. e.stopPropagation()兼容性处理

    使用jquery库,e.stopPropagation()兼容所有. 原生的就要这么写 function stopPropagation(e){ e=window.event||e; if(docum ...

  7. MUI中超链接失效解决办法

    重新绑定a标签点击事件,用 plus.runtime.openURL(this.href) 打开新页面

  8. 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)

    这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...

  9. (PMP)解题技巧和典型题目分析(模拟二)

  10. spring 5.1.2 mvc RequestMappingHandlerMapping 调用handler过程

    https://my.oschina.net/zhangxufeng/blog/2177464 https://www.jianshu.com/p/447826c28e37 Interceptors ...