How to Use the Microsoft Smooth Streaming Plugin for the Adobe Open Source Media Framework
Warning
Update your Azure Media Services REST API and SDKs to v3 by 29 February 2024. Version 3 of Azure Media Services REST API and client SDKs for .NET and Java offers more capabilities than version 2. We’re retiring version 2 of the Azure Media Services REST API and client SDKs for .NET and Java.
Action Required: To minimize disruption to your workloads, review the migration guide to transition your code from the version 2 API and SDKs to version 3 API and SDK before February 29th, 2024. After February 29th, 2024, Azure Media Services will no longer accept traffic on the version 2 REST API, the ARM account management API version 2015-10-01, or from the version 2 .NET client SDKs. This includes any 3rd party open-source client SDKS that may call the version 2 API. Learn about the latest version, starting with the Media Services v3 Overview.
Overview
The Microsoft Smooth Streaming plugin for Open Source Media Framework 2.0 (SS for OSMF) extends the default capabilities of OSMF and adds Microsoft Smooth Streaming content playback to new and existing OSMF players. The plugin also adds Smooth Streaming playback capabilities to Strobe Media Playback (SMP).
SS for OSMF includes two versions of plugin:
- Static Smooth Streaming plugin for OSMF (.swc)
- Dynamic Smooth Streaming plugin for OSMF (.swf)
This document assumes that the reader has a general working knowledge of OSMF and OSMF plug-ins. For more information about OSMF, please see the documentation on the official OSMF site.
Smooth Streaming plugin for OSMF 2.0
The plugin supports loading and playback of on-demand Smooth Streaming content with the following features:
- On-demand Smooth Streaming playback (Play, Pause, Seek, Stop)
- Live Smooth Streaming playback (Play)
- Live DVR functions (Pause, Seek, DVR Playback, Go-to-Live)
- Support for video codecs - H.264
- Support for Audio codecs - AAC
- Multiple audio language switching with OSMF built-in APIs
- Max playback quality selection with OSMF built-in APIs
- Sidecar closed captions with OSMF captions plugin
- Adobe® Flash® Player 11.4 or higher.
- This version only supports OSMF 2.0.
Supported features and known issues
For a full list of supported features, unsupported features and known issues, refer to this document.
Loading the Plugin
OSMF plugins can be loaded statically (at compile time) or dynamically (at run-time). The Smooth Streaming plugin for OSMF download includes both dynamic and static versions.
- Static loading: To load statically, a static library (SWC) file is required. Static plugins are added as a reference to the projects and merge inside the final output file at the compile time.
- Dynamic loading: To load dynamically, a precompiled (SWF) file is required. Dynamic plugins are loaded in the runtime and not included in the project output. (Compiled output) Dynamic plugins can be loaded using HTTP and FILE protocols.
For more information on static and dynamic loading, see the official OSMF plugin page.
SS for OSMF Static Loading
The code snippet below shows how to load the SS plugin for OSMF statically and play a basic video using OSMF MediaFactory class. Before including the SS for OSMF code, please ensure that the project reference includes the "MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swc" static plugin.
package
{
import com.microsoft.azure.media.AdaptiveStreamingPluginInfo;
import flash.display.*;
import org.osmf.media.*;
import org.osmf.containers.MediaContainer;
import org.osmf.events.MediaErrorEvent;
import org.osmf.events.MediaFactoryEvent;
import org.osmf.events.MediaPlayerStateChangeEvent;
import org.osmf.layout.*;
[SWF(width="1024", height="768", backgroundColor='#405050', frameRate="25")]
public class TestPlayer extends Sprite
{
public var _container:MediaContainer;
public var _mediaFactory:DefaultMediaFactory;
private var _mediaPlayerSprite:MediaPlayerSprite;
public function TestPlayer( )
{
stage.quality = StageQuality.HIGH;
initMediaPlayer();
}
private function initMediaPlayer():void
{
// Create the container (sprite) for managing display and layout
_mediaPlayerSprite = new MediaPlayerSprite();
_mediaPlayerSprite.addEventListener(MediaErrorEvent.MEDIA_ERROR, onPlayerFailed);
_mediaPlayerSprite.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onPlayerStateChange);
_mediaPlayerSprite.scaleMode = ScaleMode.NONE;
_mediaPlayerSprite.width = stage.stageWidth;
_mediaPlayerSprite.height = stage.stageHeight;
//Adds the container to the stage
addChild(_mediaPlayerSprite);
// Create a mediafactory instance
_mediaFactory = new DefaultMediaFactory();
// Add the listeners for PLUGIN_LOADING
_mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD,onPluginLoaded);
_mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadFailed );
// Load the plugin class
loadAdaptiveStreamingPlugin( );
}
private function loadAdaptiveStreamingPlugin( ):void
{
var pluginResource:MediaResourceBase;
pluginResource = new PluginInfoResource(new AdaptiveStreamingPluginInfo( ));
_mediaFactory.loadPlugin( pluginResource );
}
private function onPluginLoaded( event:MediaFactoryEvent ):void
{
// The plugin is loaded successfully.
// Your web server needs to host a valid crossdomain.xml file to allow plugin to download Smooth Streaming files.
loadMediaSource("http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest")
}
private function onPluginLoadFailed( event:MediaFactoryEvent ):void
{
// The plugin is failed to load ...
}
private function onPlayerStateChange(event:MediaPlayerStateChangeEvent) : void
{
var state:String;
state = event.state;
switch (state)
{
case MediaPlayerState.LOADING:
// A new source is started to load.
break;
case MediaPlayerState.READY :
// Add code to deal with Player Ready when it is hit the first load after a source is loaded.
break;
case MediaPlayerState.BUFFERING :
break;
case MediaPlayerState.PAUSED :
break;
// other states ...
}
}
private function onPlayerFailed(event:MediaErrorEvent) : void
{
// Media Player is failed .
}
private function loadMediaSource(sourceURL : String):void
{
// Take an URL of SmoothStreamingSource's manifest and add it to the page.
var resource:URLResource= new URLResource( sourceURL );
var element:MediaElement = _mediaFactory.createMediaElement( resource );
_mediaPlayerSprite.scaleMode = ScaleMode.LETTERBOX;
_mediaPlayerSprite.width = stage.stageWidth;
_mediaPlayerSprite.height = stage.stageHeight;
// Add the media element
_mediaPlayerSprite.media = element;
}
}
}
SS for OSMF Dynamic Loading
The code snippet below shows how to load the SS plugin for OSMF dynamically and play a basic video using the OSMF MediaFactory class. Before including the SS for OSMF code, copy the "MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf" dynamic plugin to the project folder if you want to load using FILE protocol, or copy under a web server for HTTP load. There is no need to include "MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swc" in the project references.
package
{
import flash.display.*;
import org.osmf.media.*;
import org.osmf.containers.MediaContainer;
import org.osmf.events.MediaErrorEvent;
import org.osmf.events.MediaFactoryEvent;
import org.osmf.events.MediaPlayerStateChangeEvent;
import org.osmf.layout.*;
import flash.events.Event;
import flash.system.Capabilities;
//Sets the size of the SWF
[SWF(width="1024", height="768", backgroundColor='#405050', frameRate="25")]
public class TestPlayer extends Sprite
{
public var _container:MediaContainer;
public var _mediaFactory:DefaultMediaFactory;
private var _mediaPlayerSprite:MediaPlayerSprite;
public function TestPlayer( )
{
stage.quality = StageQuality.HIGH;
initMediaPlayer();
}
private function initMediaPlayer():void
{
// Create the container (sprite) for managing display and layout
_mediaPlayerSprite = new MediaPlayerSprite();
_mediaPlayerSprite.addEventListener(MediaErrorEvent.MEDIA_ERROR, onPlayerFailed);
_mediaPlayerSprite.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onPlayerStateChange);
//Adds the container to the stage
addChild(_mediaPlayerSprite);
// Create a mediafactory instance
_mediaFactory = new DefaultMediaFactory();
// Add the listeners for PLUGIN_LOADING
_mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD,onPluginLoaded);
_mediaFactory.addEventListener(MediaFactoryEvent.PLUGIN_LOAD_ERROR, onPluginLoadFailed );
// Load the plugin class
loadAdaptiveStreamingPlugin( );
}
private function loadAdaptiveStreamingPlugin( ):void
{
var pluginResource:MediaResourceBase;
var adaptiveStreamingPluginUrl:String;
// Your dynamic plugin web server needs to host a valid crossdomain.xml file to allow loading plugins.
adaptiveStreamingPluginUrl = "http://yourdomain/MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf";
pluginResource = new URLResource(adaptiveStreamingPluginUrl);
_mediaFactory.loadPlugin( pluginResource );
}
private function onPluginLoaded( event:MediaFactoryEvent ):void
{
// The plugin is loaded successfully.
// Your web server needs to host a valid crossdomain.xml file to allow plugin to download Smooth Streaming files.
loadMediaSource("http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest")
}
private function onPluginLoadFailed( event:MediaFactoryEvent ):void
{
// The plugin is failed to load ...
}
private function onPlayerStateChange(event:MediaPlayerStateChangeEvent) : void
{
var state:String;
state = event.state;
switch (state)
{
case MediaPlayerState.LOADING:
// A new source is started to load.
break;
case MediaPlayerState.READY :
// Add code to deal with Player Ready when it is hit the first load after a source is loaded.
break;
case MediaPlayerState.BUFFERING :
break;
case MediaPlayerState.PAUSED :
break;
// other states ...
}
}
private function onPlayerFailed(event:MediaErrorEvent) : void
{
// Media Player is failed .
}
private function loadMediaSource(sourceURL : String):void
{
// Take an URL of SmoothStreamingSource's manifest and add it to the page.
var resource:URLResource= new URLResource( sourceURL );
var element:MediaElement = _mediaFactory.createMediaElement( resource );
_mediaPlayerSprite.scaleMode = ScaleMode.LETTERBOX;
_mediaPlayerSprite.width = stage.stageWidth;
_mediaPlayerSprite.height = stage.stageHeight;
// Add the media element
_mediaPlayerSprite.media = element;
}
}
}
Strobe Media Playback with the SS ODMF Dynamic Plugin
The Smooth Streaming for OSMF dynamic plugin is compatible with Strobe Media Playback (SMP). You can use the SS for OSMF plugin to add Smooth Streaming content playback to SMP. To do this, copy "MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf" under a web server for HTTP load using the following steps:
Browse the Strobe Media Playback setup page.
Set the src to a Smooth Streaming source, (e.g. http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest)
Make the desired configuration changes and click Preview and Update.
Note Your content web server needs a valid crossdomain.xml.
Copy and paste the code to a simple HTML page using your favorite text editor, such as in the following example:
<html> <body> <object width="920" height="640"> <param name="movie" value="http://osmf.org/dev/2.0gm/StrobeMediaPlayback.swf"></param> <param name="flashvars" value="src=http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest &autoPlay=true"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="direct"></param> <embed src="http://osmf.org/dev/2.0gm/StrobeMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="direct" width="920" height="640" flashvars=" src=http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest&autoPlay=true"> </embed> </object> </body> </html>Add Smooth Streaming OSMF plugin to the embed code and save.
<html> <object width="920" height="640"> <param name="movie" value="http://osmf.org/dev/2.0gm/StrobeMediaPlayback.swf"></param> <param name="flashvars" value="src=http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest&autoPlay=true&plugin_AdaptiveStreamingPlugin=http://yourdomain/MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="direct"></param> <embed src="http://osmf.org/dev/2.0gm/StrobeMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="direct" width="920" height="640" flashvars="src=http://devplatem.vo.msecnd.net/Sintel/Sintel_H264.ism/manifest&autoPlay=true&plugin_AdaptiveStreamingPlugin=http://yourdomain/MSAdaptiveStreamingPlugin-v1.0.3-osmf2.0.swf&AdaptiveStreamingPlugin_retryLive=true&AdaptiveStreamingPlugin_retryInterval=10"> </embed> </object> </html>Save your HTML page and publish to a web server. Browse to the published web page using your favorite Flash® Player enabled Internet browser (Internet Explorer, Chrome, Firefox, so on).
Enjoy Smooth Streaming content inside Adobe® Flash® Player.