HTML5视频方案:支持iPad Safari、Firefox、Chrome、IE9876

HTML网页视频点播方案

想在网页中播放视频?

以前浏览器不能直接播放视频,所以需要用插件,比如wmp、real player、flash。而wmp、real player不能跨平台、跨浏览器,flash有时候会导致浏览器卡、崩溃。

现在浏览器集成了播放器,不再需要插件了,直接能放视频,提高了性能、稳定性、跨平台兼容性。在HTML 4、XHTML 1、HTML5的页面中都能播放。

浏览器能播放哪种格式的视频?各个浏览器不同,有专利格式的,有开源格式的。

具体支持情况如下:

专利格式mp4:Safari(iPad、Windows、Mac OS)、Chrome、IE9

开源格式webm:Firefox、Chrome、Opera

开源格式ogg:Firefox、Chrome、Opera

如何让视频在所有浏览器上都能播放?如何支持iPad和IE876?请看下文。

商业方案:mp4->flash放mp4

视频文件格式:mp4

支持:Safari(iPad、Windows、Mac OS)、Firefox、Chrome、IE9876、Opera

原理:检测浏览器是否支持播放mp4,不判断浏览器名称,只检测功能。

结果:在Safari(iPad、Windows、Mac OS)、Chrome、IE9中原生播放mp4,在Firefox、Opera、IE876中使用flash播放器播放mp4。

优点:1个mp4文件,支持所有主流浏览器

缺点:mp4是专利格式,需考虑编码器授权

前公司演示:http://www.happyelements.cn/

步骤:

1、在web server的mime配置中加入video/mp4

2、下载代码:https://files.cnblogs.com/sink_cup/html_video.7z

请注意flow player是GPL授权的(http://flowplayer.org/download/index.html),如果有闭源的需要,请购买flow player或者自己编译一个flex播放器,比较简单。

代码采用公共领域授权,可任意使用。

截图与拍照如下:

开源方案:webm->flash放webm

视频文件格式:webm

支持:Safari(Windows、Mac OS)、Firefox、Chrome、IE9876、Opera

不支持:Safari(iPad)

原理:在Firefox、Chrome、Opera中原生播放webm,在Safari(Windows、Mac OS)、IE9876中使用flash播放器播放webm。

优点:webm是开源格式,1个webm即可支持主流浏览器。

缺点:不支持Safari(iPad),因为Safari(iPad)不支持flash。

依赖于adobe flash player支持webm,adobe在2010年5月宣称flash player将支持webm(http://blogs.adobe.com/flashplatform/2010/05/adobe_support_for_vp8.html),截至2011年4月21日还没有结果。

todo

posted @ 2011-04-21 03:11  sink_cup  阅读(59100)  评论(32编辑  收藏  举报
Creative Commons License

本站原创作品采用知识共享署名 3.0许可协议进行许可。