Flex : VideoDisplay

VideoDisplay control to play back video files that have been encoded as either Flash Video (FLV) videos or MPEG-4 videos with H.264 encoding. The VideoDisplay control can display both progressive download video and streaming video. A Flex VideoDisplay control can be created with the <mx:VideoDisplay> MXML tag.

The Flex framework comes with only the most basic video controls, which is the video playback control. It doesn’t include a prebuilt video player with play and pause buttons or a volume control. You can easily build your own, simple playback controls, but just be aware that the VideoDisplay control displays only video.

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalAlign="middle"
    horizontalAlign="center"
    backgroundGradientAlphas="[1.0, 1.0]"
    backgroundGradientColors="[#000000, #000000]">

 <mx:Script>
  <![CDATA[

   import mx.events.VideoEvent;

   [Bindable]
   private var videoStatus:String;

   private function callPlayHead(e:VideoEvent):void
   {
    videoStatus = videoDispID.playheadTime + 
                                  " / " + videoDispID.totalTime;
   }
  ]]>
 </mx:Script>

 <mx:VideoDisplay id="videoDispID"
      source="assets/Video Song.flv"
      playheadUpdate="callPlayHead(event);"/>

 <mx:Label text="Status : {videoStatus}"
     color="#4E92A0"
     fontWeight="bold"/>

 <mx:HBox>
  <mx:Button label="Play"
       enabled="{videoDispID.playing == false}"
       click="videoDispID.play();"/>
  <mx:Button label="Pause"
       enabled="{videoDispID.playing == true}"
       click="videoDispID.pause();"/>
  <mx:Button label="Stop"
       enabled="{videoDispID.playing == true}"
       click="videoDispID.stop();"/>
 </mx:HBox>

</mx:Application>