By Alain Thibodeau – Consultant
If you have ever built a video player from scratch you know the hard work that is involved. The Open Source Media Framework helps developers to create video players using best practices and avoid solving the same problems over and over, saving time and money. You can learn more about OSMF at this website.
OSMF ships with Flex 4
OSMF comes with Flex 4. This is great, but the included version is an earlier version of OSMF. At this writing, the version of OSMF is v0.93 sprint 10. This version includes several changes since the version that ships with Flex 4. You’ll need to remove the osmf.swc from the Flex 4 SDK and add the proper osmf.swc in your project libs folder. Download the latest OSMF files here.
Making the example work in Flex 4:
1. Make the HelloWorld.as extend UIComponent instead of Sprite.
2. Create a project MXML file and create an instance of the HelloWorld class in either AS3 or in MXML. I show both ways below, but I’ve commented out the MXML way of doing it.
Example code: main.mxml
<s:Application
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="*"
minWidth="955"
minHeight="600"
creationComplete="init(event)"
>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
public var helloWorld:HelloWorld
protected function init( event:FlexEvent ):void {
helloWorld = new HelloWorld();
addElement( helloWorld );
}
]]>
</fx:Script>
<!--<local:HelloWorld />-->
</s:Application>
Example code: HelloWorld.as
*
* Copyright 2009 Adobe Systems Incorporated. All Rights Reserved.
*
*****************************************************
* The contents of this file are subject to the Mozilla Public License
* Version 1.1 (the "License"); you may not use this file except in
* compliance with the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS"
* basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
* License for the specific language governing rights and limitations
* under the License.
*
*
* The Initial Developer of the Original Code is Adobe Systems Incorporated.
* Portions created by Adobe Systems Incorporated are Copyright (C) 2009 Adobe Systems
* Incorporated. All Rights Reserved.
*
*****************************************************/
package {
import flash.display.Sprite;
import mx.core.UIComponent;
import org.osmf.containers.MediaContainer;
import org.osmf.elements.VideoElement;
import org.osmf.media.MediaPlayer;
import org.osmf.media.URLResource;
/**
* The simplest OSMF application possible.
*
* The metadata sets the SWF size to match that of the video.
**/
[SWF( width="640", height="352" )]
public class HelloWorld extends UIComponent {
public function HelloWorld() {
// Create the container class that displays the media.
var container:MediaContainer = new MediaContainer();
addChild( container );
// Create the resource to play.
var resource:URLResource = new URLResource( "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv" );
// Create the MediaElement and add it to our container class.
var videoElement:VideoElement = new VideoElement( resource );
container.addMediaElement( videoElement );
// Set the MediaElement on a MediaPlayer. Because autoPlay
// defaults to true, playback begins immediately.
var mediaPlayer:MediaPlayer = new MediaPlayer();
mediaPlayer.media = videoElement;
}
}
}
