The Player Library Script is available for developers who want to load just the library, the Player can be then loaded programmatically via the Platform API.

The Player library URL can be either copied from the Dailymotion Studio in the Player’s tab, or retrieved from the Platform API (see lib_script_url field).

Get a Player lib_script_url: Try it out!

Any Player created with the Platform API will carry over the configuration corresponding to the Player ID embedded in the Player library script. Additional player configurations can be specified in the createPlayer() method using the player parameter.

⚠️
Warning
The player library should always be loaded directly on every page, we don’t advise using any third-party solution to integrate any player assets.

Implementation steps

It takes only 3 steps to load our player using the Player library script:

1. Add the Player library script to your HTML page

Add the library script within the <body> section of the page. This provides access to the Platform API and allows you to create a Player instance programmatically. It should be added before any code that interacts with the Platform API is loaded.

<body>
  <script src="https://geo.dailymotion.com/libs/player/{Player ID}.js"></script>
</body>

2. Add a placeholder for the Player

Add a div placeholder on the page where you want the player(s) to be loaded and assign an id to the container which will be required in the createPlayer() method.

<div id="my-dailymotion-player">My Player placeholder</div>

3. Create the Player using the Platform API

Use the createPlayer() method and pass in the assigned container id to initialize the player, specify the video, playlist and parameters to be loaded. You can also specify a player configuration to use with the player attribute in order to load a different player configuration, by default the configuration of the embedded library will be applied.

It is recommended when adding only one single Player on a page, allow for the Player configuration to be specified in the lib_script_url rather than the createPlayer() method.

<body>
  <script src="https://geo.dailymotion.com/libs/player/{Player ID}.js"></script>


<div id="my-dailymotion-player">My Player placeholder</div>

<script>
  dailymotion
    .createPlayer("my-dailymotion-player", {
      video: "x84sh87",
  })
    .then((player) => console.log(player)) // you can use web SDK here: https://developers.dailymotion.com/sdk/player-sdk/web/
    .catch((e) => console.error(e));
</script>
</body>

Embed a video

After loading the Player Library script use the createPlayer() method and pass in the container id to initialize the Player and specify the video to be loaded. The Player configuration specified in the embedded library script will apply to every created player.

The video must be specified using the video attribute.

Embed a playlist

Use the createPlayer() method and pass in the container id to initialize the player as well as the playlist Id to be loaded. The Player configuration specified in the embedded library script will apply to every created player.

The playlist must be specified using the playlist attribute.

💡
Tip
You can play a specific video on top of a playlist, just specify both the video and playlist IDs.

Embed multiple players

Any Player created with the Platform API will carry over the configuration corresponding to the embedded Player library script.

If it is required to load multiple Players with different configurations on a single page, other Player IDs can be specified in the createPlayer() method using the player parameter. Therefore any number of Player configurations can be embedded with only a single-Player library URL.

If the Player ID is incorrectly specified or does no longer exist the configuration will fall back to a default library configuration. If multiple player scripts are loaded on a page but no player is specified via the createPlayer() method, an error will be logged and the created player will take a default config.

⚠️
Warning
It’s not required to embed different Player library scripts for each Player config, only a single library script is required and the other Player configs will be loaded on the fly.

📘
Note
When adding only one single Player on a page, allow for the configuration to be specified in the library script itself.

💡
Tip
Only embed one Player configuration with PiP activated as only one can be launched per page. In the case of instant PiP mode, the first Player which will load on the page will launch in instant PiP.