Archive for March, 2011

Stage Video and Ad Insertion Plug-In for OSMF

OSMF 1.6 (pre-release “Sprint” 1) introduced Stage Video support. With Sprint 2, we wanted to see how well the implementation works for advertisement scenarios, so we created a sample plug-in for ad insertion.

Our intent is to provide the best Stage Video support in complex, multiple video scenarios and at the same time we’d like to establish a set of best practices related to implementing advertisement plugins.

Getting the source code

The source code is in the OSMF SVN repository and you can get it directly from these locations:
svn checkout http://svn.code.sf.net/adobe/osmf/svn/osmf/trunk/plugins/AdvertisementPlugin
svn checkout http://svn.code.sf.net/adobe/osmf/svn/osmf/trunk/plugins/AdvertisementPluginSample

We have also uploaded the ZIP archive containing the source code to our SourceForge download section (check the OSMF 1.6 – Sprint 2 folder):
http://sourceforge.net/projects/osmf.adobe/files/

Using the plug-in with Strobe Media Playback

You can see a live demo of the plugin within Strobe Media Playback here:
http://osmf.org/dev/latest/advertisement-demo.html

Strobe Media Playback provides a mechanism that allows configuring and loading OSMF plug-ins through a very simple API.

A configuration snippet looks like this:

 var parameters =
 {
     src: "rtmp://example.com/mp4:sample.f4v",	   		 			
 
     // Load the Ad Plug-in
     plugin_ads: "AdvertisementPlugin.swf",
 
     // Configure the Ad Plug-in
     ads_preroll: "http://example.com/example.flv",
     ads_postroll: "http://example.com/example.flv",
     ads_midroll: "http://example.com/example.flv",
     ads_midrollTime: 20,
     ads_overlay: "http://example.com/example.flv",
     ads_overlayTime: 25
 };
 
 swfobject.embedSWF
 (  "StrobeMediaPlayback.swf",
     "StrobeMediaPlayback",
     640, 480,
     "10.1.0",
     "expressInstall.swf",
     parameters,
     { allowFullScreen: "true", wmode: "direct" },
     { name: "StrobeMediaPlayback" }
 );

You can view the source of the live demo for additional configuration samples.

Using the plug-in with your OSMF-based player

To use the plug-in in an OSMF-based video player, you’ll need to configure and load the plug-in using the OSMF API.

The AdvertisementPluginSample application demonstrates this:

 // This is a normal video player setup.
 var mediaFactory:MediaFactory = new DefaultMediaFactory();
 var mediaPlayer:MediaPlayer = new MediaPlayer();
 var mediaContainer:MediaContainer = new MediaContainer();
 var resource:URLResource = new URLResource("rtmp://cp67126.edgefcs.net/ondemand/mp4:mediapm/osmf/content/test/sample1_700kbps.f4v");
 var mediaElement:MediaElement = mediaFactory.createMediaElement(resource);
 mediaContainer.addMediaElement(mediaElement);
 this.addChild(mediaContainer);
 
 // Load the plugin statically
 var pluginResource:MediaResourceBase = new PluginInfoResource(new AdvertisementPluginInfo());
 
 // You can load it as a dynamic plugin as well
 // var pluginResource:MediaResourceBase = new URLResource("http://localhost/AdvertisementPlugin/bin/AdvertisementPlugin.swf");
 
 // Pass the references to the MediaPlayer and the MediaContainer instances to the plug-in.
 pluginResource.addMetadataValue("MediaPlayer", mediaPlayer);
 pluginResource.addMetadataValue("MediaContainer", mediaContainer);
 
 // Configure the plugin with the ad information
 // The following configuration instructs the plugin to play a mid-roll ad after 20 seconds
 pluginResource.addMetadataValue("midroll", "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv");
 pluginResource.addMetadataValue("midrollTime", 10);
 
 // Uncomment the following lines to see a pre-roll, overlay, and post-roll ad.
 // pluginResource.addMetadataValue("preroll", "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv");
 // pluginResource.addMetadataValue("postroll", "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv");
 // pluginResource.addMetadataValue("overlay", "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv");
 // pluginResource.addMetadataValue("overlayTime", 20);
 
 // Once the plugin is loaded, play the media.
 // The event handler is not needed if you use the statically linked plugin,
 // but is here in case you load the plugin dynamically.
 // For readability, we don’t provide error handling here, but you should.
 mediaFactory.addEventListener(
    MediaFactoryEvent.PLUGIN_LOAD,
    function(event:MediaFactoryEvent):void
    {
       // Now let's play the video - mediaPlayer has autoPlay set to true by default,
       // so the playback starts as soon as the media is ready to be played.
       mediaPlayer.media = mediaElement;
    });
 
// Load the plugin.
mediaFactory.loadPlugin(pluginResource);

Implementation details

We chose to use the MediaPlayer API instead of the ProxyElement, SerialElement, or ParallelElement APIs. There are a few reasons why we wrote custom control code instead of using the composition APIs:

  • We have full control over the pre-buffering of the ads.
  • We don’t change the properties or traits of the main media.
  • We wanted to provide an example of how the MediaPlayer API can be used inside an OSMF plug-in.

The plug-in relies on getting references to both the MediaPlayer and the MediaContainer instances. The player is responsible for passing them to the plug-in as configuration metadata.

Implementing a mid-roll scenario involves the following steps:

  1. Pre-buffer the ad.
  2. Once the ad is ready to be played, pause the main video.
  3. Remove the main video from the MediaContainer and add the ad to it instead.
  4. Once ad playback has finished, remove the ad from the MediaContainer and add the main video back.
  5. Resume main video playback.

For displaying an overlay ad, we simply add the ad to the same MediaContainer and configure its layout.

These are some starting points. We encourage you to check the source code, and let us know what you think.

References

For a discussion of Stage Video in OSMF, see the OSMF Developer’s Guide. You can find the latest version of the dev guide in the latest OSMF sprint drop zips:
http://sourceforge.net/projects/osmf.adobe/files/

For more on writing plug-ins with OSMF, see the OSMF Plug-In Developer’s Guide:
https://sourceforge.net/nf/redirect/?path=http%3A//osmf.org/dev/osmf/OtherPDFs/osmf_plugin_dev_guide.pdf

Check some Stage Video related articles and content here:
http://www.adobe.com/devnet/flashplayer/stagevideo.html

Technical details about our current implementation:
http://blogs.adobe.com/osmf/2011/02/stage-video-in-osmf.html

Getting started with Stage Video support in OSMF and Strobe Media Playback:
http://blogs.adobe.com/osmf/2011/02/getting-started-with-stage-video-support-in-osmf-and-strobe-media-playback.html

Sprint 2 of OSMF 1.6 is here!

We’re pleased to announce our 2nd sprint drop for OSMF 1.6.  We dedicated much of this sprint to improving OSMF’s switching logic for HTTP Dynamic Streaming and addressing some of the related bugs.  After testing the fixes and running them through several variable bandwidth scenarios, we observed a definite improvement in switching behavior.  The full list of bugs fixed can be found in the release notes.

In addition, we’ve created a sample advertising plug-in that demonstrates how to insert both in-stream and overlay ads into a video when Stage Video is enabled.  The focus here was on the actual insertion, and we hope this can be used as a starting point by someone developing an ad plug-in.  A demo of the plug-in as well as more details can be found here.

As always, we welcome and encourage your feedback.  I can be personally reached at ckwon at adobe dot com.

Thanks!
Cathi, Sr. Product Manager for OSMF

 

Part 2 of Mastering OSMF is up on DevNet !

Part 2 of the three part series of articles by David Hassoun and John Crosby of RealEyes Media has been posted on the Adobe Developer Connection (under Flash Developer Center tutorials)  It is titled Part 2: Creating and customizing your player.  John and David do a great job of covering both UI controls and the use of serial and parallel compositions with OSMF.  The article dives into the the layout and container functionlity that OSMF offers so that you as a developer or designer can have complete control over the visual experince of your player.  The article consists of a series of walkthroughs with code snippets and with a complete set of samples files so that you can follow along in the code for each subject as it is discussed.  Use it to get yourself up and running quickly with your own OSMF based video player.