Use Button to control VideoDisplay
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
import mx.collections.ArrayCollection;
import mx.events.CuePointEvent;
import mx.events.VideoEvent;
[Bindable]
private var arrColl:ArrayCollection = 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});
}
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="http://server.com/a.flv"
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>
Related examples in the same category
