兼容各個瀏覽器的H.264播放： H.264+HTML5+FLOWPLAYER+WOWZA+RMTP

jopen 12年前發布 | 181K 次閱讀 H.264 多媒體處理

一、方案確定

計劃做視頻播放，要求能夠播放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部分，在用video標簽實現了基本播放后，需要控制角色A的播放控制條，禁用進度條。

搜索到一個用jquery和css實現的html5自定義控件：

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

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.aspxhome.com/design/css/20106/1415123_3.htm

http://wiki.whatwg.org/wiki/Video_type_parameters

各個瀏覽器對html5支持程度測試：www.html5test.com

各個瀏覽器對html5支持程度的圖文說明：http://html5readiness.com/

Html5視頻播放能否用wowza服務器，

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/documentation/configuration/clips.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://flowplayer.org/demos/skinning/tooltips.html

http://flowplayer.org/documentation/events/

http://releases.flowplayer.org/apidoc-latest/org/flowplayer/model/Clip.html

最難的是fp如何設置視頻的開始播放時間，在fp官網看到一個關于偽流的東西，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

安裝完lighttpd，添加h264模塊，

http://www.wenzizone.cn/?p=167

這個過程極其繁瑣，耗費大量時間。

此時再使用fp的start參數，或者是seek方法，均不湊效。

后再仔細看流媒體概念，見：

http://202.192.163.58/internet/page/kch-nr/page_10_4.htm

才發現偽流是順序流式下載，“這種方式和傳統的下載方式沒有本質的區別，只是因為客戶端的軟件可以在媒體沒有完全下載就可以播放，它不能跳過頭部，必須先下完前面的才可以看后面的；”。如果需要視頻從一開始就播放還未下載到的部分，那么只能使用實時流式傳播。

是我對fp的偽流控件的說明理解的有問題，還是lighttpd安裝有問題，具體問題出在哪里，現在還不明白。

如果要使用實時流式傳播，就要使用流媒體服務器。鑒于fp有提供一個rtmp的插件，決定用rtmp協議。