话不多说,下面是我从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. angular ViewChild ContentChild 系列的查询参数

    官方说明 官方文档 在调用 NgAfterViewInit 回调函数之前就会设置这些视图查询. 元数据属性: selector - 用于查询的指令类型或名字. read - 从查询到的元素中读取另一个 ...

  2. API Test WebApiTestClient工具安装及使用

    一.guget安装: 1.解决方案右键-管理解决方案的nuget程序包打开如下图: 搜索WebApiTestClient,然后选择查询出的项目,右边点击安装即可:   2.安装会有如下图提示: 确定即 ...

  3. Vue中 $ref 的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组 ...

  4. CAPTCHA--验证码

    验证码开发有两种方法: 1.自己用代码画一个 2.调用ValidateCode.jar工具包 第一种方式: 创建一个动态web工程 编写一个Servlet,在该Servlet内进行如下操作 验证码开发 ...

  5. python基础 (装饰器,内置函数)

    https://docs.python.org/zh-cn/3.7/library/functions.html 1.闭包回顾 在学习装饰器之前,可以先复习一下什么是闭包? 在嵌套函数内部的函数可以使 ...

  6. HDU2035

    #include <bits/stdc++.h> using namespace std; int fastpow(int a,int b,int k) { ; while(b) { ) ...

  7. openstack 王者归来学习笔记

    rpc.call方法执行的流程:(下次看代码的时候可以根据这流程来看,注意:由于rpc服务器和客户端具有很松的耦合性,因此以上步骤并不是绝对的.) 1.rpc服务器定义和启动rpc服务 2.rpc服务 ...

  8. 安装 redis 拓展

    PHP API 20121113 PHP Extension 20121212 Zend Extension 220121212 Zend Extension Build API220121212,T ...

  9. 信号量(Semaphore)

    在python的多线程体系中,一共有4种锁: 同步锁(互斥锁):Lock: 递归锁:RLock: 信号量:Semaphore: 同步条件锁:Condition. 信号量(semaphore)是一种可以 ...

  10. linux时区和时间设置

    1,修改时区 调整时区使用tzselect [root@lyn ~]# hwclock Tue Nov :: PM AST -0.198205 seconds [root@lyn ~]# tzsele ...