一、方案确定

计划做视频播放，要求能够播放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.blacktrash.org/graceful.html

二、业务说明

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

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

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

三、html5播放

首先是html5部分，在用