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

一、方案确定

计划做视频播放，要求能够播放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>

就可以了。

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

决定采用此方案。

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

其他的一些降级方案：

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

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

二、业务说明

基本框架加入后，就需要加入实际业务逻辑。

逻辑是所有人可以观看视频播放。

角色A满足某条件时，观看视频时不能控制播放进度，不能快进和后退，并且需要记录本次有效观看时间。播放开始时，需要从上次观看结束的时间点自动开始播放。

三、html5播放

首先是html5部分，在用video标签实现了基本播放后，需要控制角色A的播放控制条，禁用进度条。

搜索到一个用jquery和css实现的html5自定义控件：

下个问题是html5播放如何计时。在上边的控件中，有文件video.js中，定义有播放器的timeupdate事件，在此方法中，调用自定义的timeupdate方法，在自定义方法中，获取当前播放视频的进度currenttime，进行计时。

下个问题是html5如何在播放开始时设置播放器从哪里开始播放。html5的video有currenttime属性。在chrome，safari下可以设置后，效果很好。但是ie9下，若设置开始播放时间较长，currenttime会没有效果，直接从0开始播放。因此做了一些特殊处理。