@dailymotion/ad-sdk-web v0.0.10

Ad SDK Web

A lightweight web wrapper for Dailymotion's Ad SDK – load, manage, and interact with video ads easily in modern web players.

⚙️ Required HTML & CSS Setup for the Player Container

To use our Ad SDK Web, you must define an HTML player container element styled correctly to hold both your content video tag and Ad SDK playback elements.

CSS styles to add

.videoPlayerContainer {
  position: relative;
  width: auto;
  height: 100%;
  aspect-ratio: 16 / 9;
}

.videoPlayerContainer is the wrapper where the SDK mounts the ad container and your video element.

The container is positioned relative to allow absolute positioning of ad overlays if needed.

The aspect ratio keeps the player consistent across screen sizes.

Example implementation reference

👉 Check out an example implementation here: https://dailymotion.github.io/ad-sdk-sample/

📘 Public API Documentation

async initialize(playerContainer: HTMLElement): Promise<void>

Loads the external ad SDK script and creates internal DOM elements for ad playback. This method should be called before any other function of the SDK and once per page.

Parameters:

• playerContainer: HTMLElement The DOM element where the ad container will be mounted.

Throws: If the container is missing or the script fails to load.

loadAdsSequence(appState: AppState): void

Loads ads sequence with the provided contextual information.

After this call, the ad SDK will listen to the progress of the video and will trigger an AD_BREAK_START event whenever an ad break is about to begin. When this event occurs, the video player is expected to pause playback. Playback should resume only after the corresponding AD_BREAK_END event is received.

A preroll ad may start automatically after this call. If no preroll is available, the SDK will send an AD_BREAK_END event to indicate that content playback can proceed.

This method should be called once per video, before starting the main content.

Parameters:

• appState: AppState A structured object providing ad targeting and playback environment data.
  👉 See full structure below or jump to AppState

playAd(): void

Request the SDK to start the ad playback.

Throws:
If the SDK is not initialized.

pauseAd(): void

Request the SDK to pause the ad.

Throws:
If the SDK is not initialized.

skipAd(): void

Request the SDK to skip the currently playing ad.

Throws:
If the SDK is not initialized.

getAdDetails(): AdDetails

Returns detailed information about the currently playing ad.

Returns:
An AdDetails object containing properties such as position, ad duration, and other metadata.

👉 See full structure below or jump to AdDetails

on(event: AdEvents, callback: () => void): void

Subscribes to a specific Ad SDK event.

Parameters:

• event: AdEvents
  The event name to listen for.
  👉 See AdEvents for available event names.

• callback: () => void
  The callback function to execute when the event occurs.

Throws:
If the Ad SDK is not initialized.

off(event: AdEvents, callback: () => void): void

Unsubscribes from a specific Ad SDK event.

Parameters:

• event: AdEvents
  The event name to stop listening for.
  👉 See AdEvents for available event names.

• callback: () => void
  The callback function to remove.

Throws:
If the Ad SDK is not initialized.

updateAppState(appState: AppState): void

Updates the SDK with a new state payload.

Parameters:

• appState: AppState
  Updated app context data. 👉 See full structure below or jump to AppState

Data structures

AppState

Consent

VideoState

EnvironmentContext

PlayerContext

Internal data models

AdDetails

AdEvents

SDK and Events sequences for each ad position

Preroll sequence

Midroll sequence

Postroll sequence