一、方案确定 计划做视频播放,要求能够播放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./svn/trunk/src/html5media.min.js"></script> 就可以了。 这个封装太严密,无法灵活控制状态条和播放器属性。 http://www./study/201003/html5-video-mp4.html 决定采用此方案。 首先使用方案中的代码搭建整体框架。在使用该方案过程中,有一些改动,后附代码。 其他的一些降级方案: 可行的跨浏览器 HTML5 音频和视频: http://msdn.microsoft.com/zh-cn/magazine/hh781023.aspx 优雅降级:http://www./html5-qianru-shipin/ 没怎么看明白的一篇文章,貌似也是引用外部的一个js即可: http:///code/video_for_everybody Flowplayer提供的降级方案:http://flowplayer./graceful.html
二、业务说明 基本框架加入后,就需要加入实际业务逻辑。 逻辑是所有人可以观看视频播放。 角色A满足某条件时,观看视频时不能控制播放进度,不能快进和后退,并且需要记录本次有效观看时间。播放开始时,需要从上次观看结束的时间点自动开始播放。
三、html5播放 首先是html5部分,在用video标签实现了基本播放后,需要控制角色A的播放控制条,禁用进度条。 搜索到一个用jquery和css实现的html5自定义控件: http://www./html5/custom-html5-video-controls-with-jquery/。 可以灵活控制按钮是否可见,及按钮事件。 下个问题是html5播放如何计时。在上边的控件中,有文件video.js中,定义有播放器的timeupdate事件,在此方法中,调用自定义的timeupdate方法,在自定义方法中,获取当前播放视频的进度currenttime,进行计时。 下个问题是html5如何在播放开始时设置播放器从哪里开始播放。html5的video有currenttime属性。在chrome,safari下可以设置后,效果很好。但是ie9下,若设置开始播放时间较长,currenttime会没有效果,直接从0开始播放。因此做了一些特殊处理。 相关参考: 检测当前浏览器是否支持html5的video标签: http://www.w3school.com.cn/html5/html_5_video.asp Html5全局属性:http://www.w3school.com.cn/html5/html5_ref_globalattributes.asp Html5 全局事件属性:http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp 针对html5的video标签的详解:http://www./design/css/20106/1415123_3.htm http://wiki./wiki/Video_type_parameters 各个浏览器对html5支持程度测试:www. 各个浏览器对html5支持程度的图文说明:http:/// Html5视频播放能否用wowza服务器, http://www./forums/showthread.php?7532-HTML5-Support-for-video-playback 目前没有测试成功,直接使用http播放。
四、 flowplayer 播放 Html5播放搞定后,整个播放才完成了一小部分,继续fp播放。首先是fp的播放按钮控制,fp有提供一个控制条插件:在页面jsp中加入flowplayer.controls-3.2.8.js,flowplayer.controls-3.2.8.min.js 并且在播放器初始代码中初始化即可。可自定义控制条各个按钮是否显现及播放条样式。 工具条插件: http:///plugins/flash/controlbar.html http:///documentation/configuration/clips.html //菜单插件 http:///plugins/flash/menu.html
下边是播放如何计时。由于fp没有类似于html5的timeupdate事件,因此需要自定义js计时器,在播放器开始播放时,开始计时: clearIntervalFun=setInterval(fpTimeUpdate,1000); 在timeupdate中用getttime方法获取fp的当前时间并计时。 Flowerplayer事件及属性 http://blog.sina.com.cn/s/blog_6cabf4070100wry7.html http:///demos/skinning/tooltips.html http://releases./apidoc-latest/org/flowplayer/model/Clip.html 最难的是fp如何设置视频的开始播放时间,在fp官网看到一个关于伪流的东西,http:///plugins/streaming/pseudostreaming.html 上边有一句话很是让人开心:Random seeking to any part of the timeline at any time.。可以加载到视频的任何地方进行播放。需要flowplayer.pseudostreaming-3.2.9.swf 插件,看还有说要用到一个名为lighttpd的web server。 于是尝试在linux服务器下安装lighttpd,以期能够使用flowplayer.pseudostreaming 搜索之后,发现lighttpd默认播放flv,如果要播放h264的,需要添加h264 模块。 http://h264./trac/wiki/Mod-H264-Streaming-Apache-Version2 安装完lighttpd,添加h264模块, 这个过程极其繁琐,耗费大量时间。 此时再使用fp的start参数,或者是seek方法,均不凑效。 后再仔细看流媒体概念,见: http://202.192.163.58/internet/page/kch-nr/page_10_4.htm 才发现伪流是顺序流式下载,“这种方式和传统的下载方式没有本质的区别,只是因为客户端的软件可以在媒体没有完全下载就可以播放,它不能跳过头部,必须先下完前面的才可以看后面的;”。如果需要视频从一开始就播放还未下载到的部分,那么只能使用实时流式传播。 是我对fp的伪流控件的说明理解的有问题,还是lighttpd安装有问题,具体问题出在哪里,现在还不明白。 如果要使用实时流式传播,就要使用流媒体服务器。鉴于fp有提供一个rtmp的插件,决定用rtmp协议。 原来已经安装成功helix,并成功使用rtsp协议进行realplayer播放。准备继续沿用helix,但是在helix端口配置中未找到rtmp的端口配置,不确定helix是否支持rtmp协议,因此决定流媒体服务器用wowza。 各个流媒体对比:http://en./wiki/Comparison_of_streaming_media_systems Wowza 在各种流媒体服务器中,支持较多编码格式,较多终端。
安装wowza, Wowza安装 http://sunky045./blog/538288 并配置applications,具体见 http://www./forums/content.php?3-quick-start-guide Wowza配置application,简单说就是在安装目录/usr/local/WowzaMediaServerPro的application下,创建一个你的applicationName名称的空文件夹。在 /usr/local/WowzaMediaServerPro的conf文件夹下,创建一个与上边applicationName保持一致的文件夹,然后把/usr/local/WowzaMediaServerPro的conf下的所有配置文件,复制到 /usr/local/WowzaMediaServerPro/conf/applicationName下,修改复制过来的配置文件中的application.xml的StorageDir 路径,这个就是wowza的application指向的地址。 Wowza测试是否正在运行 访问: http://ip:1935 如果能访问到,说明wowza安装成功。
安装完毕,并参考fp官网的rtmp用法, Flowplayer使用 wowza 示例: http://flowplayer./test/issue392.html Wowza官网关于 flowplayer使用rtmp协议播放 视频的示例: http://www./forums/content.php?54 直接播放,在ie876下,能播放,有声音,但是没有图像。 经过搜索,给wowza打了patch包,详见 http://www./forums/showthread.php?14256-No-video-in-RTSP-gt-RTMP-resteam-from-ip-cam 再次播放,可以。 参考fp官网关于rtmp的用法,并设置start参数,播放成功。 详见http://flowplayer./controls-markers
比较有趣的一个东西:flowplayer和jw分别使用start参数,看视频播放处理的不同方式: http://lvis./flowplayer/3.2.9.aspx?player=flowplayer&clip=Topic8&start=40&cb=1340611398536。 没有任何流媒体及视频播放基础,一个人钻牛角尖,无同事可请教,自己硬啃英文网站及文档,苦不堪言。幸亏有热心网友帮忙,指点迷津。 如果文章能对他人有一点帮助,将十分欣慰。仍然有一些遗留问题,有热心高人指点下,不胜感激。
另: 源代码,总结文档,第三方播放下载地址:http://download.csdn.net/detail/qingwangyoucao/4544606 |
|