Scheduling ads

Scheduling an ad is easy with the DFP plugin: set the adTagUrl and you are done. Good scheduling of ads is key to maximize your revenue while keeping an excellent user experience.

Flowplayer 5 Flowplayer Flash

<head/> setup

In the head section of your HTML page, you need this snippet


<!-- include the Google IMA ad engine -->
<script type="text/javascript" src="http://s0.2mdn.net/instream/html5/ima3.js"></script>

<!-- include the DFP plugin CSS -->
<link rel="stylesheet" type="text/css" href="fp-ima.min.css" />

<!-- include the plugin javascript -->
<script type="text/javascript" src="fp-ima.min.js"></script>

The ads controls skin can be customized through regular CSS.

<body/> setup

In previous version, you needed to add some javascript at the end of your page to instanciate the plugin. This is not needed anymore.

Plugin configuration setup with Flowplayer 5 automatic setup

You place the ads configuration for your video clip directly inside the HTML of the player.

The configuration itself is described in JSON. Detailed configuration is explained later on.

For each player you need this HTML snippet. Replace the configuration placeholder by your own configuration.


<div class="flowplayer">
	<script>
		flowplayer_ima.conf({
			// your ads configuration here
		});
	</script>
	<video>...</video>
</div>

Programatic plugin configuration - manual Flowplayer 5 setup

If you are creating Flowplayer 5 programatically, you can specify the plugin configuration directly in Flowplayer's configuration.


<div id="myPlayer" class="flowplayer">
</div>

<script>
	// run script after document is ready
    $(function () {
        var playerElem = $("#myPlayer");
        // create Flowplayer
        playerElem.flowplayer({
            splash: true,
            playlist : [
                [
                    {webm: "http://stream.flowplayer.org/bauhaus/624x260.webm"},
                    {mp4: "http://stream.flowplayer.org/bauhaus/624x260.mp4"}
                ]
            ],

            // this is where you define your ad configuration.
            // it's the same object as you would pass to flowplayer_ima.conf();
            advertising: {
            	ads: [{ 
                    time : 0, 
                    adTagUrl : "<?= DEMO_AD_TAG_URL_LINEAR ?>" 
                }]
            }
        });
    });
</script>

Ads scheduling

You have 2 options to configure your ads scheduling

  • Automatic ads scheduling through Ad Rules
  • Manual ads scheduling by specifying a list of clips

Scheduling ads with Ad Rules

The AdRules feature from dfp is a new feature from newest google's SDK IMA3. It allows you to create your ad logic directly into your dfp dashboard. Once you've created it, just copy your adTagUrl and use it with our plugin.

Just specify the ad tag as in the following configuration snippet


// automatic ads scheduling with ad rules
adRules : "your-ad-tag-by-adrules"

Scheduling ads manually

You have to specify a list of ads. For each ad, you need its ad tag and the time when it will be shown.

Set the time to 0 for a preroll and -1 for a postroll. For a midroll just set its time of appearance in seconds.

Any combination is valid, as shown is the following configuration snippet


// manual ads scheduling
ads : [
	{
		time : 0, // this is a preroll
		adTagUrl : "your-ad-tag"
	},
	{
		time : 10, // this is a midroll at 10 seconds
		adTagUrl : "your-ad-tag"
	},
	{
		time : 60, // this is a midroll at 60 seconds
		adTagUrl : "your-ad-tag"
	},
	{
		time : -1, // this is a postroll
		adTagUrl : "your-ad-tag"
	}
]

Scheduling ads with a playlist

When using playlists, instead of supplying an array of ads for a clip, you need to provide an array of array of ads.


ads : [
		// ads for first clip
		[{
			time : 0, // this is a preroll
			adTagUrl : "your-ad-tag"
		},
		{
			time : 10, // this is a midroll at 10 seconds
			adTagUrl : "your-ad-tag"
		}],
		// ads for second clip
		[{
			time : 60, // this is a midroll at 60 seconds
			adTagUrl : "your-ad-tag"
		},
		{
			time : -1, // this is a postroll
			adTagUrl : "your-ad-tag"
		}]
	]

Supplying a platform ads configuration

Your videos are nowadays displayed on a variety of platforms : desktop computers, tablets, phablets, phones. However, all those platforms don't have the same capabilites.

Some have Flash installed, allowing you to display Rich Media ads and other VPAID ads.
Some can play videos "inline", within the player container you defined, such as the majority of tablets.
Finally, several phones can only play the video in native fullscreen, with native controls where overlay or skipable ads can't be displayed.

In order to maximize your revenues, you can specify a different ad tag depending on the user's device capability : one if Flash is installed, one if inline playing is possible and a last one for devices where video playback is done through the native video player.


ads: [{ 
	time : 0, 
	adTagUrl : {
		flash: "your-tag-requiring-flash",
		html5_inline: "your-tag-requiring-overlaying-content",
		html5_native: "your-simple-linear-tag"
	}
}]

You don't need to specify all tags, the plugin is doing defaulting in that order : flash > html5_inline > html5_native.

Note : to use a Flash ad tag (and thus VPAID and VAST 3.0 tags), you need to purchase the DFP plugin for Flowplayer 5 : HTML5 + Flash technologies.

When purchasing the DFP plugin for Flowplayer : HTML5 only technology, only HTML5 compliant tags will work since the plugin does not integrate the Flash ad rendering engine.

Putting it all together

This is a minimalist yet fully working HTML sample for a preroll ad.


<!doctype html>
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
		<link rel="stylesheet" type="text/css" href="http://releases.flowplayer.org/5.4.6/skin/minimalist.css" />
		<script type="text/javascript" src="http://releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
		<script type="text/javascript" src="http://s0.2mdn.net/instream/html5/ima3.js"></script>
		<link rel="stylesheet" type="text/css" href="fp-ima.min.css" />
		<script type="text/javascript" src="fp-ima.min.js"></script>
		<style>
			#myPlayer {
				width: 624px;
				height: 260px;
			}
		</style>
	</head>

	<body>
		<div id="myPlayer" class="flowplayer is-splash" style="background-image: url('http://flowplayer.org/media/img/demos/minimalist.jpg');">
			<script>
				bigsool.conf({
					ads: [
						{
							time : 0,
							adTagUrl : "http://pubads.g.doubleclick.net/gampad/ads?sz=640x360&amp;iu=/6062/iab_vast_samples/skippable&amp;ciu_szs=300x250,728x90&amp;impl=s&amp;gdfp_req=1&amp;env=vp&amp;output=xml_vast2&amp;unviewed_position_start=1&amp;url=[referrer_url]&amp;correlator=[timestamp]"
						}
					]
				});
			</script>
			<video>
				<source type="video/mp4" src="http://stream.flowplayer.org/bauhaus/624x260.mp4"></source>
				<source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm"></source>
			</video>
		</div>

		<script type="text/javascript">
			flowplayer(function(playerApi, playerElement) {
				bigsool.createDfpForFlowplayer(playerApi, playerElement);
			});
		</script>
	</body>
</html>

Manual installation

Flowplayer and the DFP plugin can also be created dynamically directly from JavaScript.

Using this manual installation method, you can install the player and ads with JavaScript only, with just providing an empty HTML div tag on your page.


<!doctype html>
<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        <script type="text/javascript" src="http://releases.flowplayer.org/5.4.6/flowplayer.js"></script>
		<link rel="stylesheet" type="text/css" href="http://releases.flowplayer.org/5.4.6/skin/minimalist.css" />
		<script type="text/javascript" src="http://s0.2mdn.net/instream/html5/ima3.js"></script>
		<link rel="stylesheet" type="text/css" href="fp-ima.min.css" />
		<script type="text/javascript" src="fp-ima.min.js"></script>
        <style>
			#myPlayer {
				width: 624px;
				height: 260px;
			}
		</style>
	</head>
	
	<body>
		<div id="myPlayer" style="background-image: url('http://flowplayer.org/media/img/demos/minimalist.jpg');"></div>

		<script type="text/javascript">
            // run script after document is ready
            $(function () {
                var playerElem = $("#myPlayer");
                // create Flowplayer
                playerElem.flowplayer({
                    splash: true,
                    playlist : [
                        [
                            {mp4: "http://stream.flowplayer.org/bauhaus/624x260.mp4"},
                            {webm: "http://stream.flowplayer.org/bauhaus/624x260.webm"}
                        ]
                    ]
                });
                var playerApi = playerElem.data("flowplayer");
                // configure dfp
                flowplayer_ima.create(playerApi, playerElem, {
	                ads: [
                        { time : 0, adTagUrl : "http://pubads.g.doubleclick.net/gampad/ads?sz=640x360&amp;iu=/6062/iab_vast_samples/skippable&amp;ciu_szs=300x250,728x90&amp;impl=s&amp;gdfp_req=1&amp;env=vp&amp;output=xml_vast2&amp;unviewed_position_start=1&amp;url=[referrer_url]&amp;correlator=[timestamp]"},
	                ]
                });
            });
		</script>
	</body>
</html>

Linear remaining time style configuration

When a linear ad is beeing displayed, a box appears and shows the ad remaining time.

By default, the box simply displays the ad remaining time, with a minus sign. Example: -00:15. Its style can be customized, such as adding a text message, changing colors, etc. Make sure to keep the message small in order to have a pretty display.

You can customize the style by providing your own CSS. Your CSS must be included AFTER this plugin CSS (fp-ima.min.css).

Example 1: Your video will resume in 00:15


.flowplayer .fp-ui .ad-time .ad-remaining::before {
	content:'';
}
.flowplayer .fp-ui .ad-time::before {
	color:#bbb;
	content:'Your video will resume in';
	padding-right:8px;
}

Example 2: Advertisement (-00:15)


.flowplayer .fp-ui .ad-time::before,
.flowplayer .fp-ui .ad-time::after {
	color:#bbb;
}
.flowplayer .fp-ui .ad-time::before {
	content:'Advertisement (';
}
.flowplayer .fp-ui .ad-time::after {
	content:')';
}