Spark VideoPlayer and VideoDisplay controls

The underlying implementation of the Spark VideoDisplay and VideoPlayer classes rely on the Open Source Media Framework (OSMF) classes.

You can use the OSMF classes to extend the VideoPlayer and VideoDisplay classes. For example, you can use OSMF to incorporate advertising, reporting, cue points, and DVR functionality.

You can also use OSMF classes to implement your own player. For an example of this, see OSMF + Flex Example.

For more information about OSMF, see Open Source Media Framework

The VideoPlayer control dispatches several different types of events that you can use to monitor and control playback. 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 control changes. The 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 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:

The Spark VideoPlayer and VideoDisplay components support dynamic streaming (also known as multi-bitrate streaming or adaptive streaming) for on-demand and live content. To use dynamic streaming, you encode a stream at several different bit rates. During playback, Flash Player dynamically switches among the streams based on connection quality and other metrics to provide the best experience.

Live HTTP Dynamic Streaming requires Flash Media Server. On-demand HTTP Dynamic Streaming requires an Apache HTTP Server Origin Module and a File Packager tool. These tools are available as free downloads from http://www.adobe.com/products/httpdynamicstreaming/.

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.

The Spark VideoDisplay control is the same as the Spark VideoPlayer control, except that it does not have a UI associated with it. You must manually create controls that perform functions such as play, stop, and pause.

<?xml version="1.0"?>
<!-- controls\videodisplay\SparkVideoDisplayStopPlay.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" 
    creationComplete="myVid.pause();">
    <s:VGroup>
        <s:VideoDisplay id="myVid" 
            source="../assets/MyVideo.flv"
            height="250" 
            width="250"
        />
        <s:HGroup>
            <s:Button label="||" click="myVid.pause();"/>
            <s:Button label="&gt;" click="myVid.play();"/>         
        </s:HGroup>
    </s:VGroup>
</s:Application>
The executing SWF file for the previous example is shown below: