HTML5 特性检测:Video Format(视频格式)
2013-02-22 14:13
302 查看
不是所有的浏览器都遵循一种视频编码算法,它们主要遵循两种编码算法,一种是Safari和iphone遵循的需要收费的,另外一种是Chromium和Mozilla Firefox支持的开源免费的。
如果你的浏览器支持HTML5的Video特性,那么你用来检测的时候创建 的<video>元素会有一个叫canPlayType()的方法,这个方法可以告诉你你的浏览器支持哪种视频格式
如果你不想自己亲手去写这个检测方法的话,你可以使用Modernizr来检测你的浏览器支持哪种HTML5的视频格式。
if(Modernizr.video)
{//let's play some video! but what kind?if(Modernizr.video.ogg)
{//try Ogg Theora+Vorbis in an Ogg container}
else if
(Modernizr.video.h264)
{//try H.264 video + AAC audio in an MP4 container
}
}
用
来检测Macs和iphones支持的视频格式的方法是:function
supports_h264_baseline_video(){if(!supports_video()){ return false; }var
v = document.createElement("video");return v.canPlayType('video/mp4;
codecs="avc1.42E01E, mp4a.40.2"');}
这个方法从使用之前介绍过
的”supports_video()”方法来浏览器是否支持Video特性开始。如果你的浏览器不支持HTML5
的video特性,那么它自然也肯定不支持什么所谓的视频格式了。if(!supports_video()){ return false; }
“视
频格式”:简简单单一句话,其实包含了很多的东西。从技术的形式来讲,你可以问:“浏览器是否可以播放基于“H.264”的视频和在MPEG-4容器上的
AAC LC音频(我会在后面详细介绍视频的章节告诉你这是什么意思)。如果你想了解更多,你可以阅读视频编码概述这篇文章 return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
canPlayType()方法不会返回boolean值(True或者False)。因为视频格式非常的复杂,所以这个方法的返回值有以下几种值:
1. “probably“如果你的浏览器确认可以支持你传入的视频格式
2. “maybe”如果你的浏览器或许可以支持你传入的视频格式
3. “”(空的字符串)如果你的浏览器确认不能支持你传入的视频格式
第
二种检测Mozilla
Firefox和其他一些开源浏览器支持的开源视频编码格式的方式其实和第一种类似,唯一的不同点是你传入的参数不同,从技术的角度来讲,你可以问你的浏
览器是否支持在Ogg容器内的“Theora“视频格式和”Vorbis”音频格式。function
supports_ogg_theora_video(){if(!supports_video()){ return false; }var v =
document.createElement('video');return v.canPlayType('video/ogg;
codecs="theora,vorbis"');}
如果你的浏览器支持HTML5的Video特性,那么你用来检测的时候创建 的<video>元素会有一个叫canPlayType()的方法,这个方法可以告诉你你的浏览器支持哪种视频格式
如果你不想自己亲手去写这个检测方法的话,你可以使用Modernizr来检测你的浏览器支持哪种HTML5的视频格式。
if(Modernizr.video)
{//let's play some video! but what kind?if(Modernizr.video.ogg)
{//try Ogg Theora+Vorbis in an Ogg container}
else if
(Modernizr.video.h264)
{//try H.264 video + AAC audio in an MP4 container
}
}
用
来检测Macs和iphones支持的视频格式的方法是:function
supports_h264_baseline_video(){if(!supports_video()){ return false; }var
v = document.createElement("video");return v.canPlayType('video/mp4;
codecs="avc1.42E01E, mp4a.40.2"');}
这个方法从使用之前介绍过
的”supports_video()”方法来浏览器是否支持Video特性开始。如果你的浏览器不支持HTML5
的video特性,那么它自然也肯定不支持什么所谓的视频格式了。if(!supports_video()){ return false; }
“视
频格式”:简简单单一句话,其实包含了很多的东西。从技术的形式来讲,你可以问:“浏览器是否可以播放基于“H.264”的视频和在MPEG-4容器上的
AAC LC音频(我会在后面详细介绍视频的章节告诉你这是什么意思)。如果你想了解更多,你可以阅读视频编码概述这篇文章 return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
canPlayType()方法不会返回boolean值(True或者False)。因为视频格式非常的复杂,所以这个方法的返回值有以下几种值:
1. “probably“如果你的浏览器确认可以支持你传入的视频格式
2. “maybe”如果你的浏览器或许可以支持你传入的视频格式
3. “”(空的字符串)如果你的浏览器确认不能支持你传入的视频格式
第
二种检测Mozilla
Firefox和其他一些开源浏览器支持的开源视频编码格式的方式其实和第一种类似,唯一的不同点是你传入的参数不同,从技术的角度来讲,你可以问你的浏
览器是否支持在Ogg容器内的“Theora“视频格式和”Vorbis”音频格式。function
supports_ogg_theora_video(){if(!supports_video()){ return false; }var v =
document.createElement('video');return v.canPlayType('video/ogg;
codecs="theora,vorbis"');}
相关文章推荐
- html5的video标签支持的视频格式
- html5视频video标签的使用格式和属性
- Video---如何检测您的浏览器是否支持HTML5视频
- 一个html5播放视频的video控件只支持android的默认格式mp4和3gp
- 让Chrome的HTML5 video/audio tag支持更多种音视频格式
- 写了个html5播放视频的video控件,只支持mp4和3gp(android和ios默认支持的格式就写了这个)
- HTML5的video标签,视频在网页播放没有画面只有声音,支持的格式,MP4,
- 一个html5播放视频的video控件只支持android的默认格式mp4和3gp
- HTML5里video标签支持哪些格式的视频文件?
- HTML5 video播放视频的方法
- 【论文笔记】视频物体检测(VID)系列 FGFA:Flow-Guided Feature Aggregation for Video Object Detection
- kphp框架学习之html5的video视频标签学习总结
- HTML5的视频格式之争
- html5当中支持的视频格式
- 掌握HTML5中的多媒体--视频(video)
- 验证是否支持html5的Video标签及MP4视频播放
- HTML5特性 > 本地储存 >检测是否支持本地存储(Local Storage,sessionStorage)
- html5新特性--音频视频,拖放
- 视频目标检测--Flow-Guided Feature Aggregation for Video Object Detection
- HTML5 单个或者多个Video标签视频加载第一帧方法(poster属性)