利用FLEX開發視頻播放器可以利用自帶的組件VideoDisplay，也可以不用，最終兩種方式開發出來的效果是可以一樣的。
視頻播放器這個做開發的兄弟們應該都熟悉，現在的視聽網站這么火熱，流媒體技術也相當成熟，網上的介紹也很多。不過基本上流媒體播放器都是flash，大多是寫AactionScript腳本開發，利用FLEX開發也比較方便，和VS.NET的開發環境一樣，看起來也熟悉，開發起來也有感覺些，我想至少應該比寫AS腳本要有感覺些，當然FLEX開發的應用程序最終也會被解析成AS腳本，生成SWF文件，供WEB頁面嵌入調用。

最近稍微空閑那么一點，從同事那拷了個FLEX4.0，裝上感覺下，之前也有意想做個流媒體播放器，正好這段時間有研究下。嚴格來說單純的播放器不會難做，網上也有很多例子，只是流媒體播放器只支持流格式的媒體文件，所有這里還有個媒體格式轉換的問題，就是要把不同類型的視頻格式轉換成流格式的文件，即轉換成視頻流格式。我寫的這篇暫時只說說流媒體播放器的開發，不涉及轉換的問題，這個有時間研究下再說說。 我下面說的主要是不利用組件的開發方式，利用組件開發的后面我也貼下代碼片段和截圖。主要以開發完后的開發文檔內容來說下，寫的內容不多，基本上要點應該還是寫清楚了，先看下目錄，按目錄順序講解：                                                                 

1  流媒體視頻簡介

1.1   什么是流媒體

所謂流媒體是指采用流式傳輸方式在Internet上播放的媒體格式(擴展名一般為.flv，目前 Adobe公司為迎接高清時代又推出了.f4v格式)。流媒體又稱流式媒體，是指用一個視頻傳輸服務器把把節目當成數據包發出，傳送到網絡上，同過流媒體播放器進行畫面還原顯示給用戶觀看。

1.2  什么是視頻流

視頻流（Video Streaming）是指視頻數據的傳輸，例如，它能夠被作為一個穩定的和連續的流通過網絡處理。因為流動，客戶機瀏覽器或插件能夠在整個文件被傳輸完成前顯示多媒體數據。視頻流技術基于 2 密鑰技術，視頻譯碼技術和可升級的視頻分發技術發展。

1.3  流媒體視頻的優點

    流媒體視頻是邊下載邊播放邊緩沖的，用戶體驗相比傳統的下載播放好得多，傳統的下載播放是用戶等視頻文件全部下載到緩存后再進行播放，用戶等待時間比較長，因此與單純的下載播放方式相比，這種對多媒體文件邊下載邊播放的流式傳輸方式不僅使啟動延時大幅度地縮短，而且對系統緩存容量的需求也大大降低。

1.4  流媒體視頻應用

由于流媒體格式的數據傳輸速度快，因此被廣泛應用于互聯網上的大型視頻點播網站，比較典型的視頻點播網站又56視頻網，優酷視頻網、土豆視頻網等。同時這種技術也可以用于在線視頻教學系統進行點播學習或公司內部會議視頻在線提供觀看等。

補充說明下那個高清格式的.f4v，因為測試的時候從土豆上拉了個高清格式的視頻文件下來，發現后綴是.f4v的，利用開發的這個播放器播放不了，后綴名改成flv是可以播放的，覺得奇怪，都是流格式應該是可以播放的才對，原來忘了在網站的http頭文件的MIME類型添加擴展名,添加下.f4v的擴展名就OK了，可以正常播放了，后來也看了下百度百科對這種高清格式是這么說的：

    作為一種更小更清晰，更利于在網絡傳播的格式，F4V已經逐漸取代了傳統FLV，也已經被大多數主流播放器兼容播放，而不需要通過轉換等復雜的方式。

　　F4V是Adobe公司為了迎接高清時代而推出繼FLV格式后的支持H.264的F4V流媒體格式。

　　它和FLV主要的區別在于，FLV格式采用的是H263編碼，而F4V則支持H.264編碼的高清晰視頻，碼率最高可達50Mbps。

 

2  功能概述

2.1         設計目的

       作為系統平臺功能的擴充，開發此模塊，現實一個功能相對全面的流媒體播放器，主要用于播放流媒體格式的視頻，提供給特殊要求的客戶用于外網在線播放新聞視頻。

2.2         功能說明

1）  視頻的暫停、播放

2）  視頻拖動播放和定點播放

3）  音量的禁音和開啟

4）  拖動滑塊控制音量

5）  視頻緩沖進度高亮顯示

6）  視頻全屏處理，點擊按鈕或點擊視頻畫面實現全屏

2.3         運行環境

此模塊采用Flex4.0開發，要求客戶端安裝flash 10.0.0 （含以上版本）

 

 

 3 功能設計

 

  

3.1         相關變量屬性

private var isPause:Boolean = false;        //暫停狀態 

private var isSound:Boolean = true;         //聲音狀態（是否禁音） 

        private var _volume :Number = 0.6;          //默認音量大小(最大值為1)

    private var isFullScreen:Boolean = false;   //是否是全屏   

              private var totalTime:Number;              //播放總時間

        private var playPosition:Number;            //剪輯位置

        private var videoUrl:String;              //視頻文件地址

        private var videoWidth:Number;            //視頻寬度

    private var videoHeight:Number;           //視頻高度  

        private var isAutoPlay:Boolean = true;     //是否自動播放          

                         

3.2         初始化視頻畫布    

    點開視頻播放頁面后首先初始化視頻播放的畫面，根據接收的用戶參數初始化視頻畫面的大小。

  對象定義：

            import mx.events.SliderEvent; //滑塊事件命名空間引用

 

            private var nc:NetConnection; //媒體連接對象

            private var ns:NetStream;     //網絡流對象

            private var metaDataObj:Object = {}; //媒體的元數據信息

            private var video:Video ;          //視頻對象

 

 初始化方法如下：

private function init():void

            {    

                videoUrl = parameters.videoUrl;

                videoWidth = parameters.videoWidth;

                videoHeight = parameters.videoHeight                                           

                video = new Video(videoWidth,videoHeight);

video.smoothing = true;//畫面平滑處理，去掉全屏后的水紋以提高畫面清晰度

                uic.addChild(video); //將視頻對象添加到頁面         

            }

3.3         加載視頻流并播放

  當視頻初始化完成后調用視頻播放方法，將方法置于應用程序事件頭里面。

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" initialize="init()" creationComplete="startVideo()"  >

 

 private function startVideo():void

            {

               

                nc = new NetConnection();

                nc.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);  //添加播放連接監聽事件

                nc.connect(null);

               

            }

當連接對象成功連接后，播放視頻，上面的nc.connect(null);表示如果未使用 Flash Media Server,可使用null作為參數以便從本地文件系統或 Web 服務器中播放視頻和 MP3 文件。

                 

private function netStatusHandler(e:NetStatusEvent):void

            {

                ns = new NetStream(nc);

                metaDataObj.onMetaData = this.onMetaData;

                ns.client = metaDataObj;

                video.attachNetStream(ns);

                //ns.bufferTime = 5;

                ns.play(videoUrl);

                soundProcess.value = _volume;

                soundTrans.volume = _volume

                ns.soundTransform = soundTrans;

                this.addEventListener(Event.ENTER_FRAME,EnterFrameHandler); //添加播放過程中的監聽事件

                ns.addEventListener(NetStatusEvent.NET_STATUS,NetStreamStatusHandler);//添加播放完畢(或其它狀態)后的監聽事件

               

                if(!isAutoPlay) //客戶端沒有設置為自動播放時的處理

                {

                    ns.pause();

                    btnPlay.source = playClass; 

                    isPause = true;

                }

                else

                {

                    btnPlay.source = pauseClass; 

                    isPause = false;

                }

            }

//獲取視頻的元數據信息，這里的元數據信息包括視頻編碼，視頻碼率，音頻編碼，音頻碼率，音視頻文件大小，流文件總大小，播放總時間等

            private function onMetaData(obj:Object):void

            {

                totalTime = obj.duration;

                fileSize = (obj.filesize/(1024*1024)).toFixed(2).toString()+"MB";//換算成兆字節并保留兩位小數

            }

說明：

 this.addEventListener(Event.ENTER_FRAME,EnterFrameHandler);用于監聽播放過程中的事件處理，由于在播放過程中，播放進度和緩沖進度要實時顯示以及播放到哪一個時間點了也都需要動態實時呈現給用戶，因此視頻進入加載畫面時就需要實時不斷監控該事件。

  ns.addEventListener(NetStatusEvent.NET_STATUS,NetStreamStatusHandler);用于監聽在視頻流播放完畢后的事件處理。

  onMetaData是一個回調方法，當客戶端加載到視頻流時，通過異步獲取該媒體的元數據信息，如媒體總大小、總的播放時間、采樣率等等。

3.4         播放進度及緩沖進度高亮顯示

   

//播放進度和緩沖進度處理

            private function EnterFrameHandler(e:Event):void

            { 

               

                if (totalTime>0)

                { 

                    playTime = ns.time;// ns.time為流媒體實時播放的時間

                }

               

                if (ns.bytesLoaded>0)

                { 

                    bufferRect.width = ns.bytesLoaded / ns.bytesTotal*(playProcess.width-10);//計算緩沖方框的寬度(滑塊本身也有一定的寬度,減去約10個像素寬度)

                }              

               

            }  

  說明：

   playTime作為播放進度條當前實時播放的時間點，視頻的總時間作為播放顯示進度條的最大值。

    <mx:HSlider id="playProcess"minimum="0" value="{playTime}" maximum="{totalTime}" 

   ns.bytesLoaded為已緩沖好的流媒體字節大?。▎挝粸閎yte），ns.bytesTotal為流媒體的總大小，通過比例計算（如上）可以得出緩沖進度在播放進度條上的位置，緩沖進度條其實是一個長方形框，以層的形式位于播放進度條下放，初始寬度為0,當緩沖達到100%時，即緩沖完畢時，緩沖條的長度和播放進度條等長（除去滑塊寬度）。緩沖方框可以是一個BorderContainer，如下：

    <s:BorderContainer x="14" y="411" width="0" height="4" id="bufferRect" buttonMode="true" borderColor="#70b2ee" backgroundColor="#70b2ee">

    </s:BorderContainer>    

    頁面所有的控件和標簽如下：

  

代碼

 

                       

3.5         視頻的播放與暫停

        視頻的暫停與播放調用視頻流的pause()方法和resume()方法，通過是否暫停的狀態變量判斷控制，代碼片段如下：

//播放、暫停設置

            private function play():void

            {

                if(isPause)

                {

                    ns.resume();

            btnPlay.source = pauseClass; //設置按鈕圖標為點擊暫停圖標

                    isPause = false;

                   

                }

                else

                {

                    ns.pause();

                    btnPlay.source = playClass; //設置按鈕圖標為點擊播放圖標

                    isPause = true;

                }

            }

3.6         拖動滑塊播放視頻   

      拖動滑塊播放視頻文件，主要是判斷和記錄流的剪輯位置，找到最終的剪輯位置后可以調用視頻流的seek(參數)方法，參數為當前的剪輯位置，如果不拖動直接點擊任意剪輯位置定點播放，那么最終的剪輯位置應該是鼠標彈起的位置，這里定點點擊實際上還是相當于觸發了滑塊移動的事件，只不過是滑塊快速移動到你點擊的位置而已，相關代碼片段如下：

  //拖動進度條時改變播放位置 

            private function play_onchange(event:SliderEvent):void

            { 

                if(ns.time == 0)

                { 

                    playProcess.value = 0; 

                    return; 

                } 

                playPosition = playProcess.value;             //保正播放進度統一 

                ns.seek(playPosition);

            } 

           

            //進度條鼠標按下 

            private function thumbPress():void

            { 

                ns.pause(); 

            } 

            //進度條鼠標彈起,指拖動時滑塊時鼠標彈起 

            private function thumbRelease():void

            { 

                //ns.seek(playPosition);

                 btnPlay.source = pauseClass; 

                isPause = false;

                ns.resume();

            } 

3.7         播放結束處理

      一般視頻播放完畢后，播放的指針頭歸零，即播放進度條上的滑塊指向起始位置，同時播放按鈕狀態為準備就緒狀態，視頻流處于暫停狀態?？梢酝ㄟ^視頻流的當前狀態信息進行判斷，如下面e.info.code狀態值可以獲得各種不同的狀態，這里只取播放完畢停止后的狀態值，代碼片段如下：

       //播放完畢處理

            private function NetStreamStatusHandler(e:NetStatusEvent):void

            {

                if(e.info.code == "NetStream.Play.Stop")

                {

                    ns.seek(0);

                    btnPlay.source = playClass; 

                    isPause = true;

                    ns.pause();

                }

            }

3.8         音量大小控制

      視頻聲音控制通過SoundTransform 類操作，該類包含音量和平移的屬性。如果禁音后運行調節滑塊的話，需要再定義一個臨時變量tmpSound，以便開啟聲音時為最終設置的音量。

             //靜音、開音控制

            private function closeSound():void

            { 

                if(isSound)

                {

                    soundImg.source = sound; 

                    tmpSound= ns.soundTransform;

                    soundTrans.volume = 0;

                    ns.soundTransform = soundTrans; // 這里禁音直接ns.soundTransform.volume = 0 這樣不行，需要用對象賦值

                    isSound = false; 

                }else

                { 

                    soundImg.source = sound1; 

                    ns.soundTransform = tmpSound; 

                    isSound = true; 

                } 

            }

               

          //通過滑塊調整聲音 

            private function sound_thumbChanges(event:SliderEvent):void

            { 

                tmpSound.volume = soundProcess.value;

                ns.soundTransform = tmpSound; 

            } 

3.9         全屏控制

      全屏可以用flash畫布舞臺的stage屬性值設置，不過要考慮下普通屏幕和寬屏的處理, 常見的顯示器分辨率按其長寬比可分為為：4：3（1024×768）、5：4（1280×1024）、16：9、16：10 (這里暫以寬屏測試的，需要后續處理)，點擊全屏按鈕或點擊視頻畫面都可以全屏，調用display()方法即可，代碼片段如下：

  //切換全屏顯示 

            private function display():void

            { 

                if(!isFullScreen)

                { 

                    stage.fullScreenSourceRect = new Rectangle(video.x, video.y,video.width,video.height);

                    stage.displayState =StageDisplayState.FULL_SCREEN; 

                    isFullScreen = true; 

                }else

                { 

                    stage.displayState = StageDisplayState.NORMAL; 

                    isFullScreen = false; 

                }

               

            }

 

3.10    流數據字符格式化

視頻播放時當前時間和總時間是以秒為單位的，比如180s的文件，當前播放到一半顯示90s，需要按時間格式來顯示才友好，另外還有音量的值是介于0到1之間的某個值，也需要按百分比來顯示。代碼片段如下：

 //格式化時間 

            private function formatTime(time:Number):String

            { 

                var min:Number = Math.floor(time/60); 

                var sec:Number = Math.floor(time%60); 

                var timeResult:String = (min < 10 ? "0"+min.toString() : min.toString()) + ":" + (sec == 10 ? "0"+sec.toString() : sec.toString()); 

                return timeResult; 

            } 

//聲音slider格式化 

            private function SoundTipFormat(data:Number):String

            { 

                return  (data*100).toFixed(0).toString()+"%"; //拖動聲音進度條時顯示百分比音量

            }

           

3.11    視頻畫面平滑優化處理

一般視頻畫布全屏后，會產生文字圖像有些失真的感覺，會產生水紋，對于這點的處理，Flex封裝了一個簡單有效的方法，只需設置一個屬性即可，即video對象中有一個屬性設置。如下：

video.smoothing = true;             

把該屬性設置為true，表是啟用畫面優化處理，加上這個設置能大大提高畫面質量 。

3.12    播放接口調用

采用FLEX開放的播放器編譯后最終生成的是一個.swf文件，需要通過頁面去加載調用，可以是靜態的html頁面，也可以是動態的aspx頁面，調用過程中引用Flex內置的一個JS文件——swfobject.js，

其中flashContent標簽作為嵌入的swf播放器文件（FLVPlayer.swf）的容器，同時網站的http頭進行如下設置（添加.flv和.f4v擴展名）：

 下面貼幾張播放的效果圖：

讓美工美化下，做一個像目前視頻網類似效果的播放器還是相當簡單的。

利用VideoDisplay組件開發的我貼下完整的代碼片段，這里和上面對比少了緩沖進度的效果，另外沒有畫面優化的效果出來，如果要加這兩個效果的話，要向上面那樣定義連接，輸入流對象，然后讓這個組件加載實例化的video對象就可以了，代碼如下：

效果圖如下：

可以對比下平滑處理過的效果，明顯文字更清晰些，尤其在全屏后效果更明顯，平滑處理后基本不會有畫面失真的現象。

說明：采用的是FLEX4.0開發的，其實里面的標簽有還是3.0的，直接參考了網上的一些例子，也都是兼容的，就沒改了。

原本我也想放個可以運行的demo上來，發現編譯發布后還帶有好幾個swf的類庫文件，沒有的話播放不了，都是flex4.0的發布文件必須要的，想發布后打包成一個單獨的swf文件，也沒有找到合適的方法，也就沒有進一步處理了，如果大家有興趣想玩下或研究下，可以裝個FLEX4.0版本的，新建一個應用程序，安照上面的步驟做個可以播放流媒體視頻的播放器是沒問題的。