The Open Source Media Framework (OSMF) formerly known as Strobe goes open source and provides a a framework for media playback of any kind.
To download the code visit:
http://opensource.adobe.com/wiki/display/osmf/Open+Source+Media+Framework
The video player ecosystem is complex. There are other elements that make a video player a complete composition, such as advertisement elements, social network elements, reporting, content management, DRM etc. Adobe recently announced a new framework called Adobe Open Source Media Framework that is aimed at solving these issues.
OSMF is an open source (vanity license) AS3 media framework that supports the workflow around video playback and monetization. Video players have different features set. The skins are different and the integration is different as well as the architecture workflow. But they do essentially the same thing and can be created using the OSMF framework. The framework is based on the quality of the video player (OVP) and addresses the common challenges.
Adobe vanity license means that it’s ok to use and redistribute. Modifications can be submitted to Adobe for redistribution.
The foundation of the framework is Qos (quality of service), which focuses on OVP and provides a quick start for playing videos (smallest buffer size needed to start the video), efficient connection logic, and switching bitrates dynamically (recall metric monitor service in OVP).
The framework by itself is not powerful without having the CDNs and the publishers onboard. Adobe OSMF is based on the “chicken and the egg” theory, meaning which will come first? In fact, Adobe is currently trying to get the publishers and the CDNs onboard and it seem that they got very positive responses. The idea is that each CDN will integrate their plugins to the OSMF framework and the publisher will be able to easily switch CDNs. This type of pluggable component can allow publisher to easily switch as well as test performance and service over different CDNs.
Advantages:
- Reduce the barrier of entry for new publishers – by offering a framework to integrate the different pieces of the video player, new publishers can get started quickly and with fewer resources and scale up as requirements increase.
- Provide flexible framework – OSMF provides an easy way to extend each component and allow these components to act as a Lego piece that can be compositable and extensible.
- Leverage existing code – The OSMF framework uses the Flash Player from Open Video Player (OVP).
- Drive Standard and allow custom workflows – many of the elements that connect to a video player are not standard yet and Adobe OSMF will help standardize these components as well as allow them to be configured.
- No runtimes or framework dependency – the framework is based on Flash 10 AS3 and is not depend on any framework such as Flex SDK, Cairngorm or others. With that said some integrated elements may be created using a framework but these are loosely coupled and can be replaced if needed.
- Partners focus – There are two partners: publishers and CDNs. Each can focused on their expertise. CDN can focus on services and integration and publisher can focus on user experience.
- Integration with existing Adobe tools – Adobe OSMF will be integrated with other Adobe Suite tools and services such as Catalyst, Illustrator, FMS 3.5 and FMRMS.
- Optimize – by the ability to separate the core framework and each element as a separate SWC you can increase performance by keeping file size to the minimum and based on components used.
The Adobe OSMF framework consists of three interests, which can be represented as an MVC pattern, as follows:
- Model (Media elements) - media element (based on IMediaElement) may be video, image, SWF or others. Every media element has defined capabilities (traits based on IMediaTrait) and a life cycle, they are called Regions, for instance Region 1 (Image), Region 2 (Video) etc. Each media element implement IMediaElement contract, which contains the dynamic media traits (capabilities) and you can add or modify a trait. The traits are the building blocks and they can be set once and be reused.
- Controller (Media compositions) – a media composition (IMediaFactory) is a collection of media elements. Each media can be rendered based on set of rules as well as media region that define how to use the capability and the life cycle.
- View (Media configurations) – collection of media regions with properties that map to defined capabilities. Each media region can render each media element and can be spatially arranged and the entire media configuration can be the stage.
Let’s take a closer look at the higher architecture. The UI management is the set of tools we use to create our video player and skin it such as Flash Professional, Flex and soon we will be able to use Flash Catalyst for Flash 10 applications. Advertising companies such as DoubleClick or eyewonder allow us to add rich advertisement elements such as pre, mid and post roll ads, in playlist, or as companion ads or overlay ads. Applications provided by sites such as KickApps and gigya allowing embedding of the video player in social networks such as Facebook. The Flash Platform enable playback of video files. Companies such as Level(3) and Akamai provide syndications of feeds that can be consumed by other APIs. Lastly, stream management is available through Adobe’s server.
The framework architecture was designed to allow you to integrate at multiple points and support different use cases, it also allow to use only the pieces you need, as well as the ability to scale up when ready. There are three types of implementation you may find useful.
- Media Framework (level 1 integration) - small in size and include the basic integration such as the video player by OVP and pluggable CDNs. It allows hooking into your higher-level API, tweak the UI and access the needed classes and methods you define such as play and pause.
- Media Framework and Composition Framework (level 2 integration) - In addition to level 1 level 2 allows creating a composition framework, which includes the ability to integrate to plugins that can provide monetization workflow for ads and tracking.
- Configuration Framework, Media Framework and Composition Framework (level 3 integration) – in addition to the features that level 2 and level 1 offers, the level 3 integration offers dynamic chrome and syndication.
Let’s see the framework in action
Let’s take a look at a simple implementation of the framework provided by Adobe based on the beta version. Keep in mind that the implementation was provided by Adobe and it’s under Adobe agreement; please refer to Adobe in regarding to the license agreement in term of usage.
package com.adobe.strobe.player
{
import com.adobe.strobe.loaders.*;
import com.adobe.strobe.media.*;
import com.adobe.strobe.media.events.*;
import com.adobe.strobe.traits.*;
import com.adobe.strobe.traits.events.*;
import com.adobe.strobe.view.*;
import flash.events.*;
import flash.net.*;
public class MainWindow extends MainWindowLayout
{
The childrenCreated method will be called automatically by the component once the child objects are created, since it’s replacing the default UIComponent method.
We create the MediaFactory, which holds all the media element using IMediaInfo. We than can call the registerDefaultMedia. And adds event listeners to the buttons. As well as bring back mediaPlayer object which is the component which is capable of playing any type of media by holding a media element that has all the traits we needs such as IPausible, which is a trait to pause and resume playing.
override protected function childrenCreated():void
{
super.childrenCreated();
// Construct a loader factory:
factory = new MediaFactory();
registerDefaultMedia(factory);
// Add button handlers:
buttonStop.addEventListener(MouseEvent.CLICK,onStopClick);
buttonPlay.addEventListener(MouseEvent.CLICK,onPlayClick);
buttonPause.addEventListener(MouseEvent.CLICK,onPauseClick);
buttonResume.addEventListener(MouseEvent.CLICK,onResumeClick);
buttonToggleMute.addEventListener(MouseEvent.CLICK,onToggleMuteClick);
buttonLoad.addEventListener(MouseEvent.CLICK,onLoadClick);
// Get a reference to our player:
player = flexMediaPlayer.mediaPlayer;
player.scaleMode = ScaleMode.LETTERBOX;
}
registerDefaultMedia method creates all the media element that our application will be supporting, such as progressive download, streaming, audio files, images and SWFs.
private function registerDefaultMedia(factory:IMediaFactory):void
{
var loader:ILoader = new VideoLoader();
factory.addMediaInfo
( new MediaInfo
( "progressive"
, loader as IMediaResourceHandler
, VideoElement
, [VideoLoader]
)
);
loader = new RTMPLoader();
factory.addMediaInfo
( new MediaInfo
( "streaming"
, loader as IMediaResourceHandler
, VideoElement
, [RTMPLoader]
)
);
loader = new SoundLoader();
factory.addMediaInfo
( new MediaInfo
( "audio"
, loader as IMediaResourceHandler
, SoundElement
, [SoundLoader]
)
);
loader = new ImageLoader();
factory.addMediaInfo
( new MediaInfo
( "image"
, loader as IMediaResourceHandler
, ImageElement
, [new ImageLoader()]
)
);
loader = new SWFLoader();
factory.addMediaInfo
( new MediaInfo
( "swf"
, loader as IMediaResourceHandler
, ImageElement
, [SWFLoader]
)
);
}
loadMediaByURL method creates new media element based on the URL the user provided add listener and set it in our player component.
private function loadMediaByURL(url:IURLResource):void
{
// Stop listening to the current media, if any.
toggleMediaListeners(player.media,false);
// Create the new media.
var media:IMediaElement = factory.createMediaElement(url);
// Listen for events related to the new media.
toggleMediaListeners(media,true);
// Set it on our media player.
player.media = media;
}
toggleMediaListeners method adds the event listeners to the media. Once the state have changed and the on flag is set to true it will call the event handler onMediaStateChange. The media element has a trait for loading the asset and once the onLoadableStateChange is captured the text field will display the information.
private function toggleMediaListeners(media:IMediaElement,on:Boolean):void
{
if (media != null)
{
if (on)
{
media.addEventListener(MediaStateChangeEvent.STATE_CHANGE,onMediaStateChange);
}
else
{
media.removeEventListener(MediaStateChangeEvent.STATE_CHANGE,onMediaStateChange);
}
var loadable:ILoadable = media.getTrait(ILoadable) as ILoadable;
if (loadable)
{
if (on)
{
loadable.addEventListener(LoadableEvent.LOADABLE_STATE_CHANGE,onLoadableStateChange);
}
else
{
loadable.removeEventListener(LoadableEvent.LOADABLE_STATE_CHANGE,onLoadableStateChange);
}
}
}
}
The event listener will handle the interaction with the media element based on the traits that got assign to the media.
private function onStopClick(event:MouseEvent):void
{
player.stop();
}
private function onPlayClick(event:MouseEvent):void
{
player.play();
}
private function onLoadClick(event:MouseEvent):void
{
var url:String = urlInput.text;
if (url.length > 0)
{
player.unload();
loadMediaByURL(new URLResource(url));
}
}
private function onLoadableStateChange(event:LoadableEvent):void
{
loadState.text = event.newState.toString();
}
The onMediaStateChange event handler will handle the display and hiding of the toolbar.
private function onMediaStateChange(event:MediaStateChangeEvent):void
{
if (player.media)
{
buttonStop.visible = buttonPlay.visible = player.media.getTrait(IPlayable) != null;
buttonPause.visible = buttonResume.visible = player.media.getTrait(IPlayable) != null;
buttonToggleMute.visible = player.media.getTrait(IAudible) != null;
}
}
private var factory:IMediaFactory;
private var media:IMediaElement;
private var player:MediaPlayer;
Constants to hold the different media files we can test.
private static const REMOTE_PROGRESSIVE:String = "http://flipside.corp.adobe.com/pirates3/Pirates3-1.flv"; private static const REMOTE_MP3:String = "http://flipside.corp.adobe.com/brian/strobe/media/Remember.mp3"; private static const REMOTE_STREAM:String = "rtmp://flipside.corp.adobe.com/trailers/EvanAlmighty"; private static const REMOTE_IMAGE:String = "http://www.adobe.com/products/mediaplayer/assets/images/amp_icon.jpg"; private static const REMOTE_SWF:String = "http://flipside.corp.adobe.com/testing/swfPlayback/as3/Objects/Color/ObjClr_setRGB.swf" } }
