Spark VideoPlayer control

The VideoPlayer control dispatches several different types of events that you can use to monitor and control playback. The underlying implementation of the VideoPlayer control relies on the org.osmf.media.MediaPlayer class, and its related packages and classes. The event objects associated with each event dispatched by the VideoPlayer control is defined by a class in the org.osmf.events package.

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\videoplayer\VideoPlayerEvent.mxml-->
<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">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
            import org.osmf.events.MediaPlayerStateChangeEvent;
            import org.osmf.events.TimeEvent;

            protected function vpCompleteHandler(event:TimeEvent):void {
                myTA.text = "Video complete - restarting."
            }

            protected function vpMediaPlayerStateChangeHandler(event:MediaPlayerStateChangeEvent):void {
                if (event.state == "loading")
                    myTA.text = "loading ...";
                if (event.state == "playing")
                    myTA.text = "playing ...";
            }

        ]]>
    </fx:Script>
    
    <s:VideoPlayer 
        source="rtmp://fmsexamples.adobe.com/vod/mp4:_cs4promo_1000.f4v"
        width="350" height="250"
        loop="true"
        complete="vpCompleteHandler(event);"
        mediaPlayerStateChange="vpMediaPlayerStateChangeHandler(event);"/>
    <s:TextArea id="myTA" width="350" height="25"/>
</s:Application>
The executing SWF file for the previous example is shown below:

The VideoPlayer control dispatches the complete event when the video completes. The event object for the complete event is of type org.osmf.events.TimeEvent.

The VideoPlayer control dispatches the mediaPlayerStateChange event when the state of the MediaPlayer control changes. The MediaPlayer control has several states, including the buffering, loading, playing, and ready states. The event object for the mediaPlayerStateChange event is of org.osmf.events.MediaPlayerStateChangeEvent. The event handler for the mediaPlayerStateChange event uses the state property of the event object to determine the new state of the MediaPlayer control.

The VideoPlayer component supports playback of local media, streaming media, and progressively downloaded media. You can play back both live and recorded media.

To play back a single media file, use the source attribute. The correct value for the source attribute is the path to the file. Use the correct syntax in the URL: HTTP for progressive download and RTMP for streaming from Flash Media Server. If using Flash Media Server, use the correct prefixes or extensions.

The following code plays a local FLV file, phone.flv, that resides in the assets folder in the same project folder as the SWF file:

<s:VideoPlayer source="assets/phone.flv"/>

The following code plays a single F4V file from Flash Media Server, using the video-on-demand service that Flash Media Server 3.5 and later provides. The use of the MP4 prefix and the F4V file extension are required. The MP4 prefix is always required; the F4V file extension is required when the name of the file to be loaded contains a file extension.

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\videoplayer\VideoPlayerSimple.mxml-->
<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">
     
    <s:VideoPlayer 
        source="rtmp://fmsexamples.adobe.com/vod/mp4:_cs4promo_1000.f4v"
        width="350" height="250"
        loop="true"/>
</s:Application>
The executing SWF file for the previous example is shown below:

To perform multi-bit rate streaming, where Flash Player automatically play the stream with the highest bit rate that the user can view, use a DynamicStreamingVideoSource object. Flash Media 3.5 and later supports multi-bit rate streaming.

The DynamicStreamingVideoSource object contains multiple stream items, each of which represents a video stream encoded at a different bit rate. The following code shows the user of the DynamicStreamingVideoSource object:

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\VideoPlayer\VideoPlayerFMS.mxml -->
<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" >
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <s:VideoPlayer id="myPlayer"
        width="500" height="300">
        <s:source>
            <s:DynamicStreamingVideoSource id="mySVS"
                host="rtmp://fmsexamples.adobe.com/vod/">
                <s:DynamicStreamingVideoItem id="dreamgirl150"
                    streamName="MP4:_PS_dreamgirl_150.f4v"
                    bitrate="150" />
                <s:DynamicStreamingVideoItem id="dreamgirl500"
                    streamName="MP4:_PS_dreamgirl_500.f4v"
                    bitrate="500" />
                <s:DynamicStreamingVideoItem id="dreamgirl1000"
                    streamName="MP4:_PS_dreamgirl_1000.f4v"
                    bitrate="1000" />
            </s:DynamicStreamingVideoSource>
        </s:source>
    </s:VideoPlayer>

    <s:TextArea width="500" height="50"
        text="Please wait while the video loads..."/>
</s:Application>
The executing SWF file for the previous example is shown below:

To play back live video, use a DynamicStreamingVideoSource object and set the streamType attribute to live:

<s:VideoPlayer> 
    <s:DynamicStreamingVideoSource host="rtmp://localhost/live/" streamType="live"/> 
        <s:DynamicStreamingVideoItem streamName="myStream.flv"/> 
    </s:DynamicStreamingVideoSource> 
</s:VideoPlayer>

The VideoPlayer is the client application that plays back video. To capture and stream the live video, you can use a tool like Flash Media Live Encoder, which captures and streams live video to Flash Media Server. If you don’t use Flash Media Live Encoder, you’ll need to create a custom publishing application. For information on creating a custom video capture application, see the Flash Media Server documentation.

The appearance of any video media playing in a VideoPlayer control is affected by the following properties:

• scaleMode

• height

• width

The scaleMode property only works when you set the height or width property. It adjusts the size of the playing media after the control size has been set. Possible values are “none”, “stretch”, “letterbox”, and “zoom”.

If you omit both width and height properties for the control, Flex sizes the control to fit the size of the playing media. If you specify only one property, and set the scaleMode property, the size of the playing media determines the value of the other property. If you do not set the scaleMode property, the media retains its aspect ratio when resizing.

If you explicitly set the width and height properties, be sure the values are appropriate for the size of video that plays.

By default, Flex sizes the VideoPlayer control to the size of the media. If you specify the width or height property of the control, and either is smaller than the media’s dimensions, Flex does not change the size of the component. Instead, Flex sizes the media to fit within the component. If the control’s playback area is smaller than the default size of the media, Flex shrinks the media to fit inside the control.

The sample video used here is larger than the specified component size, but the width and height ratio are still appropriate to the video size. If you were to remove the width and height properties from the code, however, you would see that the VideoPlayer component is automatically sized to the size of the video.