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

9 Responses to Stage Video and Ad Insertion Plug-In for OSMF

  1. Tim Beynart says:

    Great! I am looking forward to digging through the ad plugin. The MediaPlayer API looks like a solid, clean approach.

  2. Murugan says:

    Hi,

    I gave these parameter

    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

    but none of the Ads is coming, how to check whether the plugin_ads: “AdvertisementPlugin.swf”, is loaded properly or not. I download the souce code through flash builder i generated AdvertisementPlugin.swf and placed in my folder. Pls help me how to make work

    • Andrian Cucu says:

      Hi Murugan,

      You need to replace the example URLs (“http://example.com/example.flv) to existing videos.

      You also need to host both your video player and the plugin on a http server.

      -Andrian

      • Irfan says:

        Hi,
        I don’t know too much of coding because i am beginner .
        I want to add AdvertisementPlugin to strobe media playback.
        I dowloaded the latest release of OSMF .
        I have imported Strobe Media Playback in Flash Builder and its building fine.
        I am using SDK Hero.
        But i donot know how to add AdvertisementPlugin to strobe media playback.
        I studied the above code but i don’t know where to update the files so that Advertisement will get played.
        Please let me know what to do.
        And
        What should i study in order to master OSMF.
        Thanks And Regards

      • Murugan says:

        Hi,

        I have downloaded latest strobe media 1.6, i deployed in my server and its working fine with osmf strobe media player, but in that some proerties are there all, ST398, ST397,ST398,ST399.. if i want to modify these property how to do that one, and midroll, overlay ads and all coming in predefined timing, i want to change the midroll, overlay timings. Pls help.

        • Irfan says:

          Hi Murugan,
          please can u let me know how to customize control bar of strobe media player. OR
          how to develop control bar to media player extended from OSMF
          I am in desperate need ,please let me know .
          Please help me out.Please
          Thanks And Regards

  3. Pingback: Advertisement Plugin in REOPS for Timeline Happiness | RealEyes Media

  4. sebaktiv says:

    The link to the plugin repository is broken

  5. David says:

    I tried to download the source but I cannot. I get an access denied on the SVN and this version doesn’t seem to be showing up using the http://opensource.adobe.com/svn/opensource/osmf.
    How can I get your source for this demo. I do not want to use the Strobe Media Playback, just the OSMF basic player.
    Thanks.