Open Source Media Framework (OSMF) is an interesting product released from Adobe that allows content providers and developers to easly create rich media players in ActionScript 3.0, also providing a lot of tools to create web-based video monetization applications.

In other words, you can easly create and customize Flash video players, deliver and protect your content (low-res or HD in a lot of different formats and ways), to manage advertising and a many other interesting stuff.

Honestly until now I never used this framework but in few minutes I got my first OSMF Video Player built in Flash CS5.5, Flex 4.5 and AIR for Android, so I want to share with you what I did.

Here the final result (note the good performance on my old Nexus One):

Get the latest Flash Player to see this player.

-
GETTING STARTED: OMFS and ADOBE FLASH CS 5.x

The first step was to read the “Getting Started with OSMF for developers” page where you can find a lot of interesting and well documented source code samples for Flash CS 4/5.
Download the OSMF_ReleaseSamples.zip file (the file name may change in future, so always check the OSMF website to get the last release)

The zip file should contain a flash template (.fla) and a lot of document classes (.as).
Compiling these samples in Adobe Flash CS 5.* and reading the documentation you will get an overview of the OSMF features and you will be able to create your first OSMF video player in few minutes.
You will understand how to create a video player, display a controlbar, customize the player UI, display multiple videos at the same time, managing advertising, and a lot of other interesting stuff.

Naturally the framework is not so simple but it can be a good start.
You can follow the excellent guidelines and you should not have problems for a basic usage.

Now, since I also use Flex, the next step was to create a video player in a Flex 4.0 Spark Application trying to use the same OSMF sample files, just used for the Flash CS 5 test. But I got some problems….

-
OMFS and ADOBE FLEX 4.x

The first problem seems generated from a different OSMF library version.
In fact from Flex 4.0 the OSMF framework is already included in the SDK but it seems different from the OSMF API used from the Flash CS official examples.
To fix this issue you need to remove the osmf.swc from the Flex 4.* sdk, adding the new osmf.swc file (available inside the examples zip file) to your project “libs” folder.

So, open the Project Properties and remove the osmf.swc file from the list:

Finally copy the new OSMF.swc in your libs folder:

The second issue was generated from the use of the Spark architecture of any Flex 4 MXML project.
Since all the sample classes extends MovieClip, so they are Display Objects, instead to use them as document classes (just like we did in Flash CS5), I have thought to add them to the display list.

Unfortunately, the MovieClip class is not a IVisualElement, required from the addElement() method, used to add an objects to the display list in a Spark architecture.

What we need to do is simply modify the original document classes extending the UIComponent class instead of Sprite or MovieClip.

From:

public class OSMFPlayer extends MovieClip
{

to:

public class OSMFPlayer extends UIComponent
{

You can now create an instance of the original sample classes in your Flex application, displaying your first Flex OSMF player, as following:

osmfplayer = new OSMFPlayer();  
this.addElement(osmfplayer);

You can find more details about this topic in the article created by Alain Thibodeau

-
OMFS and AIR for Android

The logical next step has been to create the Air for Android version.
I followed the same procedure I have just explained for FX 4.* and after some little UI fixes I got an OMFS player on my Android device.

Following the complete source code

The main application file

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
							xmlns:s="library://ns.adobe.com/flex/spark" 
							firstView="views.HomeView">
 
	<fx:Declarations>
		<!-- Place non-visual elements 
		(e.g., services, value objects) here -->
	</fx:Declarations>
 
</s:ViewNavigatorApplication>

HomeView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="OSMF Android Player"
		backgroundColor="0x000000"
		creationComplete="viewActivateHandler(event)"
		>
 
 
		<fx:Script>
			<![CDATA[
				import mx.events.FlexEvent;
				import spark.events.ViewNavigatorEvent;
 
				private var osmfplayer:OSMFPlayer;
 
				protected function viewActivateHandler(event:Event):void
				{
					osmfplayer = new OSMFPlayer();  
					this.addElement(osmfplayer);
				}
 
			]]>
		</fx:Script>
 
 
</s:View>

OSMFPlayer.as

package
{
	import flash.system.Capabilities;
 
	import mx.core.FlexGlobals;
	import mx.core.UIComponent;
 
	import org.osmf.containers.MediaContainer;
	import org.osmf.media.DefaultMediaFactory;
	import org.osmf.media.MediaElement;
	import org.osmf.media.MediaPlayer;
 
 
	//Sets the size of the SWF
 
	public class OSMFPlayer extends UIComponent
	{
		import org.osmf.media.URLResource;
 
 
		//URI of the media
		public static const PROGRESSIVE_PATH:String = 
			"http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv";
 
		public var player:MediaPlayer;
		public var container:MediaContainer;
		public var mediaFactory:DefaultMediaFactory;
 
 
 
 
		public function OSMFPlayer()
		{
			initPlayer();
		}
 
 
		protected function initPlayer():void
		{
			//the pointer to the media
			var resource:URLResource = new URLResource( PROGRESSIVE_PATH );
 
			// Create a mediafactory instance
			mediaFactory = new DefaultMediaFactory();
 
			//creates and sets the MediaElement (generic) with a resource and path
			var element:MediaElement = mediaFactory.createMediaElement( resource );
 
			//the simplified api controller for media
			player = new MediaPlayer( element );
 
			//the container (sprite) for managing display and layout
			container = new MediaContainer();
			container.addMediaElement( element );
 
			//Fit the player size  
			container.width = Capabilities.screenResolutionX ;
			container.height = Capabilities.screenResolutionY - FlexGlobals.topLevelApplication.actionBar.height;
 
			//Adds the container to the stage
			this.addChild( container );
		}
 
 
 
	}
}

Performance are really good, certainly better than the YouTube Android player described in this article.