Table of content

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.

TypeInfo
Embed ScriptThe Player will load at the point where you add the script. This also provides access to the Player API.
Library ScriptAdd just the library and create the Player programmatically using the Player API
iFrameEmbed 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 usingWe recommend using
CPEPlayer Embed Script
iFramePlayer Embed Script
JS SDKPlayer Library Script
Warning:

The Player or Player library should always be loaded directly on every page, we don’t advise using any third-party solution to integrate them as this may lead to the player being flagged as an advertisement due to Chrome’s Heavy Ads policies.

Note:

The Player embed is the default integration method for all your desktop and web applications.

However, if you would like to integrate our Player in a native application, we invite you to use our Android SDK and iOS SDK.


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 integrationwith 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 integrationwith 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 integrationwith 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

FeaturesYour current integrationwith Player Embed Script
ModesOnly 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
SizeFrom 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
PositioningPage 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.
APIIt was not possible to interact programatically with PiP with this integration methodYou can now programmatically interact with and control some elements from the PiP.

Player size and aspect ratio

Your current integrationwith Player Embed Script
– 16:9 onlyThe 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 integrationwith Player Embed Script
Only a single Player template available per pageAn 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 integrationwith 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 integrationwith 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 integrationwith 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:

Featureswith Player Library Script
UIThe PiP UI on this integration has its own interface, allowing your audience to benefit from an optimisez interface depending on their device.
Modes3 modes are available:

– Picture-in-Picture off
– Picture-in-Picture on
– Instant Picture-in-Picture
SizeThe 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
PositionThe 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.
APIYou can now programmatically control some elements from the PiP.

Player size

Your current integrationwith 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 integrationwith Player Library Script
All managed via query string paramsYou 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 methodsNew 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 EventUpdate
apireadyThe new embed method is promise-based, the Player is loaded asynchronously which on resolve returns a player object
controlschangePLAYER_CONTROLSCHANGE
startPLAYER_START
endPLAYER_END
errorPLAYER_ERROR
fullscreenchangePLAYER_PRESENTATIONMODECHANGE
playback_readyPLAYER_CRITICALPATHREADY
videochangePLAYER_VIDEOCHANGE
volumechangePLAYER_VOLUMECHANGE
playback_resolutionPLAYER_PLAYBACKPERMISSION
loadedmetadataThis parameter is no longer available on the new SDK

Video events

Legacy EventUpdate
video_startVIDEO_START
video_endVIDEO_END
pauseVIDEO_PAUSE
playVIDEO_PLAY
playingVIDEO_PLAYING
seekingVIDEO_SEEKSTART
seekedVIDEO_SEEKEND
durationchangeVIDEO_DURATIONCHANGE
waitingVIDEO_BUFFERING
subtitlechangeVIDEO_SUBTITLESCHANGE
subtitlesavailableVIDEO_SUBTITLESREADY
qualitiesavailableVIDEO_QUALITIESREADY
qualitieschangedVIDEO_QUALITYCHANGE
timeupdateVIDEO_TIMECHANGE
progressVIDEO_PROGRESS

Ad events

Legacy EventUpdate
ad_startAD_START
ad_endAD_END
ad_pauseAD_PAUSE
ad_playAD_PLAY
ad_timeupdateAD_TIMECHANGE
ad_companionsAD_COMPANIONSREADY
ad_clickAD_CLICK
ad_loadedAD_LOADED
ad_impressionAD_IMPRESSION
ad_bufferStartThis parameter is no longer available on the new SDK
ad_bufferFinishThis 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 PropertyState Property
controlsplayerAreControlsEnabled
currentTimevideoTime
durationvideoDuration
endedUse VIDEO_END event
errorplayerError
fullscreenplayerPresentationMode will be fullscreen
mutedplayerIsMuted
pausedplayerIsPlaying
qualitiesvideoQualitiesList
qualityvideoQuality
seekingUse VIDEO_SEEKSTART & VIDEO_SEEKEND events
subtitlevideoSubtitles
subtitlesvideoSubtitlesList
volumeplayerVolume
videovideoId & videoTitle
companionAdsadCompanion