Archive for September, 2009

OSMF 0.5 Survey

Now that you’ve had some time to check out the latest OSMF release (0.5), we’d really appreciate your participation in a short survey to help us gauge our progress. We take your feedback seriously and use it to help direct decisions around features and process. We want to hear from you!
OSMF 0.5 Survey

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.

OSMF v0.5 released

We’re excited to announce the release of the latest OSMF milestone, version 0.5.  This is definitely the most feature-rich release yet, and contains a number of core building blocks for creating media experiences in AS3.  Here are the highlights:

  • Dynamic streaming support, via the new DynamicStreamingResource class.
  • SWF support, via the new SWFElement and SWFLoader classes.
  • Advanced metadata support, via integration of the Metadata class with MediaElement to enable dynamic metadata.
  • Layout API, enabling the positioning of visual media in relation to each other through metadata.
  • Advanced plugin support, including plugins controlling the player (or other plugins).
  • Progressive audio support, via the new SoundLoader class.

We’ve also included a number of sample applications to demonstrate these (and other features).  Here’s a sample app that shows the wide range of media experiences that OSMF is capable of presenting.  Each item in the list on the left is a MediaElement, but each one represents a completely different type or manner of presenting media.  (You can see the source for these MediaElements here.)

Last, we have one significant development process announcement to make, namely that all daily development for OSMF is now taking place in the public SVN repository.  If you want to see the new features in their rawest form, just sync to the public trunk or subscribe to our commit notifications feed.  (If you just want a stable build, look for the most recent stable tag, e.g. “tags/sprint5-stable”.)

Links: