Prisma player

The @prismamedia/player package is available for external Prisma Media sites to implement a Dailymotion video player with monetization managed by CoreAds.

The following actions are performed by the package:

- Loading the Dailymotion SDK
- Creating the player and ad call in parallel

> [!NOTE]
> The player listens to the AD_READYTOFETCH event triggered by Dailymotion when an ad can be displayed. On each call, the monetization chain is retrieved from CoreAds and injected into the player

Prerequisites

$3

The CoreAds script must be loaded and available on the page.

The line below initializes the CoreAds queue. It must be placed before the CoreAds script.

``js
window.coreAds.queue = window.coreAds.queue || [];
`

$3

Here are the available player types depending on their location on the page.

#### Leader

The Leader player is the main player of the page. It is generally located at the top of the page with autoplay enabled.

For monetization reasons, it must execute as early as possible. It should therefore not be lazy-loaded.

> [!NOTE]
> This type of player has the sound set to0.01 by default.

#### Widget and Others

The Widget and Other players are secondary players, they can be lazy-loaded and initialized later according to your needs. Generally autoplay is disabled.

Installation

> [!WARNING]
> The package is delivered in TypeScript only. Adapt your configuration to import .ts files (see TypeScript with webpack).

$3

The @prismamedia/player package is hosted on the NPM public registry. Install the package on your project with the following command:

`bash
npm install @prismamedia/player --save-dev
`

`bash
yarn add @prismamedia/player --dev
`

> [!WARNING]
> Minimum Node.js version 20.18.0

Setup

$3

The video player requires an HTML

> [!IMPORTANT]
> Both HTML elements must have a unique id attribute

| Property | Type | Description |
| ------------------ | :-------------------------------: | ------------------------------------- |
| playerId | string | Dailymotion player identifier |
| playerPosition | 'Leader' \| 'Widget' \| 'Autre' | Player position |
| playerVideoTitle | string | Video title |
| playerVertical | boolean | Whether the player should be vertical |

$3

`js
import PrismaPlayer from '@prismamedia/player';
`

The constructor accepts the following parameters:

| Arguments | Type | Default | Required | Description |
| --------------- | :-----------: | ------- | :--------: | :------------------------------------- |
| playerElement | HTMLElement | null | Required | HTMLElement to target the player |
| config | Object | {} | Optional | Player configuration |

Initialize the library with the HTML element with the and the [data-ads-core]. Next, call the init method after user consent acceptance.

`js
const prismaPlayer = new PrismaPlayer(document.getElementById('playerWrapper-1'));
// Check consent before the next call
prismaPlayer.init();
`

Configuration

The second arguments of the contructor is an optional object with the following parameters:

| Arguments | Type | Default | Description |
| -------------- | :------: | :-----: | -------------------------------------------------------------------------------------------------------------------------------------------- |
| playerParams | Object | {} | Player parameters for Dailymotion video player for all video players |
| leaderVolume | number | 0.01 | Volume of the _leader_ player (between 0 and 1) |

`javascript
const prismaPlayer = new PrismaPlayer(document.getElementById('playerWrapper-1'), {
playerParams: {
mute: true
}
});
prismaPlayer.init();
`

Events

The package exposes the following native events on the [data-ads-core] element. The event can expose additional data in the e.detail object.

| Event type | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| prismaPlayerReady | Triggered when the Dailymotion player is ready. The player instance is passed in the event. |

Example of a listener when the player is ready.

`js
document.querySelector('#playerWrapper-1').addEventListener('prismaPlayerReady', (e) => {
// The player instance is accessible in the e.detail.instance object
// Example to set the volume to 1
// e.detail.instance.setVolume(1);
});
`

Examples

$3

Initializing a Leader type player

`html
id="playerWrapper-1"
data-ads-core='{
"playerId": "",
"playerPosition": "Leader",
"playerVertical": "false"
}'
>