Player wrapper that maps properties and methods of the current major version to the previous version.
Note: the current is mapped to version 5.3.1 and therefore the following setup documentation is still valid.
Latest edition of Out-stream player can be found at:
https://sdk.smartclip.net/outstreamplayer/
The following example will play automatically when scrolled into visible area.
let _outstreamPlayer = new OutstreamPlayer('#targetelement',{
adRequest:'//adserver.com/creatives/vast.xml?[CACHEBUSTING]'
});
Where #targetelement can be any CSS selector, if multiple elements are found only the first is used.
It'll automatically play when it's scrolled into view.
ObjectAd-verification vendors that rely on the Open Measurement (OM) Interface Definition API are enabled by default. The following properties may be adjusted to enable selected verification vendors only and to limit the measurement session execution time.
More information on OMID and OM SDK available at: [IAB]
disabled : Boolean - Ad verification is enabled by default. Disable carefully.
Disabling OM should be limited to two situations: If the OM integration is interfering with your site (app), or if there is a bug in the integration that generates bad OM data.
vendorWhitelist : [ 'Array' ].<string> - List of accepted AdVerification vendors (whitelist).
Each specified String has to represent an unique identifier that can be found within the verification code resource URI,
most likely the domain name.
If omitted, the add-on tries to load verification code from each vendor.
sessionCleanupDelay : number - Time value in seconds that specifies a delay for closing the current
measurement session after the ad has finished playback.
Default is 3 seconds.
The verification code should have sufficient time to ensure any measurement and reporting is completed before cleaning up, in order to minimize discrepancies.
accessMode : String - Execution mode of the verification script. Needs to be either limited, domain,
creative or full.
Defaulting to full if omitted.
serviceWindow : Window - Optional. The DOM context into which the OM SDK Service Script was loaded.
The value becomes forwarded to the OM SDK Context setServiceWindow method as described in the [OM SDK for Web Video]
documentation. Defaulting to window.top if omitted.
autoplay: false
Sets whether the player is automatically started when it reached the visibilityThreshold.
The default is true.
debug: true
Logging to the browser console is enabled by setting debug: true, this will give you runtime information of the
underlying ad framework and the player itself.
Default is false to keep your console clean.
desiredBitrate: 800
You can specify a target bitrate for the creative, higher values will increase video quality but will cost bandwidth.
Value is given in kpbs.
Default is 700.
endingScreen: false
By default the player will not close, but show the ending screen when an advertisement is complete (last frame of the
ad and a replay button, if an advertisment comes with an endcard that will be shown).
If set to false the player will collapse. Some VPAID creatives can cause issues with ending screen or replay
behaviour.
Default is true.
maxAdWidth: 960
The player will fill the whole width of the element it gets, to have it narrower a different maximum width can be
defined in pixels.
Default is 800.
minAdWidth: 180
If the visible area is narrower than this size, no ad will be requested. The value is given in pixels.
Default is 280.
prefetching: true
When turned off the player will only start to request the ad when it's scrolled into the visible area, this will
cause visible lagging as the response has to finish loading before the player will open.
The default is true.
removePlayerOnCapped: true
By default all generated OutStreamPlayer HTML is deleted from the DOM; when there's no endingScreen, endCard or
creative defined.
Default id true.
Only consider using this flag, if the startOpen default has been changed as well.
skipOffset: 0
In order to enable skipping from the start set the delay to 0, to show the skip button after 5 seconds set it to 5.
Setting a general skipOffset is discouraged.
Note that linear creatives carrying a skipsoffet attribute will override the general player setting.
By default the player does not set a general skipoffset, so a skip button will only be shown,
if an ad has a specific skipoffset attached.
startOpen: false
Per default the player will start fully expanded, if a valid ad can be played. Setting this option to false will
trigger an expand animation instead once the player comes into view.
Default is true.
title: 'Advert [remainingTime]'
The player can show a freely definable text, a macro [remainingTime] in this string will be replaced with the
remaining play time of the ad in seconds.
BooleanDefines whether the trackers impression and creativeView are requested at the time a video ad is loaded
or when the video player actually starts playing (start, 0%). The difference is most noticeable with video players
or browsers that prevent autoplay without user interaction. The impression and creative view trackers are requested
immediately, while the start tracker is requested after a delay, depending on when playback starts.
Defaulting to false if omitted.
BooleanDefines whether to track all VAST progress trackers (start, firstQuartile, midpoint, thirdQuartile
and complete), regardless of whether some of them were somehow skipped or to just request VAST progress trackers
that were actually triggered by a matching playhead update. Possible "skip" use cases are the user seeks over one or
multiple progress points, or the timeupdate interval from the video player is too long.
Defaulting to false if omitted.
visibilityThreshold: 30
Defines the percentage of the player which has to be in the visible area to play and pause the advertisment.
The default is 50.
volume: 0.5
Defines volume that is set after unmuting the player, as default it has full loudness with 1.0.
A few selected options can be set through the extension node in the ad tag.
<Extensions>
<Extension name="SmartPlayConfig">
<autoplay enabled="false"/>
<visibilityThreshold value="25"/>
</Extension>
</Extensions>
Do not have to be set, but work similar to callbacks in the previous Out-stream player. The Start and End callbacks
are always fired, Empty (onCapped) is added before End if the VAST response does not contain an advertisement.
Parameter api is usually not passed outside, mostly remains empty, but will provide VAST Extension details.
element is the DOM element where the player initialized. onClickThruCallback does not carry any parameters.
onEventCallback fires at certain key points during the player's and ad's lifetime (most regular VAST tracking),
starting with AdTagParsed ending with AdSlotComplete.
onCappedCallback: function onCappedCallback(api, element) {
console.log('### onCappedCallback ###');
},
onStartCallback: function onStartCallback(api, element) {
console.log('### onStartCallback ###', api, element);
},
onEndCallback: function onEndCallback(api, element) {
console.log('### onEndCallback ###');
},
onEventCallback: function onEventCallback(api, element, event) {
console.log('### ### onEventCallback', api, element, event);
},
onClickThruCallback: function onClickThruCallback() {
console.log('### onClickThruCallback ###');
}
Using the full configuration options and callbacks, an extended configuration could be as the following example:
let _outstreamPlayer = new OutstreamPlayer('#targetelement', {
adRequest:'https://ad.sxp.smartclip.net/select?type=vast4&s=testadvertiser.dynamic.adpods&sz=pre&test=newlogo&optout=[optout]&consent=[consent]&ang_ua=[UserAgent]&ang_ip=[IP]&ang_ref=[referrer]&rnd=[CACHEBUSTING]',
debug: true,
title: 'The ad ends in [remainingTime] seconds',
skipOffset: 3, /* will be overridden by creative skipoffset */
volume: 0.9,
desiredBitrate: 1234,
//-- end startup config
//*/
onCappedCallback: function onCappedCallback(api, element) {
console.log('%c Callback: EMPTY', 'background: #34495e; color: #ecf0f1; font-weight:bold;', api, element);
},
onStartCallback: function onStartCallback(api, element) {
console.log('%c Callback: START', 'background: #34495e; color: #ecf0f1; font-weight:bold;', api, element);
},
onEndCallback: function onEndCallback(api, element) {
console.log('%c Callback: END', 'background: #34495e; color: #ecf0f1; font-weight:bold;', api, element);
},
onEventCallback: function onEventCallback(api, element, event) {
console.log('%c Callback: EVENT >> ' + event.type, 'background: #34495e; color: #ecf0f1; font-weight:bold;', api, element, event);
// get extension if they're found in the ad tag
if(event.type === "ExtensionsDetected"){
console.log('%c Callback: EVENT >> ' + event.type, 'background: #34495e; color: #ecf0f1; font-weight:bold; Extensions:', api.extensions);
}
},
onClickThruCallback: function onClickThruCallback() {
console.log('%c Callback: CLICK', 'background: #34495e; color: #ecf0f1; font-weight:bold;');
}
});