Quantcast
Channel: Open Source Media Framework Blog » Andrian Cucu
Viewing all articles
Browse latest Browse all 3

Stage Video and Ad Insertion Plug-In for OSMF

$
0
0

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


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images