OSMF 0.7 Examples

Posted: 24/11/09

An image of OSMF 0.7 Examples

It hasn't been that long since I posted the Intro to OSMF tutorial, but OSMF has marched on at some pace since then. I've now altered the code examples to work with the latest cut of the framework (0.7), which you can find in this post - I've left the examples in the earlier post for posterity :)

If you're new to OSMF, and haven't yet set-up your development environment to start writing OSMF apps, might I suggest you read through Getting set up on the original post, as this will get you up and running, then refer back here for the code examples.

Some notable changes are the packages names, the renaming of the source property on MediaPlayer to element, and the addition of the new URL() object for URLResource initialisation.

I also noticed that AudioElement now requires a distinction to be made in the ILoader implementation. NetLoader is now only used for streamed audio, and SoundLoader now introduced for progressive audio. The strange thing is that VideoElements are loaded with NetLoader regardless of whether they're streamed or progressive…

Don't forget that there's now a thriving OSMF community that you can participate in at http://adobe.com/go/osmf_usergroup.

Examples

PLEASE NOTE: The framework has moved on since these examples were written, please refer to the more recent 0.93 examples.

RTMP Streaming

package

{

import flash.display.Sprite;

import org.osmf.events.MediaPlayerCapabilityChangeEvent;

import org.osmf.media.MediaPlayer;

import org.osmf.media.URLResource;

import org.osmf.net.NetLoader;

import org.osmf.utils.URL;

import org.osmf.video.VideoElement;

public class BasicOSMFStream extends Sprite

{

private const STREAM:String = "rtmp://localhost/vod/mp4:video.mp4";

private var _player:MediaPlayer;

public function BasicOSMFStream()

{

_player = new MediaPlayer();

_player.addEventListener( MediaPlayerCapabilityChangeEvent.VIEWABLE_CHANGE, onViewable );

_player.element = new VideoElement( new NetLoader(), new URLResource( new URL( STREAM ) ) );

}

private function onViewable( e:MediaPlayerCapabilityChangeEvent ) :void

{

if( e.enabled )

{

addChild( _player.view );

}

}

}

}

HTTP/Progressive download

package

{

import flash.display.Sprite;

import org.osmf.events.LoadableStateChangeEvent;

import org.osmf.events.MediaPlayerCapabilityChangeEvent;

import org.osmf.media.MediaPlayer;

import org.osmf.media.URLResource;

import org.osmf.net.NetLoader;

import org.osmf.traits.ILoadable;

import org.osmf.traits.LoadState;

import org.osmf.traits.MediaTraitType;

import org.osmf.utils.URL;

import org.osmf.video.VideoElement;

public class BasicOSMFProgressive extends Sprite

{

private const PROGRESSIVE:String = "http://localhost/video.mp4";

private var _player:MediaPlayer;

public function BasicOSMFProgressive()

{

_player = new MediaPlayer();

_player.addEventListener( MediaPlayerCapabilityChangeEvent.VIEWABLE_CHANGE, onViewable );

_player.element = new VideoElement( new NetLoader(), new URLResource( new URL( PROGRESSIVE ) ) );

var loadable:ILoadable = _player.element.getTrait( MediaTraitType.LOADABLE ) as ILoadable;

loadable.addEventListener( LoadableStateChangeEvent.LOADABLE_STATE_CHANGE, onLoaded );

}

private function onLoaded( e:LoadableStateChangeEvent ) :void

{

if( e.newState == LoadState.LOADED )

{

trace( 'load completed' );

}

else if( e.newState == LoadState.LOAD_FAILED )

{

trace( 'load failed' );

}

}

private function onViewable( e:MediaPlayerCapabilityChangeEvent ) :void

{

if( e.enabled )

{

addChild( _player.view );

}

}

}

}

Playlist XML composition

More context about this implementation can be found on my original Intro to OSMF post.

package

{

import flash.display.Sprite;

import flash.events.Event;

import flash.events.IOErrorEvent;

import flash.net.URLLoader;

import flash.net.URLRequest;

import org.osmf.audio.AudioElement;

import org.osmf.audio.SoundLoader;

import org.osmf.composition.SerialElement;

import org.osmf.events.LoadableStateChangeEvent;

import org.osmf.events.MediaPlayerCapabilityChangeEvent;

import org.osmf.image.ImageElement;

import org.osmf.image.ImageLoader;

import org.osmf.media.MediaPlayer;

import org.osmf.media.URLResource;

import org.osmf.net.NetLoader;

import org.osmf.proxies.TemporalProxyElement;

import org.osmf.traits.ILoadable;

import org.osmf.traits.LoadState;

import org.osmf.traits.MediaTraitType;

import org.osmf.utils.URL;

import org.osmf.video.VideoElement;

public class PlaylistOSMFPlayer extends Sprite

{

private const PLAYLIST_LOCATION:String = "http://localhost/osmfplaylist.xml";

private var _composition:SerialElement;

private var _loader:URLLoader;

private var _player:MediaPlayer;

private var _playlist:XML;

public function PlaylistOSMFPlayer()

{

loadPlaylist();

}

private function loadPlaylist() :void

{

_loader = new URLLoader();

_loader.addEventListener( Event.COMPLETE, onPlaylistLoaded );

_loader.addEventListener( IOErrorEvent.IO_ERROR, onPlaylistFail );

_loader.load( new URLRequest( PLAYLIST_LOCATION ) );

}

private function onPlaylistLoaded( e:Event ) :void

{

_playlist = XML( e.target.data );

parsePlaylist();

playPlaylist();

}

private function parsePlaylist() :void

{

_composition = new SerialElement();

var currentHour:int = new Date().getHours();

for each( var media:XML in _playlist.media )

{

if( currentHour <= int( String( media.@startTime ).split(":")[0] ) )

{

switch( media.@type.toString() )

{

case "video":

_composition.addChild( new VideoElement( new NetLoader(), new URLResource( new URL( media.@source ) ) ) );

break;

case "advert":

_composition.addChild( new VideoElement( new NetLoader(), new URLResource( new URL( media.@source ) ) ) );

break;

case "image":

_composition.addChild( new TemporalProxyElement( 5, new ImageElement( new ImageLoader(), new URLResource( new URL( media.@source ) ) ) ) );

break;

case "audio":

_composition.addChild( new AudioElement( new SoundLoader(), new URLResource( new URL( media.@source ) ) ) );

break;

}

}

}

}

private function playPlaylist() :void

{

if( _composition.numChildren )

{

_player = new MediaPlayer();

_player.addEventListener( MediaPlayerCapabilityChangeEvent.VIEWABLE_CHANGE, onViewable );

_player.addEventListener( MediaPlayerCapabilityChangeEvent.SPATIAL_CHANGE, onSpatial );

_player.element = _composition;

var loadable:ILoadable = _player.element.getTrait( MediaTraitType.LOADABLE ) as ILoadable;

loadable.addEventListener( LoadableStateChangeEvent.LOADABLE_STATE_CHANGE, onLoaded );

}

}

private function onLoaded( e:LoadableStateChangeEvent ) :void

{

if( e.newState == LoadState.LOADED )

{

// Logic for when a loadable object loads

}

else if( e.newState == LoadState.LOAD_FAILED )

{

// Logic for when a load fails

}

}

private function onPlaylistFail( e:IOErrorEvent ) :void

{

// When the playlist XML fails to loa

}

private function onSpatial( e:MediaPlayerCapabilityChangeEvent ) :void

{

// Hook up spatial components here

}

private function onViewable( e:MediaPlayerCapabilityChangeEvent ) :void

{

if( e.enabled )

{

addChild( _player.view );

}

}

}

}

Here's the playlist XML document that the code above attempts to load:

<?xml version="1.0" encoding="utf-8"?>

<playlist>

<media startTime="00:00" type="video" source="http://localhost/a2.mp4" title="video1"/>

<media startTime="01:00" type="advert" source="http://localhost/pcworld.flv" title="advert1"/>

<media startTime="02:00" type="video" source="http://localhost/b2.mp4" title="video2"/>

<media startTime="03:00" type="audio" source="http://localhost/2009_25a.mp3" title="audio1"/>

<media startTime="04:00" type="video" source="http://localhost/a2.mp4" title="video1"/>

<media startTime="05:00" type="advert" source="http://localhost/pcworld.flv" title="advert1"/>

<media startTime="06:00" type="video" source="http://localhost/b2.mp4" title="video2"/>

<media startTime="07:00" type="audio" source="http://localhost/2009_25a.mp3" title="audio1"/>

<media startTime="08:00" type="video" source="http://localhost/a2.mp4" title="video1"/>

<media startTime="09:00" type="advert" source="http://localhost/pcworld.flv" title="advert1"/>

<media startTime="11:00" type="video" source="http://localhost/b2.mp4" title="video2"/>

<media startTime="12:00" type="audio" source="http://localhost/2009_25a.mp3" title="audio1"/>

<media startTime="13:00" type="video" source="http://localhost/a2.mp4" title="video1"/>

<media startTime="14:00" type="advert" source="http://localhost/pcworld.flv" title="advert1"/>

<media startTime="15:00" type="image" source="http://localhost/welcome.png" title="image1"/>

<media startTime="16:00" type="video" source="http://localhost/a2.mp4" title="video1"/>

<media startTime="17:00" type="audio" source="http://localhost/2009_25a.mp3" title="audio1"/>

<media startTime="18:00" type="advert" source="http://localhost/pcworld.flv" title="advert1"/>

<media startTime="19:00" type="image" source="http://localhost/welcome.png" title="image1"/>

<media startTime="20:00" type="audio" source="http://localhost/2009_25a.mp3" title="audio1"/>

<media startTime="21:00" type="video" source="http://localhost/a2.mp4" title="video1"/>

<media startTime="22:00" type="advert" source="http://localhost/pcworld.flv" title="advert1"/>

<media startTime="23:00" type="video" source="http://localhost/b2.mp4" title="video2"/>

</playlist>

Download the latest version of OSMF

Keywords for this post: osmf, open source, adobe, media, framework, video, stream, progressive, audio, image, actionscript 3