OSMF + Flex Example

I’ve been checking up on OSMF (Open Source Media Framework) periodically, but found that many of their examples / samples don’t work at the moment (their APIs have been in flux). If you’re just looking for a quick way to get OSMF (v.9) up and running in Flex here’s a bit of code that should help.

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:containers="org.osmf.containers.*" applicationComplete="init();" xmlns:media="org.osmf.media.*">
 
 
 
    </mx><mx :Script>
        < ![CDATA[
            import org.osmf.display.MediaPlayerSprite;
            import org.osmf.layout.LayoutUtils;
 
            import org.osmf.containers.MediaContainer;
            import org.osmf.media.MediaElement;
            import org.osmf.media.MediaPlayer;
            import org.osmf.media.URLResource;
            import org.osmf.utils.URL;
            import org.osmf.video.VideoElement;
            import org.osmf.net.NetLoader;
 
            import mx.core.UIComponent;
 
            private static const REMOTE_PROGRESSIVE:String = "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv";
 
            private var mediaElement:MediaElement;
            private var mediaPlayer:MediaPlayer;
            private var container:MediaContainer;
 
            private function init():void
            {
                // set up some listeners for our buttons
                playBtn.addEventListener( MouseEvent.CLICK, playHandler, false, 0, true );
                pauseBtn.addEventListener( MouseEvent.CLICK, pauseHandler, false, 0, true );
                seekBtn.addEventListener( MouseEvent.CLICK, seekHandler, false, 0, true );
 
                // First create a MediaElement and load some media 
                mediaElement = new VideoElement( new NetLoader, new URLResource( new URL( REMOTE_PROGRESSIVE ) ) );
 
                // We need a DisplayObject for the video
                container = new MediaContainer(); 
                // feed the display object a media element
                container.addMediaElement( mediaElement ); 
                // Flex requires a DisplayObject to be wrapped in Flex Framework UI Abstraction
                videoParent.addChild( container ); 
 
                // MediaPlayer is a virtual controller. Assign it a media element and it will autoplay the media by default.
                mediaPlayer = new MediaPlayer( mediaElement );
 
                // We will manually resize the MediaContainer just for kicks
                LayoutUtils.setAbsoluteLayout( mediaElement.metadata, 640, 360 ); 
            }
 
            private function playHandler( e:MouseEvent ):void
            {
                if ( !mediaPlayer.playing )
                {
                    mediaPlayer.play();
                }
            }
 
            private function pauseHandler( e:MouseEvent ):void
            {
                if ( mediaPlayer.playing )
                {
                    mediaPlayer.pause();
                }
            }
 
            private function seekHandler( e:MouseEvent ):void
            {
                var val:Number =  parseFloat( timeTxt.text );
 
                mediaPlayer.seek( val );
            }
        ]]>
    </mx>
    <mx :UIComponent id="videoParent"/>
    <mx :Button x="10" y="400" label="play" id="playBtn"/>
    <mx :Button x="72" y="400" label="pause" id="pauseBtn"/>
    <mx :Button x="145" y="400" label="seek" id="seekBtn"/>
    <mx :TextInput x="211" y="400" width="40" id="timeTxt" text="0" restrict="0-9"/>

10 thoughts on “OSMF + Flex Example

  1. @Charlie – looks like the wordpress code plugin is stripping the last tag. You should be golden if you add a closing application tag and make sure you are linking against the OSMF.swc.

  2. @Brook – Thanks for the help. However there is one issue lingering for a long time. Whenever i try to play a video with OSMF using RTMP i get a security certificate prompt. This happens for each media that i play. Can i disable this ? This problem does not happen with any other player used over the internet.

  3. //mediaElement = new VideoElement( new URLResource( new URL( REMOTE_PROGRESSIVE ) ), new NetLoader );
    ->
    mediaElement = new VideoElement( new new StreamingURLResource(“rtmp://fms/app/xxx”), new NetLoader());

  4. hey frnds,
    how can we start video from given time in osmf player and also how to ad cue point to stop it

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>