VideoDisplay 컨트롤 시작해보기

2009. 11. 19. 19:15

VideoDisplay 컨트롤 시작해보기

2009. 11. 19. 19:15 in 개발/flex

나는 이전에 VideoDisplay 컨트롤로 간단한 예제를 생성해서 플래시 비디오(FLV)가 로딩할때 이벤트 순서의

이해를 돕도록 만들었습니다.

다음 예제는 VideoDisplay 컨트롤을 만들고,

디버깅 DataGrid 안에 각각 FLV의 이벤트 , 비디오 상태 , 플레이헤드 타임 , 총 재생시간을 표시합니다:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" creationComplete="init();">

    <mx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;

            import mx.events.CuePointEvent;

            import mx.events.VideoEvent;

            [Bindable]

            private var arrColl:ArrayCollection;

            [Bindable]

            private var FLV_URL:String = "http://www.helpexamples.com/flash/video/clouds.flv";

            /**

             * Initialize the ArrayCollection object.

             */

            private function init():void {

                arrColl = new ArrayCollection();

            }

            private function doVideoEvent(evt:VideoEvent):void {

                doAddItem({type:evt.type});

            }

            private function doCuePointEvent(evt:CuePointEvent):void {

                doAddItem({type:evt.type});

            }

            private function doProgressEvent(evt:ProgressEvent):void {

                doAddItem({type:evt.type});

            }

            /**

             * Add the item to the ArrayCollection instance, revalidate the DataGrid control, and scroll to the last item in the DataGrid.

             */

            private function doAddItem(obj:Object):void {

                arrColl.addItem({type:obj.type, state:videoDisplay.state, playheadTime:videoDisplay.playheadTime, totalTime:videoDisplay.totalTime});

                dataGrid.validateNow();

                dataGrid.selectedIndex = arrColl.length;

                dataGrid.scrollToIndex(arrColl.length);

            }

        ]]>

    </mx:Script>

    <mx:VideoDisplay id="videoDisplay" source="{FLV_URL}" autoPlay="false" autoRewind="false"

            ready="doVideoEvent(event);"

            rewind="doVideoEvent(event);"

            playheadUpdate="doVideoEvent(event);"

            close="doVideoEvent(event);"

            complete="doVideoEvent(event);"

            progress="doProgressEvent(event);" />

    <mx:HBox>

        <mx:Button label="play()" click="videoDisplay.play();" />

        <mx:Button label="pause()" click="videoDisplay.pause();" />

        <mx:Button label="stop()" click="videoDisplay.stop();" />

    </mx:HBox>

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" width="320" rowCount="5">

        <mx:columns>

            <mx:DataGridColumn id="typeCol" dataField="type" headerText="Evt. type" />

            <mx:DataGridColumn id="stateCol" dataField="state" />

            <mx:DataGridColumn id="playheadTimeCol" dataField="playheadTime" textAlign="right" />

            <mx:DataGridColumn id="totalTimeCol" dataField="totalTime" textAlign="right" />

        </mx:columns>

    </mx:DataGrid>

</mx:Application>