> Documentation-Index > Implementation Guide
Implementation Guideline
This final task can be broken down into a one time action and a recurring job.
Glossar
An Ad Slot describes a virtual "advertisement area" that is filled with ads
as specified in an Ad Break definition and that is subject to the current environment conditions.
The Ad Break is an Object that defines one ore multiple ads for the upcoming Ad Slot.
Initialize one instance of the smartclientcore.
--- js/main.js
+++ js/main.js
window.playerAPI = document.getElementById('myvid');
initHBBTV = function () {
//...
}
initHBBTV();
adController = new AdController();
adController.createPlayerFacade(window.playerAPI);
+ adController.initSmartClientCore();
Extract from the main.js, line 92 ff. :: The sample app is being prepared for advertising.
The smartclientcore returns a Publisher API for the specified player facade. The API can be used with the entire content video.
/**
* Connects the video player and advertising logic. As a result we get the PublisherAPI for the current session.
* Also see `vendor_modules/smartclip/docs/plugin-static-api.md`
* @returns {void}
*/
AdController.prototype.initSmartClientCore = function () {
var globalConfig = {
// Most SmartTVs do not support XHR requests.
adRequestMethod: smartclientcore.AD_REQUEST_METHOD.JSONP
// ... other properties remain unchanged
};
// NOTE: The Promises polyfill callbacks do not remember the local scope.
// The local scope of `this` becomes the global scope (`window` object).
var that = this;
window.smartclientcore.connect(this.facade).setup(globalConfig).then(function (api) {
// This is our advertising interface for the current session...
// API specs: `vendor_modules/smartclip/docs/PublisherAPI.md`
that.publisherAPI = api;
// NOTE: this.publisherAPI is undefined
}, function (failure) {
console.error('smartclientcore initialization failed:' + failure);
});
};Extract from the adController.js, line 72 ff. initSmartClientCore() :: Getting the PublisherAPI
Starting with the AdTagParsed ad event, the PublisherAPI fires ad events related to the overall progress (AdSlot... events)
and related to the playback of each single creative (Ad... events). Please have a look at the sample implementation of
AdController.prototype.initAdEventListeners and AdController.prototype.handleAdEvent to get an idea of possible use cases.
A speciality with the CE-HTML video object is the absence of media events. We have to add a object.onPlayStateCallback
that translates play state changes into player events.
--- js/adController.js
+++ js/adController.js
window.smartclientcore.connect(this.facade).setup(globalConfig).then(function (api) {
// This is our advertising interface for the current session...
// API specs: `vendor_modules/smartclip/docs/PublisherAPI.md`
that.publisherAPI = api;
- // NOTE: this.publisherAPI is undefined
-
+ // ... and a good point to subscribe to ad events.
+ that.initAdEventListeners();
+
+ // The smartclientcore depends on player updates that are comparable to HTML Media Events.
+ // Since the CE-HTML video object doesn't dispatch any events but only calls a common `onPlayStateChange` handler,
+ // all changes must be translated into the corresponding event.
+ that.facade.initPlayerStateListener();
+
}, function (failure) {
};Extract from the adController.js, line 72 ff. initSmartClientCore() :: Adding player and ad event listeners
/**
* Due to the absence of HTML5 MediaEvents on SmartTVs, we have to use the video object playstatechange callback
* and trigger the corresponding MediaEvent accordingly.
* @returns {void}
*/
CEHtmlFacade.prototype.initPlayerStateListener = function () {
// Use `that` to keep a reference to the local scope.
// Within the callback `this` refers to the global scope.
var that = this;
that.player.onPlayStateChange = function () {
switch (that.player.playState) {
case 3: // connecting = loadeddata
case 1: // playing = playerPlay
case 2: // paused = playerPause
case 0: // stopped = ended
case 4: // buffering
case 5: // finished = ended
case 6: // error = error
console.log('[CEHTMLFacade] - playState = ' + that.player.playState);
break;
}
};
};Extract from the ceHtmlFacade.js, line 40 ff. initPlayerStateListener() :: PlayStates and their equivalent Media Events
This section describes how to request a single ad break. The sample app itself has been prepared with some pre-defined tests and a simple scheduler that requests ad breaks at various times during the playback. Furthermore it illustrates the use of runtime specific environment conditions.
For more details regarding the sequential setup (AdBreak and EnvironmentVars),
please consult the latest core documentation under vendor_modules/smartclip/docs/setup.md#sequential-config.
/**
* Invokes a commercial break by requesting the specified ad setup from the ad server.
* @param {AdBreak} adBreak - Configuration for the upcoming ad slot.
* @returns {void}
*/
AdController.prototype.requestAdSlot = function (adBreak) {
var that = this;
var adBreakSetup = {
tag: 'http://ad.sxp.smartclip.net/select?type=dyn&ple=testcors.eu.smartclip~~400x320&cu_test=vast3&fwd_sz=400x320&rnd=[CACHEBUSTING]'
};
that.publisherAPI.initAdSlot(adBreakSetup, {}).then(function () {
try {
that.publisherAPI.startAdSlot();
console.log('[AdController] - OK - startAdSlot');
} catch (e) {
console.log('[AdController] - FAIL - startAdSlot', e);
}
}, function (failure) {
console.log('[AdController] - FAIL - requestAdSlot', failure);
});
};Extract from the adController.js, line 148 ff. requestAdSlot() :: Request an Ad Slot and immediately start playing the specified Ad Break
After calling PublisherAPI.startAdSlot(), the smartclientcore
starts communicating with your player facade and triggers the first ad event AdSlotStart.
Please have a look at the sample app facade (js/ceHtmlFacade.js) for details about the implementation.
Prev: Creating an Ad Controller
Top: Implementation Guide Overview