Examples
In this section:
Simple midroll
This example will show a linear at the 5th second of video.
<a id="player" style="display:block;width:400px;height:300px; margin-left: 150px;">
<img src="/media/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</a>
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
clip: {
url: "http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv",
ads: [{
time: 5, // make the overlay appear as soon as the video starts
request: {
adTagUrl:
'http://ad.doubleclick.net/pfadx/AngelaSite;' +
'foo=prodtest;sz=728x90;dcmt=text/html'
}
}]
},
plugins: {
controls: {
url: "flowplayer.controls-3.2.11.swf",
autoHide: "never" // we don't want the controlbar to hide
},
dfp: {
url: "/media/swf/flowplayer.dfp-flowplayer.org-1.6.5-dev.swf"
}
}
});
Simple overlay
This example will show an overlay ad as soon as the video starts
<a id="overlayq" style="display:block;width:400px;height:300px; margin-left: 150px;">
<img src="/media/img/home/flow_eye.jpg"
alt="Search engine friendly content" />
</a>
flowplayer("overlayq", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
clip: {
url: "http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv",
ads: [{
time: 0, // make the overlay appear as soon as the video starts
request: {
adTagUrl:
'http://ad.doubleclick.net/pfadx/AngelaSite;' +
'foo=prodtest;sz=728x90;dcmt=text/html'
}
}]
},
plugins: {
controls: {
url: "flowplayer.controls-3.2.11.swf",
autoHide: "never" // we don't want the controlbar to hide
},
dfp: {
url: "/media/swf/flowplayer.dfp-flowplayer.org-1.6.5-dev.swf"
}
}
});
Linear with companion
This example will show a preroll with a companion.
// Use googletag.defineSlot() to create ad slots.
// Attach the slot to the companion ads service.
//adSlot1 = googletag.defineSlot('/255/AngelaSite/', [728, 90]);
adSlot1 = googletag.defineSlot('/255/AngelaSite/', [300, 250]);
adSlot1.addService(googletag.companionAds());
// Enable companion ads service
googletag.enableServices();
<div class="clearfix">
<a id="simple"
style="display:block;width:440px;height:300px; margin-left: 15px;float:left"
href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
<img src="/media/img/home/flow_eye.jpg"
alt="Search engine friendly content"/>
</a>
<div style="float:left;width: 240px; height: 240px; border: 1px dotted black; margin-top: 30px">
<script>
// googletag.display('/255/AngelaSite/', [728, 90]);
googletag.display('/255/AngelaSite/', [300, 250]);
</script>
</div>
</div>
flowplayer("simple", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
clip: {
ads: [{
time: 0, // make the overlay appear as soon as the video starts
request: {
adTagUrl:
'http://ad.doubleclick.net/pfadx/' +
'N270.132652.1516607168321/B3442378.3;' +
'dcadv=1379578;sz=0x0;ord=3577745;dcmt=text/xml'
}
}]
},
plugins: {
controls: {
url: "flowplayer.controls-3.2.11.swf",
autoHide: "never" // we don't want the controlbar to hide
},
dfp: {
url: "/media/swf/flowplayer.dfp-flowplayer.org-1.6.5-dev.swf"
}
}
});
Multiple linear ads
This example will show a preroll and a midroll at 10 seconds.
flowplayer("multiple_demo", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
clip: {
url: "http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv",
ads: [{
time: 0, // make the ad to start before the content
request: {
adTagUrl:
"http://ad.doubleclick.net/pfadx/AngelaSite;" +
"foo=prodtest;sz=728x90;dcmt=text/html"
}
},
{
time: 10, // show the ad at 10 seconds
request: {
adTagUrl:
"http://ad.doubleclick.net/pfadx/AngelaSite;" +
"foo=prodtest;sz=728x90;dcmt=text/html"
}
}]
},
plugins: {
controls: {
url: "flowplayer.controls-3.2.11.swf",
autoHide: "never" // we don't want the controlbar to hide
},
dfp: {
url: "/media/swf/flowplayer.dfp-flowplayer.org-1.6.5-dev.swf"
}
}
});