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 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
HTML5单页面手势滑屏切换原理分析
Jul 10 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
Apr 22 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在window iis的莫名问题的测试方法
2013/05/14 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
解决layui的input独占一行的问题
2019/09/10 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python字符串的常见操作实例小结
2019/04/08 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python3中for循环踩过的坑记录
2020/12/14 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
家长对老师的评语
2014/04/18 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
设计师求职信模板
2014/05/06 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
Python List remove()实例用法详解
2021/08/02 Python
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS