Migrate to Player Embed
In December 2021, we’ve released our new embed method: Player Embed.
This updated embed experience allows you to benefit from a better player experience, viewability and monetization.
This method is now considered our default embed type for web and is managed directly from your Dailymotion Studio.
If you are already embedding our Player on your properties using one of our libraries and would like to migrate from your old embed method to this main product, you’ll learn how to in this guide.
Player Embed Overview
The Player Embed has been designed to replace our previous player integration methods with a more advanced and efficient integration method.
After creating a unique Player configuration in your Dailymotion Studio Players section, the below Embed Scripts will be available. There are different integration methods available depending on your technical preference or environment.
| Type | Info |
| Embed Script | The Player will load at the point where you add the script. This also provides access to the Player API. |
| Library Script | Add just the library and create the Player programmatically using the Player API |
| iFrame | Embed the player without JavaScript to use a basic Player configuration |
Learn more about creating and managing your Players on the Dailymotion Studio here. To view in full, our dedicated developer documentation check it out here.
| I’m currently using | We recommend using |
|---|---|
| CPE | Player Embed Script |
| iFrame | Player Embed Script |
| JS SDK | Player Library Script |
Migrate from CPE to Player Embed Script
CPE is the naming for our legacy Picture-in-Picture and Scroll-to-Play product. We recommend migrating to the Player Embed Script available when you create a Player in the Dailymotion Studio Players tab.
The Player Embed Script is a single-line script that loads the Player exactly where it is added into the <body> element of the page. The library is also loaded providing access to the Player object in the Platform API.
Integration principles
| Your current integration | with Player Embed Script |
|---|---|
| CPE integration requires 2 steps: – Add a placeholder for the Player(s) – Add the generated CPE script available in the Dailymotion Studio template section | The Player Embed Script will replace the 2 steps required for CPE with a single one: – Add the single-line script and the Player will load at the point where you add it in the HTML page |
After copying the Embed Script code from the Dailymotion Studio, use the data-video or data-playlist attribute to specify which video or playlist to load.
Example Player Embed Script
<script src="https://geo.dailymotion.com/player/{Player ID}.js" data-video="x84sh87"></script>
Customization
| Your current integration | with Player Embed Script |
|---|---|
| The CPE offered only a limited level of customization that could be managed in the Dailymotion Studio such as: – Picture-in-Picture – Autoplay Additional customization could be added using encoded query string parameters. | The majority of features and the Player experience is managed directly from your Dailymotion Studio, including (but not limited to): – Picture-in-Picture – Autostart – Player UI & controls – Aspect ratio – Link sharing This makes it extremely easy to update the Player experience at any time without touching any code. Some Player parameters are also available for niche customization. |
Autostart
| Your current integration | with Player Embed Script |
|---|---|
| Autostart From your Dailymotion Studio, you were able to define the scroll-to-play behavior: – Scroll-to-play on – Scroll-to-play off | Autostart From your Dailymotion Studio, you are now able to define the autostart behavior expected for each Player configuration, including : – On – Off – First time viewable To note, the alternative to ‘Scroll-to-play’ is provided using the autostart setting ‘First Time Viewable’ |
Picture-in-Picture
| Features | Your current integration | with Player Embed Script |
|---|---|---|
| Modes | Only a single desktop version was available | 2 formats are provided, a mobile optimized one and a desktop version: – Picture-in-Picture – Instant Picture-in-Picture |
| Size | From your Dailymotion Studio, you were able to select between 2 PiP size: – Medium (365x205px) – Large (410x230px) | The PiP is now responsive by default to ease your integration. It’s also maximizing your viewability with the following size rules: – PiP desktop size is minimum 410px – PiP mobile is always 100% of the screen width |
| Positioning | Page corner set in the Dailymotion Studio | The PiP position is now different based on the device. On mobile and narrow screens, PiP is displayed at the top of the screen and can be expanded/collapsed. On desktop, PiP is displayed on the bottom right by default. You can now easily customize the PiP position with CSS properties so it can be placed and repositioned anywhere on the page. |
| API | It was not possible to interact programatically with PiP with this integration method | You can now programmatically interact with and control some elements from the PiP. |
Player size and aspect ratio
| Your current integration | with Player Embed Script |
|---|---|
| – 16:9 only | The Player Embed is responsive by default providing a 16:9 ratio. You can also set an aspect ratio from your player settings with one of the following values: – 16:9 – 4:3 – 1:1 – 3:4 – 9:16 – Inherit |
Integrate multiple Players
| Your current integration | with Player Embed Script |
|---|---|
| Only a single Player template available per page | An unlimited number of Embed Scripts with different configurations can be added to a page. |
Script removal
It’s important to remove the older CPE Scripts and placeholder classed as "class=dailymotion-cpe" . The script below is an example of what needs to be removed.
<script>
(function(w,d,s,u,n,i,f,g,e,c){w.WDMObject=n;w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments);};w[n].l=1*new Date();w[n].i=i;w[n].f=f;w[n].g=g;e=d.createElement(s);e.async=1;e.src=u;c=d.getElementsByTagName(s)[0];c.parentNode.insertBefore(e,c);})(window,document,"script","//api.dmcdn.net/pxl/cpe/client.min.js","cpe","CPE-ID")
</script>
Migrate from JavaScript SDK to Library Script
The number of steps to use the new Library Script is similar but a Player ID is mandatory within the script URL itself: this Player ID can be retrieved from the Players tab in the Dailymotion Studio. 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.
Note that the legacy JavaScript SDK remains available to access the Platform API only. Player usage has been be discontinued.
Integration principles
| Your current integration | with Player Library Script |
|---|---|
| The JS SDK is a 3 steps integration: – Implement the Player Library JS SDK on your properties – Prepare placeholders for the Player(s). – Use the JavaScript to initiate the Player | The New Player Embed provides a Player configuration that carries the defined Player settings and behavior. The Player settings manage the main player experience and are controlled through the Player configurator UI in the Dailymotion Studio (Players tab) or using the Platform API. The Player Library Script integration and the JS SDK integration are similar: – Implement the Player Library Script on your properties – Add placeholders for the Player(s) – Use JavaScript to initiate the Player via the Web SDK With this integration, you will also benefit from the Player ID allowing you to easily load your configuration and track the performance of your Players. |
Customization
| Your current integration | with Player Library Script |
|---|---|
| All Player customization of this integration is controlled via Legacy parameters | A large set of features and behaviour options can be managed directly from your Dailymotion Studio. As the Player ID is included in the Player Library Script code, your configuration will be automatically loaded when the Player initializes. It isn’t required to update any code to update the Player experience. Some additional query string params are also available for niche customization outside the Dailymotion Studio. |
Autostart
| Your current integration | with Player Library Script |
|---|---|
| Autostart The autoplay behavior is managed via parameters. The available parameters were allowing you to set the autoplay on or off. Sound The sound behavior is managed via parameters. The available parameters were allowing you to set the sound on or off. | Autostart From your Dailymotion Studio, you’ll be able to define the autoplay behavior expected for each Player configuration, including : – On – Off – First time viewable Sound As internet browsers are directly managing the autoplay with sound, the sounds settings have been automatically removed and are managed automatically. |
Picture-in-Picture
The Picture-in-Picture feature was not available on the JS SDK.
By migrating from the JS SDK to the Player Library Script method, you’ll be able to use the Picture-in-Picture mode with the following features:
| Features | with Player Library Script |
|---|---|
| UI | The PiP UI on this integration has its own interface, allowing your audience to benefit from an optimisez interface depending on their device. |
| Modes | 3 modes are available: – Picture-in-Picture off – Picture-in-Picture on – Instant Picture-in-Picture |
| Size | The PiP is now responsive by default to ease your integration. It’s also maximizing your viewability with the following size rules: – PiP desktop size is minimum 410px – PiP mobile is always 100% of the screen width |
| Position | The PiP position is now different based on the device. On mobile and narrow screens, the PiP is activated at the top of the screen and can be expanded / collapsed. On desktop, the PiP is activated on the bottom right per default. You can now easily customize the PiP position with CSS properties. |
| API | You can now programmatically control some elements from the PiP. |
Player size
| Your current integration | with Player Library Script |
|---|---|
| With the JS SDK integration, you have to define a responsive parent container that will control the Player size. | The Player Embed is by default responsive. You can also force an aspect ratio from your Dailymotion Studio with one of the following values: – 16:9 – 4:3 – 1:1 – 3:4 – 9:16 – Inherit |
Integrate multiple Players
| Your current integration | with Player Library Script |
|---|---|
| All managed via query string params | You can use different Player IDs within the createPlayer() method with only having to load a single Library Script. Learn more here. |
Script removal
Ensure to remove your old legacy script from your properties
<script src="https://api.dmcdn.net/all.js"></script>
Web SDK Mapping
New Player methods, events and an updated Player state have been added to the new Web SDK: this will give more control of the Player itself and additional data to accurately reflect the Player state.
You’ll find the mapping of the old and corresponding new methods, events and properties in the table below. We remind you that you can also access to the list of all our Player methods, events and parameters directly in the Web SDK documentation.
Methods
| Legacy methods | New methods |
|---|---|
DM.player() | dailymotion.createPlayer() |
load() | loadContent() |
setMuted() | setMute() |
setAdsConfig() | setCustomConfig() |
watchOnSite() | no longer available |
toggleMuted() | no longer available |
toggleControls() | no longer available |
togglePlay() | no longer available |
Events
The Player emits specific events about changes in its state. For specific Player events, you can add event listeners. For certain events, it’s possible to access the corresponding Player property value using the payload method.
Player events
| Legacy Event | Update |
|---|---|
apiready | The new embed method is promise-based, the Player is loaded asynchronously which on resolve returns a player object |
controlschange | PLAYER_CONTROLSCHANGE |
start | PLAYER_START |
end | PLAYER_END |
error | PLAYER_ERROR |
fullscreenchange | PLAYER_PRESENTATIONMODECHANGE |
playback_ready | PLAYER_CRITICALPATHREADY |
videochange | PLAYER_VIDEOCHANGE |
volumechange | PLAYER_VOLUMECHANGE |
playback_resolution | PLAYER_PLAYBACKPERMISSION |
loadedmetadata | This parameter is no longer available on the new SDK |
Video events
| Legacy Event | Update |
|---|---|
video_start | VIDEO_START |
video_end | VIDEO_END |
pause | VIDEO_PAUSE |
play | VIDEO_PLAY |
playing | VIDEO_PLAYING |
seeking | VIDEO_SEEKSTART |
seeked | VIDEO_SEEKEND |
durationchange | VIDEO_DURATIONCHANGE |
waiting | VIDEO_BUFFERING |
subtitlechange | VIDEO_SUBTITLESCHANGE |
subtitlesavailable | VIDEO_SUBTITLESREADY |
qualitiesavailable | VIDEO_QUALITIESREADY |
qualitieschanged | VIDEO_QUALITYCHANGE |
timeupdate | VIDEO_TIMECHANGE |
progress | VIDEO_PROGRESS |
Ad events
| Legacy Event | Update |
|---|---|
ad_start | AD_START |
ad_end | AD_END |
ad_pause | AD_PAUSE |
ad_play | AD_PLAY |
ad_timeupdate | AD_TIMECHANGE |
ad_companions | AD_COMPANIONSREADY |
ad_click | AD_CLICK |
ad_loaded | AD_LOADED |
ad_impression | AD_IMPRESSION |
ad_bufferStart | This parameter is no longer available on the new SDK |
ad_bufferFinish | This parameter is no longer available on the new SDK |
State
To access data with the new embed methods, it is required to embed the Player with either the Player Embed Script or the Library Script. The standard iFrame embed doesn’t give access to your Player state. The getState() method can be used to access the Player’s state. On resolve, it will return an object representation of the Player’s state.
| Legacy Property | State Property |
|---|---|
controls | playerAreControlsEnabled |
currentTime | videoTime |
duration | videoDuration |
ended | Use VIDEO_END event |
error | playerError |
fullscreen | playerPresentationMode will be fullscreen |
muted | playerIsMuted |
paused | playerIsPlaying |
qualities | videoQualitiesList |
quality | videoQuality |
seeking | Use VIDEO_SEEKSTART & VIDEO_SEEKEND events |
subtitle | videoSubtitles |
subtitles | videoSubtitlesList |
volume | playerVolume |
video | videoId & videoTitle |
companionAds | adCompanion |