AdSense for Flowplayer

.flowplayer {
background-color: #fff;
background-image: url("//flowplayer.org/media/img/logo-blue.png");
-webkit-background-size: 95%;
-moz-background-size: 95%;
background-size: 95%;
-webkit-box-shadow: 0 0 20px #b8b8b8;
-moz-box-shadow: 0 0 20px #b8b8b8;
box-shadow: 0 0 20px #b8b8b8;
font-size: 12px;
}

CSS
<div id="image_text" class="flowplayer"></div>
 
<!-- install the player with ima AdSense configuration -->
<script>
flowplayer("#image_text", {
// configure the AdSense plugin for this player
ima: {
// must be set when testing your installation, set to false in production
adtest: true,
// make the Google robots crawl the current page
description_url: location.href,
 
// adverts configuration
ads: [{
// mandatory: schedule ad time
// here: 3 seconds into the video
time: 3,
 
// request an advert of type image or text type
ad_type: "image_text"
}]
},
 
splash: true,
ratio: 5/12,
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/bauhaus.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/bauhaus.mp4" }
]
}
});
</script>

HTML

view standalone page | VIDEO tag based alternative

Prerequisites

Sign up to the Flowplayer AdSense partnership program to obtain your own AdSense plugin.

Load the required IMA SDK and ASF JavaScripts in the HEAD section of your page:

<!-- player skin of your choice -->
<link rel="stylesheet" href="//releases.flowplayer.org/7.0.3/skin/skin.css">
 
<!-- jQuery is required for video tag based setups only -->
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Flowplayer -->
<script src="//releases.flowplayer.org/7.0.3/flowplayer.min.js"></script>
 
<!-- load the AdSense assets after the Flowplayer assets -->
<!-- the IMA SDK -->
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<!-- your AdSense plugin (at your server) -->
<script
src="//releases.flowplayer.org/asf/flowplayer.org/2.1.6/asf.min.js">
</script>

HTML

  • Important The IMA SDK must be loaded exactly as above, not from your own server.

Flowplayer 6.x is required since version v1.1.0 of the plugin.

Plugin initialization

The plugin is automatically loaded into each player unless disabled explicitly.

Pure JavaScript

The above example is a JavaScript installation into an empty container element:

<div id="image_text" class="flowplayer"></div>
 
<!-- install the player with ima AdSense configuration -->
<script>
flowplayer("#image_text", {
// configure the AdSense plugin for this player
ima: {
// must be set when testing your installation, set to false in production
adtest: true,
// make the Google robots crawl the current page
description_url: location.href,
 
// adverts configuration
ads: [{
// mandatory: schedule ad time
// here: 3 seconds into the video
time: 3,
 
// request an advert of type image or text type
ad_type: "image_text"
}]
},
 
splash: true,
ratio: 5/12,
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/bauhaus.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/bauhaus.mp4" }
]
}
});
</script>

HTML

Video tag based

flowplayer_ima.conf

The plugin provides the flowplayer_ima.conf() command for AdSense configuration of VIDEO tag based installations. As nested JSON syntax would be too complex to translate into HTML data attributes this method can be used in an inline SCRIPT tag instead. Especially useful with automatic installations where you still want to address specific players.

Automatic installation

The above example would look roughly like this in an automatic installation:

<div class="flowplayer is-splash"
id="image_text" data-ratio="0.4167">
 
<!-- configure AdSense plugin for this player inline -->
<script>
// use special method instead of data attributes
flowplayer_ima.conf({
// set adtest to false in production
adtest: true,
description_url: location.href,
ads: [{
time: 3,
ad_type: "image_text"
}]
});
</script>
 
<video>
<source type="application/x-mpegurl"
src="//edge.flowplayer.org/bauhaus.m3u8">
<source type="video/mp4"
src="//edge.flowplayer.org/bauhaus.mp4">
</video>
 
</div>

HTML

Manual installation with jQuery

When installing into jQuery-selected container elements the plugin can be set up either way:

  • by specifying ima in the argument to the flowplayer() jQuery plugin or
  • by scripting flowplayer_ima.conf() inside the container

Plugin configuration

The plugin configuration is simple, flexible and powerful. All settings are specified in the ima (Interactive Media Adverts) configuration object. ima can be specified

in ascending order of precedence. Higher level configuration persists, unless overridden.

optiontypedescriptionsyntax
imaobjectAdSense configuration on this level (global, player, clip).JSON
HTML data attribute equivalent: as argument to a flowplayer_ima.conf() inline script
imabooleanIf set to false disables the plugin for a specific player.JSON or HTML data attribute

Configuration options

These are the top-level plugin configuration options:

optiontypedescription
adsarrayA list of advert objects describing timed advert requests, one per advert, for one feature clip.
adsnullSetting ads to null on the clip level explicitly prevents adverts for this clip. Useful to override defaults given on a higher level or inside the playlist array.
playlistarrayA list of clip level ima configuration objects, corresponding to each clip of a playlist.
Handy for VIDEO tag based playlist installations, as alternative to inlining flowplayer_ima.conf into each playlist item.
redirectsintegerMaximum number of redirects to try before ad load is aborted.
Default value: 4 - higher values may affect performance.
RedirectsintegerDeprecated. Use redirects.
showTitlebooleanv2.0.1 For Flowplayer version 6.x only. Whether to display official linear advert title while advert is shown.
Default value: false.

Ads options

Each object of an ads array accepts the following options to compose an advert request:

optiontypedescription
timeintegerWhere the advert should be positioned.
In terms of a video advert:
0, pre-roll: before the feature begins.
Positive int, mid-roll: at int seconds into feature.
-1, post-roll: after the feature finishes.
Setting time is mandatory for an ad request to take effect.
Note: time cannot be set outside an ads list.
ad_typestringThe type of advert to show.
Accepts the following values:
image: image overlay
skippablevideo: trueview skippable video, only allowed at pre-roll position
standardvideo: linear video advert
text: text overlay
Types can be combined by concatenating them with underscores.
Shorthand:
video: standardvideo_skippablevideo
Default value: video_image_text
adsafestringHow adverts are filtered by their content.
Accepted values:
high: family safe (default)
medium: allows also non-family-safe ads (gambling, prescription drugs), but no adult content
adtestbooleanSet this to true while testing your installation.
Set to false in production.
Accepts also String values "on"/"off"
cust_ageintegerThe prefered age target group of the advert.
Accepts an exact value, and also an age group as per AdWord docs on demographic targeting.
cust_genderintegerThe prefered gender target group of the advert, as per AdWord docs on demographic targeting.
Accepted values:
1: male
2: female
description_urlstringFull URL of a HTML page describing the feature content.
Default value: site given on signup for our AdSense program.
Giving specific locations is recommended.
hlstringThe desired language of the ad content.
Accepts two or three letter language code.
max_ad_durationintegerMaximum video advert length in milliseconds.
Default value: 100 seconds.
min_ad_durationintegerMinimum video advert length in milliseconds.
Default value: 0 seconds.
overlaystring / booleanWhether full-slot graphical adverts are allowed.
Accepted values are:
"any" or 0: Overlay adverts of any size are allowed. This is the default.
"bottomThird" or 1: Only bottom-third sized non-linear overlays are eligible.
sdmaxintegerMaximum skippable video advert length in milliseconds.
Default value: unlimited.

It is recommended to create metadata pages for each video and supply them as description_url. Please check the best practices and optimization tips.

Global JavaScript configuration

ima can be configured in the global configuration for all players on the page.

Example:

// set the description url for all adverts on this page
// to the current page
flowplayer.conf.ima = {
description_url: location.href
};

JavaScript

Global options

The following option customizes all players on the page and should only be set once in the global configuration:

optiontypedescription
enableFlashAdsbooleanv2.1.6 Flash adverts are disabled by default. Setting this to true may lead to erratic behavior. Only use this as a measure of last resort, if your publisher has not upgraded to HTML5 compatible adverts yet, while urging them to do so.
localestringThe language used by the IMA SDK for UI elements: can be any 2 letter code.
LocalestringDeprecated. Use locale.

Example:

flowplayer.conf = {
// other global player settings go here
ima: {
// brazilian interface for ads
locale: "pt_br"
}
};

JavaScript

Disabling the plugin

The plugin can be disabled for specific players by setting ima to false in the player configuration, or adding the the data-ima="false" attribute to the player container element.

Embed code with adverts

To offer embed code which will show adverts on the embedding site you must set up iframe embedding. Try it with this player. Its embed code will show an iframe of this page. The result can be found here.

Wordpress

If you are using our Wordpress plugin, you can upload the asf plugin assests, specify the paths in the Worpdress plugin settings, and configure ad type and time in the video settings.

CSS classes

The plugin assigns the following CSS class names to the container element as state indicators when adverts are shown:

  • is-ad-visible while an advert is shown
  • is-ad-nonlinear while a non-linear (bottom third overlay) advert is shown

JavaScript API

The plugin provides listeners to all events of the IMA SDK and and easy interface to the AdError event.

Ad events

All events give access to the advert via the third argument given in the callback. Information on the ad can be retrieved using the IMA methods listed here.

Example:

flowplayer(function (api) {
// listen to the Ad LOADED event
api.on("ima_ad_loaded", function (e, api, ad) {
// is this a linear ad?
console.info(ad.isLinear());
});
});

JavaScript

As per above the notation of Flowplayer ad event types (names) is:

ima_ad_{lower cased IMA SDK ad event type}

Ad Error

The third argument of the ima_ad_error event gives direct access to the error message and error code:

flowplayer(function (api) {
api.on("ima_ad_error", function (e, api, err) {
console.info("Ad error message: " + err.message);
console.info("Ad error code: " + err.code);
});
});

JavaScript

Debugging

To turn on the IMA SDK's debug logging to the browser console load its debug version ima3_debug.js instead of ima3.js:

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_debug.js"></script>

HTML

Known constraints

  • Does not work with manual jQuery installations into multiple containers using a class selector
  • Internet Explorer 9 and below is not supported by the Google IMA API
  • The plugin only supports the IMA3 HTML5 API
  • the Google IMA3 SDK currently does not support skippable ads on iOS

Rules

  • you must have copyright / licenses for your streams

  • Skippable video ads may only be served in the pre-roll positon (time: 0) or in mid-rolls, provided the duration of the feature exceeds the sum duration of video ads and the feature is at least 10 minutes.

  • To show a video advert the feature must have a duration of at least 1 minute.
  • To show a non-linear advert the feature must have a duration of at least 30 seconds.
  • For further details check your site and setup for compliance with the Google Adsense for Video policies.
  • If you're in the EU, make sure to comply with the Google / EU user consent policy

As a publisher, you receive 70% of the Google payout. You will be paid monthly if your accumulated revenue exceeds EUR 100.

Note: Google pays us at the end of a month for the previous month and additionally reserves the right to chargeback within 60 days in case of invalid traffic, so there will be a 60 day delay in payout at the end of a monthly period. If you want to use your own video ad network or your own ad server, you can use our VAST plugin.

Video advert examples

Mid-roll

<div id="standardvideo" class="flowplayer"></div>
 
<!-- install the player with ima AdSense configuration -->
<script>
flowplayer("#standardvideo", {
// configure the AdSense plugin for this player
ima: {
// must be set when testing your installation, set to false in production
adtest: true,
// make the Google robots crawl the current page
description_url: location.href,
 
// adverts configuration
ads: [{
// mandatory: schedule ad time
// here: 3 seconds into the video
time: 3,
 
// maximum duration of video ad
max_ad_duration: 40000,
// request an advert of type video ads
// note: features must be at least 1 minute long for video adverts
// so be careful when setting this globally
ad_type: "standardvideo"
}]
},
 
splash: true,
ratio: 9/16,
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/drive.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/drive.mp4" }
]
}
});
</script>

HTML

view standalone page | VIDEO tag based alternative

Skippable pre-roll

<div id="skippablevideo" class="flowplayer"></div>
 
<!-- install the player with ima AdSense configuration -->
<script>
flowplayer("#skippablevideo", {
// configure the AdSense plugin for this player
ima: {
// must be set when testing your installation, set to false in production
adtest: true,
// make the Google robots crawl the current page
description_url: location.href,
 
// adverts configuration
ads: [{
// mandatory: schedule ad time
// skippable video must be pre-roll
time: 0,
 
// maximum duration of skippable ad
sdmax: 60000,
// request an advert of type youtube like skippable ads
// note: features must be at least 1 minute long for video adverts
// so be careful when setting this globally
ad_type: "skippablevideo"
}]
},
 
splash: true,
ratio: 9/16,
clip: {
sources: [
{ type: "application/x-mpegurl",
src: "//edge.flowplayer.org/FlowplayerHTML5forWordPress.m3u8" },
{ type: "video/mp4",
src: "//edge.flowplayer.org/FlowplayerHTML5forWordPress.mp4" }
]
}
});
</script>

HTML

view standalone page | alternative using global configuration

Migration from version 1.1.x

  • The plugin does not require the loading of a CSS stylesheet

Migration from version 1.0.x

  • The plugin requires Flowplayer version 6.x
  • The plugin does not depend on the jQuery library anymore
  • The plugin does not need to be initialized explicitly anymore
  • The configuration is less complex and slimmed down
  • The adsense, request, and no_ads parameters are gone
  • Simply specify an ads array inside an ima configuration object and possibly some common options on a higher configuration level