Mid-roll advertising setup Scripting - Demo 3 / 7
Introduction
This demo shows you an image that is placed on top of the video screen. When the user clicks on the image an instream clip is played. After the instream clip finishes, the original clip resumes from it's original position. During the time the instream clip is played, the image is hidden and the controlbar'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.
Flowplayer configuration
The configuration consists of two parts: the content plugin-based advertisement and the clip's configuration.
Content plugin
We use the content plugin as our advertisement. The image is set as it's background image and we have defined an onClick handler that will start our instream clip.
content: {
url: 'flowplayer.content-3.2.0.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 instream clip
controls: {enabled: {scrubber: false}, backgroundColor: '#789'}
}, true);
// hide this ad while the instream clip is playing
this.fadeOut(2000);
},
// no background and decorations
backgroundGradient: 'none', backgroundColor: 'transparent', border: 0,
// background image
backgroundImage: '/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 instream clip ends. This can be achieved with the onResume event which is triggered for the parent clip when the instream clip finishes. This onResume event is called for both parent and instream clips so we have to differentiate between those two clips. This can be achieved by checking the isInStream property:
clip: {
baseUrl: 'http://blip.tv/file/get',
// 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);
}
}
}