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.

6 Responses to Building a HelloWorld app with OSMF

  1. mr_binitie says:

    This is sweet. Many thanks BrianSoldiering on..:)

  2. michael connor says:

    well, i’m very confused.in Flex Builder, i went into the project settings and added MediaFramework.swc to the Library path.I used your HelloWorld script and got errors. I had to add import statements.this works for me:package{import flash.display.Sprite;import org.openvideoplayer.display.MediaPlayerSprite;import org.openvideoplayer.net.*;import org.openvideoplayer.media.*;import org.openvideoplayer.utils.*;import org.openvideoplayer.video.VideoElement;[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”;}}

  3. Brian Riggs says:

    The code snippet in the blog was abbreviated to leave out import statements (I probably should have mentioned that). You can see the actually-functioning code in our SVN repository.

  4. Davi dSalahi says:

    Are there language incompatibilities with FlashBuilder 4? I’m running FB4 beta 2 and I’m unable to compile the first HelloWorld sample code. I’ve created an empty Flex 4 project and pasted in the sample code. I removed the class definition and changed the constructor function to an init() function which is referenced in the Application tag. The addChild statement generates an error at run-time:Error: addChild() is not available in this class. Instead, use addElement() or modify the skin, if you have one.If I replace the call to addChild with addElement it doesn’t compile:1067: Implicit coercion of a value of type org.osmf.display:MediaPlayerSprite to an unrelated type mx.core:IVisualElement.David Salahi

  5. Brian Riggs says:

    The HelloWorld app is a pure AS3 app rather than a Flex app, so you have to do some refactoring to make it a Flex app. Typically this involves wrapping MediaPlayerSprite in a UIComponent, and calling addChild on the UIComponent. The errors you’re getting are specific to Flex 4. I believe that Flex 4 supports the Flex 3 approach, but you have to specify a different application namespace on your root tag. Check the Flex 4 docs for how to use Flex 3 constructs, I’m pretty sure it’s a simple change to your app.