HTML5视频支持检测(检查浏览器是否支持视频播放)


Posted in HTML / CSS onJune 08, 2013

复制代码
代码如下:

<STRONG>现在越来越多的网站都提供视频播放(非插件)。HTML5 提供了展示视频的标准。那么如何检查你得浏览器是否支持视频播放呢,下面我们来写一个列子。</STRONG>
复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<h1>HTML 5 视频</h1>
<p>检测您的浏览器是否支持 HTML5 视频:</p>
<div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">
<button style="font-family:Arial, Helvetica, sans-serif;" onclick="checkVideo()">Check</button>
</div>
</div>
</body>
</html>

下边是js代码:
复制代码
代码如下:

function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
//创建video元素
var vidTest=document.createElement("video");
//检测是否可以播放ogg格式的视频
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
//检测是否可以播放MP4格式的视频
h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
else
{
if (h264Test=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
}
}
}
else
{
if (oggTest=="probably")
{
document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
}
else
{
document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
}
}
}
else
{
document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
}
}
复制代码
代码如下:

canPlayType方法说明:
1.定义:检测浏览器是否能播放指定的音频/视频类型。
2.返回值:
"probably" ,表示浏览器最可能支持该视频或音频。
"maybe" ,表示浏览器可能支持该视频或音频。
"" (空字符串),表示浏览器不支持该视频或音频。
注:Internet Explorer 8 以及更早版本不支持该方法。
语法:audio|video.canPlayType(type))
参数说明:
type:要检测的音频或视频类型,
常用值:video/ogg;video/mp4;video/webm; audio/mpeg;audio/ogg;audio/mp4
常用值(包括要检测的音频或视频编解码器):
video/ogg; codecs="theora, vorbis"
video/mp4; codecs="avc1.4D401E, mp4a.40.2"
video/webm; codecs="vp8.0, vorbis"
audio/ogg; codecs="vorbis"
audio/mp4; codecs="mp4a.40.5"
HTML / CSS 相关文章推荐
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
Oct 10 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 #HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 #HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 #HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 #HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 #HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 #HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 #HTML / CSS
You might like
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
javascript取消文本选定的实现代码
2010/11/14 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
基于jquery实现五星好评
2017/11/18 jQuery
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python文件操作基本流程代码实例
2017/12/11 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python 日志增量抓取实现方法
2018/04/28 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python3并发写文件与Python对比
2019/11/20 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
零基础小白多久能学会python
2020/06/22 Python
django使用多个数据库的方法实例
2021/03/04 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
大学生个人自我鉴定
2013/12/03 职场文书
图书室管理制度
2014/01/19 职场文书
幼儿教师国培感言
2014/02/19 职场文书
社区义诊活动总结
2014/04/30 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js