Mid roll advertising
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: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.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
}
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);
}
}
}