OSMF Reference Plug-in Demo for Advertisements

This reference plug-in makes it easy to add simple advertisement experiences to an OSMF-based video player.

It provides sample code for both linear and non-linear ad insertions, and it can serve as a starting point for plug-ins that are required to integrate with advertisement backends.

Alternative content

Interactive Ad Controls

Display a non-liniar advertisement (overlay ad)
Play a linear advertisement (mid-roll ad)

Sample Composition Scenarios

Enable Stage Video (the changed value will be used only after selecting a new scenario)
Pre-roll, mid-roll, overlay, post-roll
ST-397 - GPU Decoding issue on stagevideo: Win7, Flash Player version WIN 10,2,152,26 (debug)
FIXED! - ST-398 - Crash when playing HDS content in an advertisement scenario (pre roll)
ST-399 - StageVideo Crash when removing the video content from the Stage before going into full screen and adding it back once the full screen transition has finished
RTMP Dynamic Streaming
HDS Picture in Picture

Demo Outline

You can select from a set of predefined advertisement scenarios and you can insert either linear or overlay ads using the provided interactive controls.

All the advertisements except the pre-rolls are being pre-buffered, so you should experience seamless playback for mid-rolls. (post-rolls need to be pre-buffered as well, but pre-buffering for post-rolls is not implemented yet).

Take a closer look at the Stage Video instance count which is being displayed in the info overlay (top-left corner). On desktops you should see 4 available StageVideo instances and you should see them being picked up as you add more overlay ads.


The Advertisement Reference plug-in is intended to to demonstrate best practices related to ad insertion in OSMF-based players.

The plug-in provides both a JavaScript based API as well as a very simple configuration API (flashvars) which can be used when embedding the player.

You can view the source to learn about how the current configuration and JavaScript API work.

FlashVars configuration

To activate the plug-in, you simply load the plug-in as normal, but add a reference to the swf:

        plugin_ads: "AdvertisementPlugin.swf"

For setting the pre-roll, mid-roll and the post-roll ads, all you need is to add the paths to the ads and the time when the mid-roll ad or the overlay ad needs to be displayed.

Note that this plug-in can be configured to load only one mid-roll ad and one overlay ad using the flashvars configuration. Feel free to extend it as needed, or to use the JavaScript API described below.

		ads_preroll: "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv",
		ads_postroll: "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv",
		ads_midroll: "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv",
		ads_midrollTime: 20,
		ads_overlay: "http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv",
		ads_overlayTime: 25

The JavaScript API

For using the JavaScript API exposed by the plugin you need to get the reference to the StrobeMediaPlayback instance and simply interact with the plugin.

The following snippet will insert an overlay ad, at some random position.

		player.strobeMediaPlayback.displayNonLiniarAd (
			"http://gcdn.2mdn.net/MotifFiles/html/1379578/PID_938961_1237818260000_women.flv", {
				right: options.width/2 * Math.random(),
				bottom: options.height/2 * Math.random(),
				scaleMode: "none"});

The following snippet will interrupt the current media playback and will play a linear ad instead:


Known Limitations

  1. Strobe Media Playback needs to disable the scrubBar while the linear ads are being played back. (not implemented yet)
  2. Strobe Media Playback needs to display a widget during linear ad playback. This can be something like this: "Advertisement. Video will resume in 10 seconds..."
  3. The plugin does not handle the ordering (depth) of the advertisements at this point. While using the plugin you should be aware that the advertisement that is added last will be added on top of the other medias/ads that are being currently played.
  4. With the current implementation of this plug-in, it should be pretty simple to create any kind of interactive ads you can imagine. This is just a start.