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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 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
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
Javascript实现的分页函数
2007/02/07 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python上传package到Pypi(代码简单)
2016/02/06 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
Linux面试题LINUX系统类
2015/11/25 面试题
幼儿园数学教学反思
2014/02/02 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
三八活动策划方案
2014/08/17 职场文书
高质量“欢迎词”
2019/04/03 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书