In Flash 10 Adobe have added a component for Flex Gumbo called FxVideoDisplay class, which is an addition to the VideoDisplay component in Flex and the main features is that the new video player component supports skinning, progressive download, multi-bitrate, and streaming of video right out of the box.

The MXML code to create the FxVideoDisplay component looks as follow:

<FxVideoDisplay id="videoDisplay" />

To create a video player you create the component and set the video file like so:

<FxApplication xmlns="http://ns.adobe.com/mxml/2009" minWidth="1024" minHeight="768">

    <FxVideoDisplay id="videoDisplay" source="videofile_H264.mp4" />

</FxApplication>

Once you compile and run the application, you can see the result, below;

As you can see the component includes toolbar for common operations such as pause, stop, mute, fullscreen, volume and seek. The component can be skinned easily using VideoElement. Let’s take a look how you can skin the component:

Create a new Flex project and call it VideoPlayerGumboExample. In the entry point, VideoPlayerGumboExample.mxml paste the following code:

<FxApplication xmlns="http://ns.adobe.com/mxml/2009" minWidth="1024" minHeight="768">
     <Script>
          <![CDATA[
               import components.VideoSkin;
          ]]>
     </Script>

     <FxVideoDisplay skinClass="{components.VideoSkin}"/>

</FxApplication>

Notice that we included the FxVideoDisplay component and we set the skinClass property to point to a class we will create. The VideoSkin class we will be creating includes the VideoElement and the toolbar.

<Skin xmlns="http://ns.adobe.com/mxml/2009" width="400" height="520">

    <Metadata>
         [HostComponent("mx.components.FxVideoDisplay")]
    </Metadata> 

     <VideoElement  id="videoElement" autoPlay="true"
          source="assets/videofile_H264.mp4">
     </VideoElement>

     <HBox x="5" y="485">
          <FxButton id="playButton" skinClass="{PlayButton}" />
          <FxButton id="stopButton" skinClass="{StopButton}" />
     </HBox>

</Skin>

Let’s examine the code. The component we are using is a Skin component, which is common when we create skins for Flex 4 components.

<Skin xmlns="http://ns.adobe.com/mxml/2009" width="400" height="520">

The HostComponent tag point to the component we are skining.

    <Metadata>
         [HostComponent("mx.components.FxVideoDisplay")]
    </Metadata> 

The VideoElement is necessary to skin the FxVideoDisplay component and we point to the video file we are using where the location of the folder is relative to the FxVideoDisplay component that defines the skin, not to the skin.

     <VideoElement  id="videoElement" autoPlay="true"
          source="assets/videofile_H264.mp4">
     </VideoElement>

Next we can define all the sub classes that are being used by the FxVideoDisplay component such as the pause, play, seek and volume as well as the different video states. The way the sub components are mapped is by the id name, each sub component needs to correspond to the expected id. Additionally, notice that each button point to another skin class such as the playButton point to PlayButton skin.

     <HBox x="5" y="485">
          <FxButton id="playButton" skinClass="{PlayButton}" />
          <FxButton id="stopButton" skinClass="{StopButton}" />
     </HBox>

</Skin>

Lastly, take a look at the playButton skin for the FxButton. We can define all the different states and the pixel (graphic). For graphic we used a simple box with border and a text field that holds the text play.

<Skin xmlns="http://ns.adobe.com/mxml/2009"
     xmlns:d="http://ns.adobe.com/fxg/2008/dt"
     xmlns:ai="http://ns.adobe.com/ai/2008">

     <states>
          <State name="up"/>
          <State name="over"/>
          <State name="down"/>
          <State name="disabled"/>
     </states>

     <Metadata>[HostComponent("mx.components.FxButton")]</Metadata>
     <Rect y="1.5" height="27" width="75" x="1.5" d:userLabel="playButton">
          <fill>
               <SolidColor color="0x3d3d3d"/>
          </fill>
          <stroke>
               <SolidColorStroke color="0xa5a7aa"
                    caps="none" joints="miter" miterLimit="4" weight="3"/>
          </stroke>
     </Rect>
     <TextGraphic width="44" height="14"
          fontFamily="Myriad Pro" lineHeight="120%"
          color="0xffffff" whiteSpaceCollapse="preserve"
          kerning="on" x="20" y="10" ai:knockout="0"
          d:userLabel="Play" id="labelElement" text="Play">
          </TextGraphic>
</Skin>

Create the same skin for the stopButton and name the class StopButton. The only difference is going to be the text field text property will be set to Stop.
Once complete you can compile and run and see the result, below:

To view and download the complete example, click here.