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://movie.doubanxia.com/

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

代码打包下载:http://files.cnblogs.com/sink_cup/html_video.7z

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

代码(采用公共领域授权,可任意使用):

2010 ruse 360p

2010 inception 720p

截图与拍照如下:

开源方案: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

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/