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

我就是我 2022-08-23 13:54 221阅读 0赞

一、方案确定

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

首先查找可行性方案，

[http://www.cnblogs.com/sink\_cup/archive/2011/04/21/html5\_video\_ipad\_firefox\_chrome\_ie9876\_flash.html][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][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_msdn.microsoft.com_zh-cn_magazine_hh781023.aspx]

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

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

[http://camendesign.com/code/video\_for\_everybody][http_camendesign.com_code_video_for_everybody]

Flowplayer提供的降级方案：[http://flowplayer.blacktrash.org/graceful.html][http_flowplayer.blacktrash.org_graceful.html]

二、业务说明

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

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

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

三、html5播放

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

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

[http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/][http_www.inwebson.com_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][http_www.w3school.com.cn_html5_html_5_video.asp]

Html5全局属性：[http://www.w3school.com.cn/html5/html5\_ref\_globalattributes.asp][http_www.w3school.com.cn_html5_html5_ref_globalattributes.asp]

Html5 全局事件属性：[http://www.w3school.com.cn/html5/html5\_ref\_eventattributes.asp][http_www.w3school.com.cn_html5_html5_ref_eventattributes.asp]

针对html5的video标签的详解：[http://www.aspxhome.com/design/css/20106/1415123\_3.htm][http_www.aspxhome.com_design_css_20106_1415123_3.htm]

[http://wiki.whatwg.org/wiki/Video\_type\_parameters][http_wiki.whatwg.org_wiki_Video_type_parameters]

各个浏览器对html5支持程度测试：[www.html5test.com][]

各个浏览器对html5支持程度的图文说明：[http://html5readiness.com/][http_html5readiness.com]

Html5视频播放能否用wowza服务器，

[http://www.wowza.com/forums/showthread.php?7532-HTML5-Support-for-video-playback][http_www.wowza.com_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://flowplayer.org/plugins/flash/controlbar.html][http_flowplayer.org_plugins_flash_controlbar.html]

[http://flowplayer.org/documentation/configuration/clips.html][http_flowplayer.org_documentation_configuration_clips.html]

//菜单插件

[http://flowplayer.org/plugins/flash/menu.html][http_flowplayer.org_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_blog.sina.com.cn_s_blog_6cabf4070100wry7.html]

[http://flowplayer.org/demos/skinning/tooltips.html][http_flowplayer.org_demos_skinning_tooltips.html]

[http://flowplayer.org/documentation/events/][http_flowplayer.org_documentation_events]

[http://releases.flowplayer.org/apidoc-latest/org/flowplayer/model/Clip.html][http_releases.flowplayer.org_apidoc-latest_org_flowplayer_model_Clip.html]

最难的是fp如何设置视频的开始播放时间，在fp官网看到一个关于伪流的东西，[http://flowplayer.org/plugins/streaming/pseudostreaming.html][http_flowplayer.org_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.code-shop.com/trac/wiki/Mod-H264-Streaming-Apache-Version2][http_h264.code-shop.com_trac_wiki_Mod-H264-Streaming-Apache-Version2]

安装完lighttpd，添加h264模块，

[http://www.wenzizone.cn/?p=167][http_www.wenzizone.cn_p_167]

这个过程极其繁琐，耗费大量时间。

此时再使用fp的start参数，或者是seek方法，均不凑效。

后再仔细看流媒体概念，见：

[http://202.192.163.58/internet/page/kch-nr/page\_10\_4.htm][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.wikipedia.org/wiki/Comparison\_of\_streaming\_media\_systems][http_en.wikipedia.org_wiki_Comparison_of_streaming_media_systems]

Wowza 在各种流媒体服务器中，支持较多编码格式，较多终端。

安装wowza，

Wowza安装  [http://sunky045.iteye.com/blog/538288][http_sunky045.iteye.com_blog_538288]

并配置applications,具体见

[http://www.wowza.com/forums/content.php?3-quick-start-guide][http_www.wowza.com_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][http_ip_1935] 如果能访问到，说明wowza安装成功。

安装完毕，并参考fp官网的rtmp用法，

Flowplayer使用 wowza 示例： [http://flowplayer.blacktrash.org/test/issue392.html][http_flowplayer.blacktrash.org_test_issue392.html]

Wowza官网关于 flowplayer使用rtmp协议播放 视频的示例：

[http://www.wowza.com/forums/content.php?54][http_www.wowza.com_forums_content.php_54]

直接播放，在ie876下，能播放，有声音，但是没有图像。 经过搜索，给wowza打了patch包，详见

[http://www.wowza.com/forums/showthread.php?14256-No-video-in-RTSP-gt-RTMP-resteam-from-ip-cam][http_www.wowza.com_forums_showthread.php_14256-No-video-in-RTSP-gt-RTMP-resteam-from-ip-cam]

再次播放，可以。

参考fp官网关于rtmp的用法，并设置start参数，播放成功。

详见[http://flowplayer.electroteque.org/controls-markers][http_flowplayer.electroteque.org_controls-markers]

比较有趣的一个东西：flowplayer和jw分别使用start参数，看视频播放处理的不同方式：

[http://lvis.lavasmith.com/flowplayer/3.2.9.aspx?player=flowplayer&clip=Topic8&start=40&cb=1340611398536][http_lvis.lavasmith.com_flowplayer_3.2.9.aspx_player_flowplayer_clip_Topic8_start_40_cb_1340611398536]。

没有任何流媒体及视频播放基础，一个人钻牛角尖，无同事可请教，自己硬啃英文网站及文档，苦不堪言。幸亏有热心网友帮忙，指点迷津。

如果文章能对他人有一点帮助，将十分欣慰。仍然有一些遗留问题，有热心高人指点下，不胜感激。

[http_www.cnblogs.com_sink_cup_archive_2011_04_21_html5_video_ipad_firefox_chrome_ie9876_flash.html]: http://www.cnblogs.com/sink_cup/archive/2011/04/21/html5_video_ipad_firefox_chrome_ie9876_flash.html
[http_hi.baidu.com_alimyself_item_7f5c003f3397968bb611db07]: http://hi.baidu.com/alimyself/item/7f5c003f3397968bb611db07
[http_msdn.microsoft.com_zh-cn_magazine_hh781023.aspx]: http://msdn.microsoft.com/zh-cn/magazine/hh781023.aspx
[http_www.iefans.net_html5-qianru-shipin]: http://www.iefans.net/html5-qianru-shipin/
[http_camendesign.com_code_video_for_everybody]: http://camendesign.com/code/video_for_everybody
[http_flowplayer.blacktrash.org_graceful.html]: http://flowplayer.blacktrash.org/graceful.html
[http_www.inwebson.com_html5_custom-html5-video-controls-with-jquery]: http://www.inwebson.com/html5/custom-html5-video-controls-with-jquery/
[http_www.w3school.com.cn_html5_html_5_video.asp]: http://www.w3school.com.cn/html5/html_5_video.asp
[http_www.w3school.com.cn_html5_html5_ref_globalattributes.asp]: http://www.w3school.com.cn/html5/html5_ref_globalattributes.asp
[http_www.w3school.com.cn_html5_html5_ref_eventattributes.asp]: http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp
[http_www.aspxhome.com_design_css_20106_1415123_3.htm]: http://www.aspxhome.com/design/css/20106/1415123_3.htm
[http_wiki.whatwg.org_wiki_Video_type_parameters]: http://wiki.whatwg.org/wiki/Video_type_parameters
[www.html5test.com]: http://www.html5test.com/
[http_html5readiness.com]: http://html5readiness.com/
[http_www.wowza.com_forums_showthread.php_7532-HTML5-Support-for-video-playback]: http://www.wowza.com/forums/showthread.php?7532-HTML5-Support-for-video-playback
[http_flowplayer.org_plugins_flash_controlbar.html]: http://flowplayer.org/plugins/flash/controlbar.html
[http_flowplayer.org_documentation_configuration_clips.html]: http://flowplayer.org/documentation/configuration/clips.html
[http_flowplayer.org_plugins_flash_menu.html]: http://flowplayer.org/plugins/flash/menu.html
[http_blog.sina.com.cn_s_blog_6cabf4070100wry7.html]: http://blog.sina.com.cn/s/blog_6cabf4070100wry7.html
[http_flowplayer.org_demos_skinning_tooltips.html]: http://flowplayer.org/demos/skinning/tooltips.html
[http_flowplayer.org_documentation_events]: http://flowplayer.org/documentation/events/
[http_releases.flowplayer.org_apidoc-latest_org_flowplayer_model_Clip.html]: http://releases.flowplayer.org/apidoc-latest/org/flowplayer/model/Clip.html
[http_flowplayer.org_plugins_streaming_pseudostreaming.html]: http://flowplayer.org/plugins/streaming/pseudostreaming.html
[http_h264.code-shop.com_trac_wiki_Mod-H264-Streaming-Apache-Version2]: http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Apache-Version2
[http_www.wenzizone.cn_p_167]: http://www.wenzizone.cn/?p=167
[http_202.192.163.58_internet_page_kch-nr_page_10_4.htm]: http://202.192.163.58/internet/page/kch-nr/page_10_4.htm
[http_en.wikipedia.org_wiki_Comparison_of_streaming_media_systems]: http://en.wikipedia.org/wiki/Comparison_of_streaming_media_systems
[http_sunky045.iteye.com_blog_538288]: http://sunky045.iteye.com/blog/538288
[http_www.wowza.com_forums_content.php_3-quick-start-guide]: http://www.wowza.com/forums/content.php?3-quick-start-guide
[http_ip_1935]: http://ip:1935/
[http_flowplayer.blacktrash.org_test_issue392.html]: http://flowplayer.blacktrash.org/test/issue392.html
[http_www.wowza.com_forums_content.php_54]: http://www.wowza.com/forums/content.php?54
[http_www.wowza.com_forums_showthread.php_14256-No-video-in-RTSP-gt-RTMP-resteam-from-ip-cam]: http://www.wowza.com/forums/showthread.php?14256-No-video-in-RTSP-gt-RTMP-resteam-from-ip-cam
[http_flowplayer.electroteque.org_controls-markers]: http://flowplayer.electroteque.org/controls-markers
[http_lvis.lavasmith.com_flowplayer_3.2.9.aspx_player_flowplayer_clip_Topic8_start_40_cb_1340611398536]: http://lvis.lavasmith.com/flowplayer/3.2.9.aspx?player=flowplayer&clip=Topic8&start=40&cb=1340611398536