> Documentation-Index

smartClientCore

Implementation Guide

Player Prerequisite: The Player API

Player Prerequisites

Certainly your HTML page already includes a HTML5 Video Player. Otherwise you should take this step first. Next steps assume that your content videos run smoothly and fulfill the following preconditions:

• remove existing build-in ads setup

Example: Video Player configuration Object
===============================================================
--- config.js
+++ config.js

     advertising: {
-        schedule: {
-            'pre-roll-ad': {
-                offset: 'pre',
-                tag: 'https://adserver.com/tag?type=vast3xml'
-            }
-        }
     }

Installing

The add-on is provided as a JavaScript file smartclientcore.min.js that can be used in two ways:

• using ES6 import (recommended)
• directly loaded by the page that includes the video player

Using ES6 Import

The file must be copied to the video player project.

We recommend using a place that already hosts third-party JS modules for your project. But please do not use the folder node_modules because it is managed by Node package manager (npm). If not yet established, let's create a folder named vendor_modules.

import smartclientcore from './vendor_modules/smartclip/smartclientcore.min';

Directly loaded to the page

The file must be included once by putting the following HTML one-liner next to the Video Player source files.

Example: Player page scripts
===============================================================
--- page.html
+++ page.html

     <script src="js/videoplayer.js"></script>
+    <script src="js/smartclientcore.min.js"></script>

Safeguarding the Video Player

In order to avoid unexpected calls to the player API, it is not only recommended but mandatory to safeguard the player API with your own facade (proxy). The facade interface has to match with the Facade and Video Player Interface.

Using the facade has two main reasons:

• provide a generic player interface the plugin can safely talk to
• capture and validate requests made by this add-on towards the player API

For your reference the smartClientCore package contains a file FacadeBase.js that can be extended by your custom player facade.

Example: MyPlayerFacade.js - Step 1: Build your own Facade
===============================================================
import { FacadeBase } from './FacadeBase';

const FACADE_VERSION = '3.0';

export class MyPlayerFacade extends FacadeBase {
    constructor(playerReference = {}) {
        super(playerReference);
    }
}

Basic Initialization

Example: main.js - Step 2: Creation and setup of the add-on
===============================================================
import smartclientcore from './vendor_modules/smartclip/smartclientcore.min';
import { MyPlayerFacade } from './MyPlayerFacade';

// Let's assume the page uses a HTML5 VideoElement, though `myPlayer` can be any other Video Player
const myPlayer = document.querySelector('video#myplayer');
const myPlayerFacade = new MyPlayerFacade(myPlayer);

let globalAdConfig = smartclientcore.SCHEMA.create(smartclientcore.SCHEMA.GLOBAL_CONFIG);
globalAdConfig.debug = true;
let publisherAPI = null;

smartclientcore.connect(myPlayerFacade).setup(globalAdConfig).then(api => {
    publisherAPI = api;
    smartclientcore.debug.info('Ready to request and play out video ads.');

    /**
    * You are ready to request your first ads
    * this is also a good point to subscribe to ad events
    */    
    smartclientcore.EVENTS.forEach(eventType => {
        publisherAPI.addEventListener(eventType, (event) => { /* do something */ });
    });
}, failure => {
    smartclientcore.debug.critical(failure);
});