This is a message.

Mid roll advertising

Show in-stream videos upon user interaction

standalone demo

This demo begins with an image that is placed on top of the video screen. When the user clicks on the image an in-stream clip is played. After the in-stream clip finishes, the original clip resumes from its original position. During the time the in-stream clip is played, the image is hidden and the control bar's timeline is deactivated.

This kind of setup is sometimes referred to as a "mid-roll advertisement". This time it is done without any advertising plugins and all we need is just the "plain old" Flowplayer configuration.

Content Plugin

We use the content plugin as our advertisement. The image is set as its background image and we have defined an onClick handler that will start our in-stream clip.

content: {
url: "flowplayer.content-3.2.9.swf",
 
// specifies what happens when the ad is clicked
onClick: function() {
 
// play instream clip
this.getPlayer().play({
url: "KimAronson-TwentySeconds63617.flv",
duration: 5,
 
// customized controlbar settings during the instream clip
controls: {enabled: {scrubber: false}, backgroundColor: '#789'}
}, true);
 

// hide this ad while the instream clip is playing
this.fadeOut(2000);
},
 
// no background and no decorations
backgroundGradient: 'none', backgroundColor: 'transparent', border: 0,
 
// background image
backgroundImage: '/media/img/title/eye192.png',
 
// position and dimensions
bottom: 0, zIndex: 1, right: 0, width: 150, height: 100
}

JavaScript

Note: To play an RTMP clip in-stream with this method a dedicated RTMP plugin must be added to the plugin configuration with the mandatory label rtmpInstream.

Clip configuration

We want our content plugin to be visible again when the in-stream clip ends. This can be achieved with the onResume event which is triggered for the parent clip when the in-stream clip finishes. This onResume event is called for both parent and in-stream clips so we have to differentiate between those two clips. This can be achieved by checking the isInStream property:

clip: {
baseUrl: 'http://stream.flowplayer.org',
 
// onResume is triggered when the instream clip finishes
onResume: function(clip) {
 
// separate instream onResume from main clip's onResume event
if (!clip.isInStream) {
 
// display our ad again
this.getPlugin("content").fadeTo(0.9, 2000);
}
}
}

JavaScript