AdvancED Flex 4

FACILITATING AUDIO AND VIDEO

497

• Reference plug-ins declare the range of media they’d like to reference. An example might be

a plug-in that creates an overlay ad SWF that can pause the main video when displayed.

For info about creating plug-ins, check ASDOC PluginInfo:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/org/osmf/media/

PluginInfo.html

Metadata: There are two types of metadata: Resource-level and MediaElement.

Resource-level metadata was created to address the challenge of figuring out what, for example,

“http://example.com/myvideo” represents. The MediaResourceBase.addMetadataValue method can be

used to further qualify a resource with “static” data (e.g., MIME type). For instance, we can assign the

“video/x-flv” MIME type to a resource with a URL so we can know it’s a video.

MediaElement metadata was created to address the challenge of representing custom information about

what’s playing. The MediaElement.addMetadata method can be used to model metadata during

playback.

For instance, let’s say we have dynamically generated “ad” rather than “episode” metadata. We want to be

able to know that so we can have the UI update the chrome during ad breaks.

The OSMF code is available at www.osmf.org. To read more see the resources listed in this page:

http://forums.adobe.com/message/2392184#2392184

Hello World Example

Let’s take a look at a simple implementation of the framework provided by Adobe. We created this

example using OSMF build 0.9. The example creates a video player that plays a video using progressive

download as an ActionSctipt 3.0 project:

package

{

import flash.display.Sprite;

import org.osmf.display.MediaPlayerSprite;

import org.osmf.media.URLResource;

import org.osmf.net.NetLoader;

import org.osmf.utils.URL;

import org.osmf.video.VideoElement;

/**

* The simplest OSMF application possible.

*

* The metadata sets the SWF size to match that of the video.

**/

[SWF(width="640", height="352")]

public class OSMFHelloWorld extends Sprite

{

public function OSMFHelloWorld()

{

// Create the Sprite class that holds our MediaPlayer.

var sprite:MediaPlayerSprite = new MediaPlayerSprite();

addChild(sprite);

CHAPTER 14

498

// Set the MediaElement on the MediaPlayer. Because

// autoPlay defaults to true, playback begins immediately.

sprite.mediaElement = new VideoElement

( new NetLoader

, new URLResource(new URL(REMOTE_PROGRESSIVE))

);

}

private static const REMOTE_PROGRESSIVE:String

= "http://mediapm.edgesuite.net/OSMF/content/test/AFaerysTale_sylviaApostol

_640_500_short.flv";

}

}

Our next (minimalist) example loads an image using Flex 4. We create a sprite that contains a

MediaPlayer to manage the display and control of the MediaElements we’ll be using. We then create

and set the MediaElement (in our case ImageElement) with a resource and path. Lastly, we add the

sprite to the UIComponent.

<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"

minWidth="1024" minHeight="768"

creationComplete="creationCompleteHandler()">

<fx:Script>

<![CDATA[

import org.osmf.elements.ImageElement;

import org.osmf.elements.VideoElement;

import org.osmf.media.MediaPlayerSprite;

import org.osmf.media.URLResource;

//path of media to be displayed: Image

private static const MEDIA_PATH:String =

"http://mediapm.edgesuite.net/strobe/content/test/train.jpg";

protected function creationCompleteHandler():void

{

//sprite that contains a MediaPlayer to manage display and control of

MediaElements

var playerSprite:MediaPlayerSprite = new MediaPlayerSprite();

//creates and sets the MediaElement (ImageElement) with a resource and

path

playerSprite.media = new ImageElement( new URLResource( MEDIA_PATH )

);

//Adds the sprite to the UIComponent defined in MXML

mediaHolder.addChild( playerSprite );

}

]]>

</fx:Script>

FACILITATING AUDIO AND VIDEO

499

<mx:UIComponent id="mediaHolder" />

</s:Application>

Here’s another minimalist example that creates a progressive download video player using OSMF and

Flex 4. Just as in the image example, we create a sprite that contains a MediaPlayer to manage the

display and control of the MediaElements we will be using. We then create and set the MediaElement (in

our case VideoElement) with a resource and path. Lastly, we add the sprite to the UIComponent.

<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"

minWidth="955" minHeight="600"

creationComplete="creationCompleteHandler()">

<fx:Script>

<![CDATA[

import mx.core.UIComponent;

import org.osmf.elements.VideoElement;

import org.osmf.media.MediaPlayerSprite;

import org.osmf.media.URLResource;

//path of media to be displayed: Progressive Video

private static const MEDIA_PATH:String =

"http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv";

protected function creationCompleteHandler():void

{

//sprite that contains a MediaPlayer to manage display and control of

MediaElements

var playerSprite:MediaPlayerSprite = new MediaPlayerSprite();

//creates and sets the MediaElement (VideoElement) with a resource and

path

playerSprite.media = new VideoElement( new URLResource( MEDIA_PATH )

);

//Adds the sprite to the UIComponent defined in MXML

var component:UIComponent = new UIComponent();

component.addChild( playerSprite );

mediaHolder.addElement( component );

}

]]>

</fx:Script>

<s:Group id="mediaHolder" />

</s:Application>

If we want to serve an audio file via progressive download, we can just use AudioElement instead of

VideoElement.