判断浏览器是否支持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 ...
随机推荐
- RIDE安装操作
转载参考https://www.cnblogs.com/Ming8006/p/4998492.html 一.python安装 1.访问Python官网:https://www.python.org/ ...
- 教你如何用ps制作紫色光斑效果
1.新建800x800画布 2.设置前景色和背景色分别为#b38adb ,#212121;执行"滤镜"-"渲染"-"云彩"操作 3.执行&q ...
- sort 对多列进行排序
sort -t '\t' -k 3,3 -k 2,2 文件名 # 先对第三列进行排序,然后再对第二列进行排序
- Winform 利用 Oracle.ManagedDataAccess访问Oracle数据库
Winform 利用 Oracle.ManagedDataAccess访问Oracle数据库时出现以下错误: Message = "每个配置文件中只允许存在一个 <configSect ...
- ef 连接mysql,code first
方法“MySql.Data.MySqlClient.MySqlProviderServices.GetDbProviderManifestToken(System.Data.Common.DbConn ...
- 微信小程序开发之搞懂flex布局1——Flexbox
Flexbox ——弹性布局 Flexbox is a layout model for displaying items in a single dimension — as a row or as ...
- 87、代码适配IphoneX
一.APP在iphoneX运行后不能占满,上下都有多余的边 解决方法:把旧的image.xcassets中的LaunchImage删掉,重新创建并在Images.xcassets中为iPhone X添 ...
- [转]找到MySQL发生swap的原因
背景: 最近遇到了一个郁闷的问题:明明OS还有大量的空闲内存,可是却发生了SWAP,百思不得其解.先看下SWAP是干嘛的,了解下它的背景知识.在Linux下,SWAP的作用类似Windows系统下的“ ...
- expdp错误案例
转自:https://www.cnblogs.com/kerrycode/p/3960328.html Oracle数据泵(Data Dump)使用过程当中经常会遇到一些奇奇怪怪的错误案例,下面总结一 ...
- 基于UML的高校教务管理系统的设计与实现
一.基本信息 标题:基于UML的高校教务管理系统的设计与实现 时间:2018 出版源:南昌航空大学 领域分类:教育信息化:教务管理系统:UML:SSH:Oracle 二.研究背景 问题定义:高校教务管 ...