Skip to main content

Shaka Player

The guide shows how to integrate Shaka Player with SmartLib in order to handle ad tracking with the OM SDK enabled. Before starting, you need to have done the OM SDK integration guide.

At this point, you should have initialized the lib, created a streaming session object and have integrated the session lifecycle with the ad tracking into your app.

Requirements

1. Attach the OM SDK​

Once the OM SDK is loaded, the OmidSessionClient variable should be available in the scope of your app.
After creating the player instance, the OM SDK must be attached to SmartLib using OMSDKHandler.attachLibrary(...).
This method requires the OmidSessionClient and a JSON config object.

Once the OM SDK attached, you can start sessions as usual.

// Create your player
const video = document.getElementById('video');
const player = new shaka.Player(video);

// Create config object for OM SDK
const verificationSettings = {
    contentUrl: window.location.href, // URL of the current page
    videoElement: video, // video element used by Shaka Player
    accessMode: 'full' // access mode of OM SDK service ('full', 'domain' or 'limited')
};

// Attach OM SDK client and JSON config
OMSDKHandler.attachLibrary(OmidSessionClient, verificationSettings);
note

If there is a change in your video element instance, it is necessary to invoke OMSDKHandler.attachLibrary(...) once again. However, if no changes have occurred, there is no need to invoke this method again.

2. Set the ad view state​

After setting the ad view instance, set the first ad view state (i.e the state of the ad view before starting the playback). The ad view state can use these values:

  • normal: player normal state (default state)
  • minimized: player minimized state (not visible)
  • collapsed: player collapsed state (view reduced)
  • expanded: player expanded state (view expanded)
  • fullscreen: player fullscreen state (fullscreen view)
info

Once the playback started, the ad view state can be updated if the ad view state has been changed.

// Creating the session
...

// Set the default ad view state before starting the playback
session.setAdViewState('normal'); // AdViewState.NORMAL or any other values

...

// Starting the playback
...

// After an user action that changed the ad view state
session.setAdViewState(...);

Here is an example code for managing the full-screen mode:

document.addEventListener('fullscreenchange', (event) => {
    // use event instead of click button because fullscreen may be triggered by screen rotation on devices
    session.setAdViewState(document.fullscreenElement ? 'fullscreen' : 'normal');
});

3. Trigger an ad user interaction​

Once the playback started, the user can interact with the ad:

  • click: ad user click interaction type
  • invitationAccept: ad user invitation accept interaction type
// Starting the playback
...

// The user interacts with the ad
session.adUserInteraction('click');

4. Advanced features​

These optional methods could help you to enhance your ad experience.

Register an ad verification data​

Ad verification data are usually defined on your ad provider console and forwarded to the app through the manifest manipulator (BkYou). You can also add additional ad verification data through a method. It has to be called before starting the playback.

/**
 * Register an ad verification data url with parameters (OMSDK)
 * @param url URL of OMID validation verification script
 * @param vendor Vendor key as string
 * @param parameters Unencoded URL query parameters as string (param1=value1&param2=value2...)
 */
registerAdVerificationData(url, vendor, parameters);
// Creating the session
...

// Register ad verification data
session.registerAdVerificationData("https://myserver/omsdk-files/omid-validation-verification-script.js", "samplevendor", "sampleparam");

...

// Starting the playback
...
note

You can perform a test by configuring a local web server. Find more details on the OM SDK validation documentation.

Set the ad custom reference​

When the OM SDK ad session context is initialized, a custom reference data can be passed. It has to be called before starting the playback.

/**
 * Set ad custom reference data (OMSDK)
 * @param reference reference
 */
setAdCustomReference(reference);
// Creating the session
...

// Set ad custom reference data
session.setAdCustomReference("MyCustomReferenceData");

...

// Starting the playback
...