HTTP動態流技術

1 前言

1.1 互聯網視頻播放存在的問題

在當前互聯網環境中,帶寬一直都是一個緊缺資源,隨之而來的問題就是,在網絡上播放視頻的時候,很難作到既流暢又清晰。各大主流視頻網站都會在流暢和清晰之間作一個取捨,可是更多的狀況下會考慮流暢播放多一些,清晰度做爲次重要的指標。html

1.2 HTTP動態流技術

1.2.1 簡介

從不少方面來說,HTTP動態流技術(簡稱HDS)是Adobe公司對蘋果公司的Adaptive Bitrate Streaming技術以及微軟公司的IIS Smooth Streaming技術的一個迴應。這三項技術的共同之處在於它們經過HTTP網絡鏈接傳遞媒體文件以及適應於用戶當前帶寬的媒體文件傳輸的能力。相對於連入以太網的我的電腦而言,Android設備的有效帶寬就顯得尤其不足了。(這項技術的)最終結果是,在各類設備上實現媒體文件的流暢回放,無論這些設備是智能手機仍是臺式計算機。瀏覽器

1.2.2 一個虛擬場景

要更好地瞭解HDS是如何工做的,撇開技術上的內容,只考慮下述的虛擬場景:服務器

ABC Video Services剛剛完成了一個一分鐘短片的製做,它的老闆Pete靈機一動,並無使用錄像帶來承載其錄音內容。Pete說:「咱們何不放棄錄像帶,而是經過一種更爲有效的方式把視頻傳輸給用戶呢?」網絡

工做室的人對這個激進的想法都感到有些驚訝,由於每一個人都知道,「這是咱們一直在使用的方法。」Pete並無接受這個論據,而是給出了下面一個假設:ide

「爲何不把錄像內容切成十個六秒鐘的小片斷,而後順序的把它們傳輸到設備中去播放?」工具

有點保守主義的Sam以爲這真是一個愚蠢的想法,可是Pete是他的老闆,所以他並不想這麼去說。他考慮了一會,想到了一個他認爲能夠把這個想法從根本上扼殺掉的反駁想法。他說:「Pete,這聽起來頗有趣,但不合實際啊。(若是按照你的想法,)客戶將會拿到一堆看起來同樣的錄音條。咱們如何能確保客戶不會弄亂這些錄音條的順序?」網站

「這很簡單」,Pete說,「咱們能夠給客戶一個告訴他們應該在什麼時間播放哪個錄音條的文件。咱們所要作的就是把這個文件和錄音條打包到一塊兒傳輸給客戶。客戶所須要作的就是打開並閱讀說明文件,而後一切都按計劃進行了。」ui

這並非HDS的產生過程,但它捕獲了這項技術的本質。插件

HDS和Pete的想法又有什麼關聯呢?HDS可能就是由你伴隨Flash Media Server (FMS)一同安裝的Apache模塊而來的。在這種狀況下,FMS扮演着打包機的角色,製造內容片段,由Apache經過HTTP傳輸到Flash兼容的視頻播放器。爲了解決Sam所提出的反對意見,與F4M擴展一塊兒,另外的一個清單文件也是經過一樣的一個過程建立出來的。從根本上說,所需視頻文件首先使用F4F擴展軟件切割成若干片斷,做爲片斷文件。清單文件中包含了視頻的一些基本信息,包括每個片斷文件的位置以及其中最爲重要的信息——這些片斷傳輸到用戶設備上的順序。3d

若是這一切都是經過HTTP鏈接流動的,那麼FMS 4.5是如何歸入這個過程的呢?Flash Media Server 4.5包含了兩種類型的實時組件:live和Just-In-Time (JIT)。無論在哪一種狀況下,清單文件和F4F文件都能按照需求建立,並經過HTTP傳輸給客戶來實現回放。例如,若是Sam有一部智能手機,想觀看他剛編輯過的視頻,他要作的就是打開他的手機上的瀏覽器,連接到包含這段視頻的SWF文件的網頁。SWF文件打開時,只須要F4M清單文件來啓動視頻片斷有序的向設備瀏覽器的傳輸。

做爲一個反對者,Sam立刻就看到了這個方案存在的問題。「朋友們,我用的是3G網絡,網速很慢;我沒有大家所使用的以太網鏈接的帶寬。這將會是一個很糟糕的體驗。」

幸運的是,還有Pete。Pete說:「Sam,別激動。這不是問題。這個清單文件會把播放列表附在SWF文件上,它能夠檢測你的鏈接情況,若是你的帶寬較低,在清單文件中查找該帶寬下的最佳視頻文件。咱們稱這個爲‘多比特率流媒體’,你會喜歡上它的。」

既然這樣說了,是時候讓Sam喜歡上它了。

1.2.3 HDS技術的本質

HDS技術本質上有以下兩點:

1. 經過將大的視頻文件分片傳輸到客戶端,供用戶觀看;

2. 將同一個視頻文件轉換爲不一樣的比特率(Multi Bitrates),以適應客戶端的不一樣帶寬。

第一點主要目的是保證視頻可以更流暢播放。第二點更增強大,能夠根據不一樣客戶的網絡帶寬狀況自動選擇不一樣清晰度(視頻的比特率決定其清晰度)的視頻進行播放,這樣能夠爲不一樣網絡環境中的用戶提供儘可能好的體驗效果。

2 使用HDS技術

2.1 Flash Media Server 4.5自帶樣例演示

安裝完FMS4.5以後,FMS自帶了一個HDS演示樣例,在瀏覽器中訪問FMS發佈的URL,若是是本地安裝的話,地址爲:http://localhost。

將會出現下面的頁面:

clip_p_w_picpath002

點擊右側的HDS Multiple Bitrate按鈕就能夠體驗不一樣網速狀況下,播放不一樣比特率視頻的樣例了:

clip_p_w_picpath004

在視頻左上角能夠查看實時的幀率:

clip_p_w_picpath006

在視頻左下角能夠查看實時的緩衝區大小和比特率大小:

clip_p_w_picpath008

2.2 上面的樣例是如何工做的

2.2.1 服務端如何工做

經過查看首頁index.html的源碼,能夠看到這個播放多比特率的按鈕實際上播放的/vod/hds_sample1_manifest.f4m文件。前面有提到說f4m文件是視頻播放的清單文件,F4M擴展插件會告知FMS你須要這個媒體流的清單文件。

查看vod/hds_sample1_manifest.f4m文件內容以下:

clip_p_w_picpath010

這裏用到的語法很簡單,<media>標籤只是包含了須要裝載的文件的文件名以及決定裝載哪個視頻文件的比特速率。

而後在vod目錄下保存這些不一樣比特率(轉碼可用ffmpeg工具)的文件:

clip_p_w_picpath012

2.2.2 客戶端如何工做

客戶端須要有一個可以解析這個f4m文件的播放器,FMS自帶了一個播放器swfs/StrobeMediaPlayback.swf,在HTML中嵌入這個播放器並加上以前的f4m文件路徑,就能夠實現這個功能。

2.3 開發本身的視頻播放頁面

2.3.1 服務端

在服務器端,仍然像前述的那樣,對同一個視頻轉換成不一樣比特率,而後編寫f4m文件,並保存到vod目錄下,文件格式能夠從樣例中參考修改。

另外,還有一種圖形界面方式來配置這個文件,打開Flash Media Server 4.5\tools\f4mconfig\configurator下面的f4mconfig.html:

clip_p_w_picpath014

2.3.2 客戶端播放器

FMS還提供了一個播放器樣例頁面,打開Flash Media Server 4.五、videoPlayer、videoplayer.html:

clip_p_w_picpath016

clip_p_w_picpath018

在STREAM URL處輸入f4m文件路徑,一樣能夠播放多比特率的視頻。

將這個頁面最下面的代碼拷貝到HTML文件中,而且修改其中的src段的視頻地址(此處既能夠是多比特率的f4m文件地址,又能夠是單比特率的普通視頻文件地址):

clip_p_w_picpath020

而後,就可使用這個播放器播放視頻了:

clip_p_w_picpath022

3 參考資料

1. http://www.adobe.com/cn/devnet/flashmediaserver/articles/beginning-fms45-pt01.html

2. http://www.adobe.com/cn/devnet/flashmediaserver/articles/beginning-fms45-pt02.html

3. http://www.adobe.com/cn/devnet/flashmediaserver/articles/beginning-fms45-pt05.html

4. http://www.adobe.com/cn/devnet/flashmediaserver/articles/beginning-fms45-pt06.html

5. http://help.adobe.com/en_US/flashmediaserver/devguide/WSd391de4d9c7bd609-52e437a812a3725dfa0-8000.html

6. http://www.adobe.com/cn/devnet/flash/articles/reops_pt3.html

7. http://www.adobe.com/cn/devnet/flash/articles/reops_pt2.html

相關文章
相關標籤/搜索