Building a HelloWorld app with OSMF

Want to see the simplest possible application you can build with OSMF?  Here is a “HelloWorld” application, which auto-plays a single video:

[SWF(width="640", height="352")]
public class HelloWorld extends Sprite { public function HelloWorld() { var sprite:MediaPlayerSprite = new MediaPlayerSprite(); addChild(sprite); sprite.element = new VideoElement ( new NetLoader , new URLResource(new URL(REMOTE_PROGRESSIVE)) ); } private static const REMOTE_PROGRESSIVE:String = "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"; }

Just three lines of code!  The first line creates an instance of the Sprite class which wraps up the MediaPlayer class.  The MediaPlayer class is the client class for playing back any type of media.  Once we’ve added the MediaPlayerSprite as a child of the root Sprite, we assign a VideoElement to the MediaPlayerSprite.element property.  Because MediaPlayer’s autoPlay property defaults to true, the video begins to play back immediately.

You can see the HelloWorld application in action here.  If you run it, you’ll notice that the video appears in the upper left corner of the browser window.  Suppose you wanted to center it, and have the SWF take up all available space?  Here’s a second iteration on HelloWorld (changes in bold):

public class HelloWorld2 extends Sprite
{
public function HelloWorld2()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

var sprite:MediaPlayerSprite = new MediaPlayerSprite();
addChild(sprite);

// Set the Sprite's size to match that of the stage, and
// prevent the content from being scaled.
sprite.width = stage.stageWidth;
sprite.height = stage.stageHeight;
sprite.scaleMode = ScaleMode.NONE;

sprite.element = new VideoElement
( new NetLoader
, new URLResource(new URL(REMOTE_PROGRESSIVE))
);
}

private static const REMOTE_PROGRESSIVE:String
= "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv";
}

In the first two lines, we set the Stage’s scaleMode and alignment so that the SWF takes up all available space.  In the next set of new lines, we set the width and height of the MediaPlayerSprite to match that of the stage, and then tell the MediaPlayerSprite not to scale the content.  This has the effect of placing the video directly in the middle of the window.

You can see HelloWorld2 in action here.
 
And now, one last example.  Suppose you wanted to play a sequence of media rather than a single video.  Instead of creating a VideoElement, you could create a SerialElement whose children represent the sequence of media to play:

var serialElement:SerialElement = new SerialElement();

// First child is a progressive video.
serialElement.addChild
( new VideoElement
( new NetLoader
, new URLResource(new URL(REMOTE_PROGRESSIVE))
)
);

// Second child is a SWF that shows for three seconds.
serialElement.addChild
( new TemporalProxyElement
( 3
, new SWFElement
( new SWFLoader()
, new URLResource(new URL(REMOTE_SWF))
)
)
);

// Third child is a progressive video.
serialElement.addChild
( new VideoElement
( new NetLoader
, new URLResource(new URL(REMOTE_STREAM))
)
);


sprite.element = serialElement;

You can see the third iteration of HelloWorld here.  After the first (30 second) video completes, you’ll see an orange box appear for 3 seconds, followed by another 30 second video.

Hopefully these examples shed some light on how to get started with OSMF.  The complete source code and Flex Builder project files for all three variations are checked into the OSMF public repository.