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中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 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和ACCESS写聊天室(四)
2006/10/09 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
PHP反射学习入门示例
2019/06/14 PHP
PHP7新特性
2021/03/09 PHP
js实现checkbox全选和反选示例
2014/05/01 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python实现的多线程http压力测试代码
2017/02/08 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python制作图片缩略图
2019/04/30 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python 等差数列末项计算方式
2020/05/03 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
What is EJB
2016/07/22 面试题
EJB面试题
2015/07/28 面试题
《小儿垂钓》教学反思
2014/02/23 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
酒店员工手册范本
2015/05/14 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js