兼容各个浏览器的H 264播放 H 264+HTML5+FLOWPLAYER+WOWZA+RMTP

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

一、方案确定

计划做视频播放，要求能够播放H264编码的mp4文件，各个浏览器，各种终端都能播放。

首先查找可行性方案，

http://www.cnblogs.com/sink_cup/archive/2011/04/21/html5_video_ipad_firefox_chrome_ie9876_flash.html，这个方案将视频播放分为两部分，一是html5播放，二是flash播放。如果浏览器支持用html5的video标签播放h264的mp4文件，如ie9,chrome，safari采用html5播放，如果不支持，降级采用flowplayerp（以下简称fp）播放mp4文件。

不足是firefox，opera目前不支持h264编码，无论是html5还是fp在这两种浏览器上无法播放（经过后来实验，ff下是只有音频没有视频）。

还有一个方案是 http://hi.baidu.com/alimyself/item/7f5c003f3397968bb611db07 使用非常简单，只要链接一个js文件就可以了。所以，只要您的页面上（头部或底部）有这么段代码：

<scriptsrc="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script> 

就可以了。

这个封装太严密，无法灵活控制状态条和播放器属性。

http://www.zhangxinxu.com/study/201003/html5-video-mp4.html 

决定采用此方案。

首先使用方案中的代码搭建整体框架。在使用该方案过程中，有一些改动，后附代码。

其他的一些降级方案：

可行的跨浏览器 HTML5 音频和视频：

http://msdn.microsoft.com/zh-cn/magazine/hh781023.aspx

优雅降级：http://www.iefans.net/html5-qianru-shipin/

没怎么看明白的一篇文章，貌似也是引用外部的一个js即可：

http://camendesign.com/code/video_for_everybody

Flowplayer提供的降级方案：http://flowplayer.bl