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