Video player documentation – Dailymotion for Developers

Table of content

Player
- Overview
- Integration methods
Embed the player on web
Embed the player in native apps
- Android SDK
- iOS SDK (Swift)
Embed the player on AMP
oEmbed API
Customize the player
JavaScript Player API Reference
- Methods
- Events
- State
Optimization info
Changelog

Player

Overview

The Dailymotion Player is a state-of-the-art video player built with the latest web technologies (HTML5/JavaScript) and video standards (HLS adaptive streaming).

It’s easy to use, cross-platform friendly and enjoyed by millions of users every day both on Dailymotion’s properties and hundreds of our premium Partners websites and native applications.

The Player is customizable, consistent across all devices, delivered with Picture-in-Picture, extensive analytics and the necessary advertising infrastructure out of the box.

We have opened a CodePen developer account to provide access to some code samples that will allow you to discover the Dailymotion Player and its features, check it out here.

Integration methods

Depending on your needs you can integrate the Player using one of the methods outlined below. We recommend where possible to embed using one of the libraries in order to take full advantage of our Player technology.

Integration	Info	Access to Player API
Player Embed Script	Embed using JavaScript, the single line script will load the Player at the point where you add it to the HTML page	Yes
Player Library Script	Add just the player JavaScript library to create players programmatically	Yes
Player iFrame	The iFrame embed method is the most basic way to integrate the Player. Advanced functionality such as `PiP` and `firstTimeView` will not be available	No
Android SDK	The SDK is a thin wrapper around a WebView that allows to easily embed the Player into an Android application	Yes
iOS SDK	A Swift wrapper around the WKWebView Class that allows developers to easily embed the Player in iOS applications	Yes
Amp	The Dailymotion AMP component is available to embed the Player with the AMP framework	No

Embed the player on web

Embedding the player on your properties is simple. There are different integration methods available depending on your technical preference or environment. We recommend using one of the script embeds type where possible as it provides access to all player functionality and the Player API.

Embed type	Info
Player Embed Script	Embed using JavaScript, the single line script will load the Player at the point where you add it to the HTML page. This also provides access to the Player API
Player Library Script	Add just the library and create the player programmatically using the Player API
Player iFrame	Embed the player without JavaScript to use a basic player configuration. Advanced functionality such as `PiP` and `firstTimeView` will not be available

Getting started

As a first step you need to create a custom player configuration associated with your Dailymotion account and defined by a unique Player ID.

Create a custom player configuration

A custom player configuration can be created and managed either through the “Players” tab in the Partner Space or programmatically via the player REST API.

A Player configuration is composed of several settings. These settings can’t be modified or overridden at run time. They can only be updated via the player configurator in the Partner Space or the Player REST API.

For more information on the settings that are available, please refer to the section “Player settings” .

Add the Player or Player library

Once a Player configuration is created you can access the corresponding scripts that can be embedded into your properties. Embed scripts can be accessed either from the “Players” tab within the Partner Space or programmatically via the player REST API.

The following integration types are available to use the Player on the web:

Embed type	Info
Player Embed Script	Embed using JavaScript, the single line script will load the Player at the point where you add it to the HTML page. This also provides access to the Player API
Player Library Script	Add just the library and create the Player programmatically using the Player API
Player iFrame	Embed the player without JavaScript to use a basic player configuration

Player Embed Script

The Player Embed Script integration method is the easiest way to embed the Player with the library on your site and provides access to the Player API. It is a single-line script that loads the Player exactly where it is added into the <body> of the page.

Embed a video

After adding the Player embed script, use the data-video attribute to specify which video ID to load. It should be added directly to the script tag that loads the pre-configured Player. To ease integration it’s already added to the embed script that can be copied via the Partner HQ and requires only a video Id to be defined.


						


			<script src="https://geo.dailymotion.com/player/{Player ID}.js" data-video="x84sh87"></script>

Embed a playlist

After adding the Player embed script, use the data-playlist attribute to specify which playlist ID to load. It should be added directly to the script tag that loads the pre-configured player.


						


			<script src="https://geo.dailymotion.com/player/{Player ID}.js" data-playlist="x5zhzj"></script>


						


			<script src="https://geo.dailymotion.com/player/{Player ID}.js" data-playlist="x79dlo" data-video="x7tgad0"></script>

Embed multiple players

To use multiple Player configurations on a single page just add different embed scripts specifying their unique Player IDs.


						


			<!-- Player 1 -->
<script src="https://geo.dailymotion.com/player/{Player ID}.js"   data-video="x84sh87"></script>
<!-- Player 2 -->
<script src="https://geo.dailymotion.com/player/{Player ID}.js"   data-video="x84sh87"></script>

Player Library Script

The Player library script is available for developers who want to load just the library, the Player can be then loaded programmatically via the Player API. The Player library URL can be either copied from the Partner HQ in the Player’s tab or retrieved from the REST API (see lib_script_url field).

Any Player created with the Player 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.

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

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 Player API and allows you to create a Player instance programmatically. It should be added before any code that interacts with the Player API is loaded.


						


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

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>

Create the Player using the Player 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}"></script>


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

<script>
  dailymotion
    .createPlayer("my-dailymotion-player", {
      video: "x84sh87",
  })
  .then((player) => console.log(player))
  .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.

Embed multiple players

Any Player created with the Player 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.

Player iFrame

Embed a partially configured player without JavaScript. Smart player functionality such as “Picture-in-Picture”, “first time viewable” and “auto-sizing” along with access to the Player API won’t be available. The iFrame Player will benefit only from basic UI customizations specified in the Player configurator UI or Rest API. We recommend partners take full advantage of our Player technology and use the Player embed scripts.


						


			<iframe frameborder="0" width="640" height="360" 
    src="https://geo.dailymotion.com/player/{Player ID}.html?video=x84sh87" 
    allowfullscreen 
    allow="autoplay; fullscreen; picture-in-picture">
</iframe>

Embed the player in native apps

We provide our publishers with the same tools we use to create our flagship Dailymotion applications: the same Player and the same SDKs. Check out our apps in the Apple App Store or Google Play Store which have over 50M+ downloads.

Our Mobile SDK provides access to the Player API and gives you full control of the player. Along with having a genuine native feel, it’s possible to use our provided tools, to build a unique video solution in your app, benefiting from your own custom UI components and aligning it with the look and feel of your brand.

As our SDKs are open source, partners can make a pull request to update the iOS or Android SDK. Please check the source code, documentation and sample app on GitHub.

Integration	Info	Access to Player API
Android SDK	The SDK is a thin wrapper around a WebView that allows you to easily embed Dailymotion videos into your Android application	Yes
iOS SDK	A Swift wrapper around the WKWebView class that allows developers to easily embed the Dailymotion Player in their app	Yes

Android SDK

The SDK is a thin wrapper around a WebView that allows to easily embed Dailymotion videos into your Android application. We recommend using the SDK rather than the video URL in a standard webView, as it gives you more controls of the player and its better for tracking purposes. Our Android SDK is open source and you can get all the required information plus a sample app on our GitHub.

The SDK supports Android 5.0.x (API level 21+) and It is fully in Kotlin, If your project is still in JAVA, please add the Kotlin dependencies: https://developer.android.com/kotlin/add-kotlin.

How to use:

The easiest way to integrate the SDK is by adding it to your application build.gradle file.
The PlayerWebView is the main SDK component that allows you to load videos easily into your android environment. Add the component to the selected layout which will display the player. To load the video without autoplay, you can use the setPlayWhenReady(false) method


						


			<com.dailymotion.android.player.sdk.PlayerWebView 
android:id="@+id/dm_player_web_view" 
android:layout_width="match_parent" 
android:layout_height="215dp"> 
</com.dailymotion.android.player.sdk.PlayerWebView>

Initialize the player in your selected activity, reference the PlayerWebView and use one of the load methods available. You can use the load() method, which will initialize a default player config, load the player and start playing the selected video. Or it is also possible to use the initialize() method to load the player with a custom config using any available player params.


						


			lateinit var playerWebView: PlayerWebView override fun onCreate(savedInstanceState: Bundle?) { 
super.onCreate(savedInstanceState) setContentView(R.layout.screen_sample); 
playerWebView = findViewById(R.id.playerWebview) 
val params = mapOf("video" to "x84sh87") 
playerWebView.load(loadParams = params);
 }

Using player parameters

In order to customize the player, pass in player parameters to your player instance. Create a Map interface, add an entry of the chosen player parameters into the map along with its associated value, then pass the Map into the initialize() method. To load multiple videos while keeping the same player instance and config, use the load() method after player initialization.


						


			val params = mapOf(
    "ui-highlight" to "fff",
    "logo" to "false"
)
dailymotionVideoPlayer.initialize("https://www.dailymotion.com/embed/", params = params, emptyMap())

Player Parameters for Android SDK

Use the below parameters to customize your player via the iframe or SDK embed.

Parameter	Info	Type
`autoplay`	Automatically attempt to start playback with sound, if it is blocked by the browser, the player will force the video mute	Boolean
`controls`	Whether to display the player controls, true by default	Boolean
`id`	ID of the player unique to the page to be passed back with all API messages	String
`mute`	Whether to mute the video	Boolean
`quality`	Specify the suggested playback quality for the video	Number
`sharing-enable`	Whether to display the sharing button	Boolean
`start`	Specify the time (in seconds) from which the video should start playing	Number
`subtitles-default`	Specify the default selected subtitles language	String
`syndication`	Pass your syndication key to the player	String
`ui-highlight`	Change the default highlight color used in the controls (hex value without the leading #). Color set in the Partner HQ will override this param	String
`ui-logo`	Whether to display the Dailymotion logo	Boolean
`ui-start-screen-info`	Whether to show video information (title and owner) on the start screen	Boolean
`playlist`	Specify a playlist ID to populate the Up Next Queue with videos from a playlist	String
`fullscreen`	Whether to display the fullscreen button	Boolean
`scaleMode`	Specify the default focus of the player in order to reframe and refocus on a specific area in the video. To be used for scaling and repurposing of videos between different aspect ratios for example landscape to portrait. Values ( ‘fit’, ‘fill’, ‘fillLeft’, ‘fillRight’, ‘fillTop’, ’fillBottom’ )	String
`loop`	Whether to loop a video or an entire playlist. A video embed will start over again automatically. A playlist embed will start to play from the first item in the playlist after the entire playlist has finished	Boolean

Methods

Once the SDK and the Player are loaded you can use the Player API to control the player. You have full access to all player methods and there are also methods supplied in the Android SDK that return specific player properties.


						


			dailyMotionVideoPlayer.pause();

Name	Info
`load(String)`	Calls the initialize method, loads the player with a video associated with the video id (e.g. x7tgad0)
`initialize(String, Map<String, String>, Map<String, String>)`	Loads the player with base string URL of player’ https://dailymotion.com/embed/‘ accompanied by a MAP interface of required player parameter values
`finishedInitialization (String, Map<String, String>, Map<String, String>)`	Loads the player with a given URL, parameters and advertising ID
`play()`	Starts or resumes video playback
`pause()`	Starts or resumes video playback
`setFullScreenButton(Boolean)`	Enters fullscreen mode when true and controls player fullscreen button state. The method should be utilized in association with the native fullscreen functionality in app
`setPlayerEventListener(Eventlistener)`	Add a listener which will be called when the Android system WebView can an error
`unmute()`	Unmute the player
`mute()`	Mute the player
`callPlayermethod(String, Object)`	Call a method from the Js Player API, if not already exposed in the Android SDK
`setPlayWhenReady(Boolean)`	Set the autoplay behavior of the player when video is loaded. Set to true, for autoplay enabled.
`setQuality(String)`	Set player to play at a specified quality if available [‘240’, ‘380’, ‘480’, ‘720’, ‘1080’, ‘1440’, ‘2160’ ‘default’]
`setSubtitle(String)`	Activate subtitles track to a specified language if available
`setVolume(float)`	Set the player’s volume to the specified level between 0 & 1. ie, 0.5 = 50%
`release()`	Destroy the Player webView
`seek(double)`	Seek to the specified time in video playback in seconds
`setIsWebContentDebuggingEnabled()`	Enable the Android system WebView debug mode
`setMinimizeProgress(float)`	Disable the player UI when set to 0, enables when 1
`setWebViewErrorListener(WebViewErrorListener)`	Add a listener for Android system WebView error
`showControls()`	Enable the display of the player UI
`toggleControls()`	Turn on/off the player’s UI components
`togglePlay()`	Switch between player & pause

In order to make a developer’s life easier, we created methods in our android SDK that will return the value of a specific player property. Not all player properties are returned by a set method, some are returned in the payload sent after the player event. Please see here for more info about events.

Name	Info
`getBufferedTime()`	Returns a Double Number. The part of the media resource that has been downloaded in seconds
`getVideoPaused()`	Returns a boolean value for current pause state of the player
`getVolume()`	Returns a float value for the volume property between 0 and 1
`isEnded()`	Returns a boolean value for whether the media resource has ended
`isSeeking()`	Returns a boolean value for whether the video resource is seeking
`getDuration()`	Returns a double value for the length of a media resource in seconds
`getPosition()`	Returns a long value of the current playback position in seconds

Player 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.

Event	Info	Payload method
`ApiReadyEvent`	Sent when the player is ready to accept API commands. Do not try to call functions before receiving this event
`StartEvent`	Sent the first time the player attempts to start the playback
`VideoChangeEvent`	Sent when a new video has been loaded in the player	`getPayload()` returns video id & video title
`LoadedMetaDataEvent`	Sent when the video’s metadata is loaded
`AdStartEvent`	Sent when the player starts to play an ad media resource
`AdTimeUpdateEvent`	Sent when the playback position of an ad changes
`AdPlayEvent`	Sent when the player starts the playback of an ad
`AdPauseEvent`	Sent when the player pauses an ad resource
`AdEndEvent`	Sent when the player reaches the end of an ad media resource
`VideoStartEvent`	Sent when the player starts to play the media resource
`TimeUpdateEvent`	Sent when the playback position changes
`SeekingEvent`	Sent when the player is starting to seek to another position in the video	`getPayLoad()` will return the position at which the seek method was triggered
`SeekedEvent`	Sent when the player has completed a seeking operation	`getPayLoad()` will return the position at which the seek method seeks to
`ProgressEvent`	Sent when the browser is fetching the media data
`DurationChangeEvent`	Sent when the duration property of the video becomes available or changes after a new video load	`getPayload()` returns the duration property of the video
`PlayingEvent`	Sent when the content media resource playback has started
`PauseEvent`	Sent when the content media resource playback has paused
`VideoEndEvent`	Sent when the player reaches the end of the content media resource
`PlaybackReadyEvent`	Sent when playback starts after the play method returns
`QualitiesAvailableEvent`	Sent when qualities are available	`getPayload()` returns qualities which are available
`QualityChangeEvent`	Sent when the video quality changes	`getPayload()` returns the quality value
`VolumeChangeEvent`	Sent when the volume or mute state changes	`getPayload()` returns volume state and muted state
`FullScreenToggleRequestedEvent`	Sent when the fullscreen toggle button is requested
`ControlChangeEvent`	Sent when the UI controls appear or disappear	`getPayload()` returns if player UI controls are visible

Below is an example of adding listeners for multiple events, it is then possible to use the event payload method to get the corresponding events property value.


						


			dailyMotionVideoPlayer.setEventListener { event ->
    when (event) {
        is ApiReadyEvent -> ...
        is StartEvent -> ...
        is LoadedMetaDataEvent -> ...
        is ProgressEvent -> ...
        is DurationChangeEvent -> ...
        /* And many more event */
        else -> {
            /* In case a POJO is not available you can directly access the raw data */
            if (event.name == "_generic_") {
                /* Do some stuff for my event: parse the raw date to extract the event name or values */
                Log.d("Event with payload: ${event.payload}")
            }
        }
    }
}

Best practices

Player Ready Event:
When using the Player with any of our of SDKs, we recommend before you make any API commands, wait till after the API ready event is sent by the player. You can pick this up in your android app using the ApiReadyEvent.

Preload player:
It’s possible to load the player and the video separately. In your application, you can preload the player before the user attempts to play a video. In order to preload the player without a video being displayed. Use the initialize() method and base the baseUrl of just the player with a video not defined, https://www.dailymotion.com/embed/.

Reuse player:
When utilizing the player via our SDKs in an application, you can reuse the same player instance. Use the load() method passing in the video id after initializing the player.

Handle full-screen orientation:
Any activity you are using your player in, you should add the below snippet in your AndroidManifest.XML . The setFullScreenButton() method which is available, doesn’t have complete control of the full-screen functionality in your application. This should be used in parallel with your own native application functionality adjusting the player to take the whole screen space. This method controls the UI fullscreen component and updates the player state.


						


			android:configChanges="orientation|screenSize"

Google player services:
The SDK uses Google Play Services to get the Advertising Id, you may want to override the play-services-ads version to avoid conflicting with other play services artifacts.


						


			dependencies {
    implementation "com.google.android.gms:play-services-ads:[your_play_services_version]"
}

Picture In Picture:
Our flagship Dailymotion app use our Android SDK, although we can’t provide out of the box PiP functionality, it is possible to achieve this like we have done, depending on your software architecture. You can review info on Google’s android Picture-in-Picture support here.

TCF2

Our Android SDK complies with IAB TCF2 standards so it’s easy to access the stored content string and pass it to the Player.

Using a recognized CMP, generate the consent string and store it in the correct location as specified by the TCF2 iAB specification. After generating the content string then pass it to the Player using the tcf2Handler.loadConsentString(content = this) method.

OM SDK

Open Measurement SDK from IAB is designed to facilitate third party viewability and verification measurement for ads served to web video and mobile app environments. For more details see here.

We have integrated the SDK in our Dailymotion Player SDK and it does more or less everything out of the box :

Ad session management
Ad main signals (play, buffer_start, buffer_end, pause, resume, quartiles, click)
Device and Player volume management
Basic Player state handling. NORMAL or FULLSCREEN based on player fullscreen state.

Please note that it is recommended to update at all times the Player state if your app has more Player layout variety, such as mini-player, picture-in-picture, etc. This can be achieved by updating the OMHelper playerState field :


						


			    OMHelper.playerState = PlayerState.COLLAPSED

Enum	Description
MINIMIZED	The player is collapsed in such a way that the video is hidden. The video may or may not still be progressing in this state, and sound may be audible. This refers to specifically to the video player state on the page, and not the state of the browser window
COLLAPSED	The player has been reduced from its original size. The video is still potentially visible
NORMAL	The player’s default playback size
EXPANDED	The player has expanded from its original size
FULLSCREEN	The player has entered fullscreen mode

iOS SDK (Swift)

The Dailymotion Swift iOS SDK is a swift wrapper around the WKWebView Class that allows developers to easily embed the Dailymotion Player in their app and let them communicate with its API natively.

The Swift iOS SDK is open source and you can get all required information plus a sample app here on our GitHub. It requires Xcode 8 and later, Swift 4 and iOS 8+. If you require an Objective-C version please check out our git here.

The Dailymotion iOS SDK, starting from version 3.10.0 has integrated the latest changes on the IDFA collection as part of the App Tracking Transparency compliance. It is recommended to all partners to utilize the latest SDK version, IDFA will not be collected on versions prior to 3.10.0 on iOS 14.5.

How to use:

Add our SDK to your project, the easiest way to do so is with CocoaPods, a dependency manager solution. Add the below pod to your Podfile.use_frameworks! pod 'DailymotionPlayerSDK'
Import DailymotionPlayerSDK into each file where you need to create an instance of Dailymotion player.import DailymotionPlayerSDK
Inside a view controller where you want to display the player, create a fresh DMPlayerViewController instance and set your view controller as delegate. Please, ensure your view controller conforms to the DMPlayerViewControllerDelegate protocol.


						


			    import DailymotionPlayerSDK
class VideoViewController: UIViewController {
    private lazy var playerViewController: DMPlayerViewController = {
      let controller = DMPlayerViewController(parameters: [:])
        controller.delegate = self
        return controller
    }()
}
//MARK: - Conform to protocol
extension VideoViewController: DMPlayerViewControllerDelegate {
  func player(_ player: DMPlayerViewController, didReceiveEvent event: PlayerEvent) {
  }
  func player(_ player: DMPlayerViewController, openUrl url: URL) {
  }
  func playerDidInitialize(_ player: DMPlayerViewController) {
  }
  func player(_ player: DMPlayerViewController, didFailToInitializeWithError error: Error) {
  }
}

Add the playerViewController as a child view controller. Then pass a video id to the player load() method. Once the player is initialized, it will take care of loading the video and start the playback.playerViewController.load(videoId: "x84sh87")

Using player parameters

To customize the player, select the required parameters from the player parameters list below and pass them to the player init method. The params value should contain a String Array with the customization values. If you don’t need any customization, pass an empty array.


						


			let parameters: [String: Any] = [
    "logo": "false", //to disable the Dailymotion logo
    "ui-highlight": "FF0000",  //to color the player UI using HEX value
]
let playerViewController = DMPlayerViewController(parameters: parameters)

Some parameters can be passed in on player creation but also used with the load method to update their runtime config. These parameters include video, playlist, ads_params & start. These params require some encoding on the partner’s side. Please see the example below of the steps required.


						


			func loadVideo(withId id: String) {
  let parameters = ["start": 30]
  guard
    let encoded = try? JSONEncoder().encode(parameters),
    let params = String(data: encoded, encoding: .utf8)
  else { return }
  playerViewController.load(videoId: id, params: params)
}

Player Parameters for iOS

Use the below parameters to customize your player via the iframe or SDK embed.

Parameter	Info	Type
`autoplay`	Automatically attempt to start playback with sound, if it is blocked by the browser, the player will force the video mute	Boolean
`controls`	Whether to display the player controls, true by default	Boolean
`id`	ID of the player unique to the page to be passed back with all API messages	String
`mute`	Whether to mute the video	Boolean
`quality`	Specify the suggested playback quality for the video	Number
`sharing-enable`	Whether to display the sharing button	Boolean
`start`	Specify the time (in seconds) from which the video should start playing	Number
`subtitles-default`	Specify the default selected subtitles language	String
`syndication`	Pass your syndication key to the player	String
`ui-highlight`	Change the default highlight color used in the controls (hex value without the leading #). Color set in the Partner HQ will override this param	String
`ui-logo`	Whether to display the Dailymotion logo	Boolean
`ui-start-screen-info`	Whether to show video information (title and owner) on the start screen	Boolean
`playlist`	Specify a playlist ID to populate the Up Next Queue with videos from a playlist	String
`fullscreen`	Whether to display the fullscreen button	Boolean
`scaleMode`	Specify the default focus of the player in order to reframe and refocus on a specific area in the video. To be used for scaling and repurposing of videos between different aspect ratios for example landscape to portrait. Values ( ‘fit’, ‘fill’, ‘fillLeft’, ‘fillRight’, ‘fillTop’, ’fillBottom’ )	String
`loop`	Whether to loop a video or an entire playlist. A video embed will start over again automatically. A playlist embed will start to play from the first item in the playlist after the entire playlist has finished	Boolean

Methods

Our iOS SDK is loaded with all the functionality you need to create a unique video-centric application. Once the player is loaded, you can use the Player API and our player methods.


						


			playerViewController.play()

Method	Description
`load(params: String)`	Calls the initialize method, loads the player with a video associated with the video id (e.g. x7tgad0).
`play()`	Starts or resumes video playback
`pause()`	Pauses videos playback
`toggleFullscreen()`	Toggle the fullscreen state of the player and fullscreen UI component. The method should be used in association with the native fullscreen functionality in your app.
`unmute()`	Unmute the player
`mute()`	Mute the player
`seek()`	Seek to the specified time in video playback in seconds.
`toggleControls()`	Disables the player UI when set to false, enables when true

Events

The Player sends events when a specific Player property changes or becomes available. It is possible to add listeners to specific events: the exhaustive list of events is available below.

See an example of how to set a listener for loadedmetadata & apiready event.


						


			extension ViewController: DMPlayerViewControllerDelegate { 
    func player(_ player: DMPlayerViewController, didReceiveEvent event: PlayerEvent) {
        switch event {
        case .namedEvent(let name, _) where name == "loadedmetadata":
            print("Player Metadata loaded")
        case .namedEvent(let name, _) where name == "apiready":
            print("Player is ready")
        default:
            break
        }
    }
}

Player events

Player event	Description
`apiready`	Sent when the player is ready to accept API commands. Do not try to call functions before receiving this event
`controlschange`	Sent when the availability to use our player controls changes.
`start`	Sent the first time the player attempts to start the playback, either because of user interaction, an autoplay parameter or an API call (e.g play(), load(), etc.)
`end`	Sent when playback of the content video, and eventual post-roll ad video, is completed
`ended`	Deprecated. Use video_end instead
`error`	Sent when the player triggers an error. Please see error codes here
`fullscreenchange`	Sent when the player enters or exits the fullscreen state
`playback_ready`	Sent every time a video is ready to play, or started playing (depending on autoplay settings, and their resolution by the browser), or is unable to play (blocked, restricted, unavailable). Listen to this event if you want to defer doing network-heavy and JavaScript-heavy work, to allow the optimal delivery of the first frames of the video to the use
`seeking`	Sent when the player starts to seek to another position in the video timeline
`seeked`	Sent when the player has completed a seeking operation
`videochange`	Sent when a new video has been loaded in the player. (e.g. after calling load(videoId, [params]), or at player start-up)
`volumechange`	Sent when the volume or mute state changes

Video events

Video event	Description
`video_start`	Sent when the player begins playback of the content video
`video_end`	Sent when the player completes playback of the content video
`pause`	Sent when the video playback has paused
`play`	Sent when the playback state of the content video is no longer paused, as a result of the play method or the autoplay attribute
`playing`	Sent when the content video starts playing, after the play or waiting event
`durationchange`	Sent when the duration property of the video becomes available or changes after a new video load
`loadedmetadata`	Sent when the video’s metadata is loaded
`waiting`	Sent when the player has to temporarily stop video playback for further buffering of content
`subtitlechange`	Sent when the current subtitle changes
`subtitlesavailable`	Sent when subtitles are available, wait until the `apiready` event to set subtitle via the API
`qualitiesavailable`	Sent when video qualities are available
`qualitieschanged`	Sent when the video quality changes
`timeupdate`	Sent when the playback position changes
`progress`	Sent when the browser is fetching the media data
`playback_resolution`	Sent each time any playback request has failed or if the initial playback attempt has succeeded. On dispatch the status and reason values can be accessed from the `data.detail` object.

Ad events

Ad event	Description
`ad_start`	Sent when the player begins playback of an ad video
`ad_end`	Sent when the player completes playback of an ad video
`ad_pause`	Sent when the player pauses an ad
`ad_play`	Sent when the ad playback starts
`ad_timeupdate`	Sent when the playback position of an ad changes
`ad_companions`	Sent when a companion ad is received. Companion ads should be played in sync with the main ad (linear/non-linear) by listening to events ad_start and ad_end
`ad_click`	Sent when a user clicks on a video ad
`ad_loaded`	Sent when the player has loaded an advertisement in full or to the extent it can begin playback
`ad_impression`	Sent when the first frame of the advertisement has been displayed
`ad_bufferStart`	Sent when the advertising playback has stopped due to buffering
`ad_bufferFinish`	Sent when the advertising playback has resumed due to the end of buffering

Player properties

It is possible to get access to information about the player’s current state or specific player properties. Add a listener to an event and retrieve the corresponding player property, depending on the event type, use the data or position value.


						


			func player(_ player: DMPlayerViewController, didReceiveEvent event: PlayerEvent) {
    switch event {
    case .namedEvent(let name, let data):
        print("\(name) - \(data)")
    case .timeEvent(let name, let position):
        print("\(name) - \(position)")
    }
}

Best practices

Player Ready Event:
When the player is ready to receive API commands it will send the apiready event. Listen to this event to ensure the player is ready to receive any API commands.

Preload player:
In your application, you can preload the player before the user attempts to play a video. In order to load the player, you must use the DMPlayerViewController() method, followed by the load method when you want to load a video in the player.

Reuse player:
When using our player in an application, you can (and should) reuse the same player instance, therefore a single-player instance can load multiple videos.

Handle fullscreen orientation and state:
The toggleFullscreen() method toggles the fullscreen UI component and the player fullscreen state, it doesn’t have control of the fullscreen functionality of your application. This method should be used alongside the native functionality adjusting the player orientation. You can see an example of how it could be handled in our sample application.

Sample application:
You can access a sample application utilizing our SDK from our git here. Check out the SDK repo and the sample will be available.

TCF2

The iOS SDK complies with IAB TCF2 standards and will take care of everything by default starting from version 3.8.0+. It will automatically access the stored content string and pass it through to the player.

OM SDK

Open Measurement SDK from IAB is designed to facilitate third-party viewability and verification measurement for ads served to web video and mobile app environments. For more details see here.

We have integrated the SDK in our Dailymotion Player SDK and it does more or less everything out of the box:

Ad session management
Ad main signals (play, buffer_start, buffer_end, pause, resume, quartiles, click)
Device and Player volume management
Basic Player state handling. NORMAL or FULLSCREEN based on Player fullscreen state.


						


			DMPlayerViewController(parameters: [:], allowAudioSessionActive: false)

It is recommended to update the Player state at all times if your app uses a variety of Player layout, such as mini-Player, picture-in-picture, etc. This can be achieved by updating the ‘playerState’ property in your ‘DMPlayerViewController’ instance.


						


			player.playerState = .fullscreen

Player state

Enum	Description
MINIMIZED	The player is collapsed in such a way that the video is hidden. The video may or may not still be progressing in this state, and sound may be audible. This refers to specifically to the video player state on the page, and not the state of the browser window
COLLAPSED	The player has been reduced from its original size. The video is still potentially visible
NORMAL	The player’s default playback size
EXPANDED	The player has expanded from its original size
FULLSCREEN	The player has entered fullscreen mode

Embed the player on AMP

AMP (Accelerated Mobile Pages) is an open-source project which provides a robust framework for creating a lightweight experience of a webpage that loads lightning fast on mobile connections.

In order to build these pages the framework provides a large library of components. This library includes a dedicated Dailymotion AMP component which is available for anyone to use Dailymotion videos on their AMP site.

Required Script


						


			<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>

Our Component


						


			<amp-dailymotion>

Example embed


						


			<amp-dailymotion
    data-videoid="x2m8jpp"
    layout="responsive"
    autoplay
    data-mute="true"
    width="480"
    height="270"
    data-param-ads_params="12345"
    data-param-syndication=12345">
</amp-dailymotion>

In order to autoplay correctly on AMP pages, it is required that both autoplay and mute are configured. Add both the autoplay & data-mute="true" to configure this. Our tap to unmute feature won’t be visible, however, this framework provides its own version.

For player parameters that don’t have matching AMP attributes, it’s possible to add in any player parameter using the data-params-{Player_Param}.

TCF API with AMP

Please note that our player is compliant with the TCF API within the AMP framework also. The amp-consent component needs to be added and configured to facilitate the ability to collect and store a user’s consent. This can easily be managed by adding the configuration below.

Furthermore, we recommend blocking the amp-dailymotion component until the user accepts consent. This can easily be achieved by adding data-block-on-consent into the player amp embed. For more info on the consent component see here.


						


			<amp-consent>
  <script type="application/json">
    {
      "exposesTcfApi": true
    }
  </script>
</amp-consent>


						


			<amp-dailymotion data-videoid="x84f3e2"  data-block-on-consent></amp-dailymotion>

oEmbed API

oEmbed is a format for allowing an embedded representation of a URL on third-party sites. The protocol allows a website to turn a Dailymotion video page URL into a structured data set, making it easy to embed and share content across the web.

When to use it:

This protocol is the preferred method when you need to transform the URL provided into an embed code. For more information, see the oEmbed specification.

How to use it:

Use the following endpoint to request the corresponding video information using only a Dailymotion video URL. Add in URL params from the table below to configure the response.


						


			https://www.dailymotion.com/services/oembed?url=VIDEO_URL?PARAM1&PARAM2

Example call using URL parameters:


						


			https://www.dailymotion.com/services/oembed?url=https://www.dailymotion.com/video/x7tgad0?maxwidth=480&maxheight=269&autoplay=true

Example JSON response:


						


			{
  "type": "video",
  "version": "1.0",
  "provider_name": "Dailymotion",
  "provider_url": "https://www.dailymotion.com",
  "title": "Midnight Sun | Iceland",
  "description": "",
  "author_name": "Dailymotion player demo",
  "author_url": "https://www.dailymotion.com/dailymotionplayerdemo2",
  "width": 478,
  "height": 268,
  "html": "<iframe frameborder=\"0\" width=\"478\" height=\"268\" src=\"https://www.dailymotion.com/embed/video/x7tgad0?autoplay=true\" allowfullscreen allow=\"autoplay\"></iframe>",
  "thumbnail_url": "https://s2.dmcdn.net/v/SBL5q1U_Klu8xz_7m/x240",
  "thumbnail_width": 427,
  "thumbnail_height": 240
}

Available URL parameters

Parameter	Parameter description
`url`	The Dailymotion URL for a video (required)
`maxwidth`	The maximum width the embedded video can take on the destination page
`maxheight`	The maximum height the embedded video can take on the destination page
`format`	Response format, either `json` or `xml`. Defaults to `json`
`callback`	When returning JSON, wrap in this function
`autoplay`	Automatically start playback of the video. Defaults to `false`
`syndication`	Your syndication key

Customize the player

The Dailymotion Player can be customized to match your brand perfectly, with a modern UI that works across all platforms. If you want to develop a custom experience our SDKs give full control of the Player via the Player API.

Depending on where and how you embed the player, how the player is customized will vary.

On web

The main Player experience must be created and managed through the Player configurator UI in the Partner Space (Players tab) or the REST API, these allow you to configure the player settings seen from the list here. Additional customization is achievable at runtime using player parameters seen from the list here

In-app

The Player in-app using our native SDKs can be customized using client-side parameters. The parameters which are available in these environments can be found in their corresponding iOS parameters and Android parameters sections.

Working with player settings

When embedding the Player on the web it’s required to create a Player configuration that specifies the Player settings and behavior.

The Player settings manage the main player experience and are controlled through the Player configurator UI in the Partner Space (Players tab) or using the REST API.

Player setting	Field	Default	Description	Values
Autostart	`autostart`	`firstTimeViewable`	To control the player’s autoplaying behaviour	`"firstTimeViewable"`,`"on"`, `"off"`
Picture-in-Picture	`pip`	`off`	To specify the Dailymotion picture-in-picture behaviour	`"instant"`, `"on"`, `"off"`
Start PiP in Expanded	`enable_start_pip_in_expanded`	`false`	Whether to start the PiP in expanded mode on small viewports	`"true"`,`"false"`
Aspect ratio	`aspect_ratio`	`16:9`	To control the aspect ratio of the player. Only available when embedding using JavaScript	`"16:9"`, `"4:3"`, `"1:1"`, `"3:4"`, `"9:16"`, `"inherit"`
Color	`color`	`undefined`	Change the default highlight color used in the controls (hex value without the leading `#`). Color set in the Partner HQ will override this param	–
Player Controls	`enable_playback_controls`	`true`	Whether to enable/disable the Player controls during a video	`"true"`,`"false"`
Ads Controls	`enable_ads_controls`	`true`	Whether to enable/disable the Player controls during an ad	`"true"`,`"false"`
Logo	`enable_dm_logo`	`true`	Whether to display the Dailymotion logo or not	`"true"`,`"false"`
Queue	`enable_queue`	`true`	Whether to show the Up Next queue. see note below	`"true"`,`"false"`
Auto Next	`enable_autonext`	`true`	Whether to play automatically the next item in the queue	`"true"`,`"false"`
Sharing	`enable_sharing`	`true`	Whether to enable/disable the sharing button	`"true"`,`"false"`
Video Info	`enable_info`	`true`	To remove title and video owner information	`"true"`,`"false'`
Channel Owner Link	`enable_channel_link`	`true`	To remove the link on the channel	`"true"`,`"false"`
Video Title Link	`enable_video_title_link`	`true`	To remove the link on the video title	`"true"`,`"false"`
Sharing URL	`enable_sharing_url_location`	`page link`	To control whether the user shares the page link or the dailymotion link location when using the share functionality of the player. The page link is only available when embedding using JavaScript	–
Start Screen Link	`enable_startscreen_dm_link`	`true`	Whether to display “Watch on Dailymotion” link on start screen	`"true"`,`"false"`
Video titles in carousel thumbnails	`enable_titles_in_video_cards`	`true`	Whether to display the titles of the videos in the carousel of the queue thumbnails	`"true"`,`"false"`
Watermark type	`watermark_image_type`	`none`	To control the image displayed on the bottom right corner of the Dailymotion player.	`"none"` allows you to turn off the watermark. `"from_channel"` allows you to use the image currently defined on the channel level. `"custom"` allows you to define a custom image as a watermark.
Watermark URL	`watermark_image_url`	`undefined`	To specify the custom image which is displayed as a watermark. To use this setting, `watermark_image_type` should be set to `“custom”`	–
Watermark link type	`watermark_link_type`	`none`	To control the redirection link assigned to the watermark available on the bottom right corner of the Dailymotion player.	`"none"` allows you to turn off the redirection link on the watermark. `"from_channel"` allows you to use the redirection link currently assigned to the watermark defined on a channel level. `"custom"` allows you to define a custom redirection link to your watermark
Watermark link URL	`watermark_link_url`	`undefined`	To specify the custom link which has to be used when you click on the watermark. To use this setting, `watermark_link_type` should be set to `“custom”`	–

Working with player parameters

Additional runtime customization is achievable when embedding the Player on the web using client-side parameters from the table below. These parameters allow you to specify additional Player behavior or pass in required values to a specific Player embed. Note that the main Player experience is controlled using Player Settings managed in the Partner Space (Players tab) or REST API.

These URL encoded query strings can easily be added to the data-params attribute on the Player embed script, within the createPlayer() method when using the Player API or passed into the src URL for an Iframe embed.

Name	Parameter	Default	Description	Values	Type
Video ID	`video`	undefined	The ID of the video to load	–	String
Playlist ID	`playlist`	undefined	The ID of the playlist to load	–	String
Advertising Config	`customConfig`	undefined	For passing in unique keys for advertising purposes. For example, `customConfig[customParams]=adKey`	–	Object
Scale mode	`scaleMode`	fit	To adjust the player’s video focus	`"fit"`, `"fill"`, `"fillLeft"`, `"fillRight"`, `"fillTop"` & `"fillBottom"`	Enum
Mute	`mute`	false	Whether to mute the video or not. To note, enabling mute may impact monetization. The Player provides smart mute behavior, it tries to automatically start the video playback with sound. If this isn’t possible due to browser prevention, there is a fallback mechanism and the Player reattempts to play the video but with the sound set to mute.	`"true"`,`"false"`	Boolean
Start	`startTime`	`0`	Specify the time (in seconds) from which the video should start playing	–	Number
Loop	`loop`	false	To set the video to loop. Check the dedicated section for more details.	`"true"`,`"false"`	Boolean

Player embed script

Add the URL encoded query string to the data-params attribute with the Player embed script.


						


			<script src="https://geo.dailymotion.com/player/{Player ID}.js" data-video="x84sh87" data-params="startTime=15&loop=true&mute=true"></script>

Player library script

Add the URL encoded query string to the params object within the createPlayer() method when creating the Player with the Player Library and Player API.


						


			dailymotion
  .createPlayer("my-dailymotion-player", {
    video: "x84sh87",
    playlist: "x5zhzj",
    params: {
      startTime: 15,
      loop: true,
      mute: true,
    },
  })
  .then((player) => console.log(player))
  .catch((e) => console.error(e));

iFrame embed

Add the URL encoded query string after the video ID in the src attribute of the iFrame.


						


			<iframe frameborder="0" width="640" height="360" 
    src="https://geo.dailymotion.com/player/{Player ID}.html?video=x84sh87&startTime=5&mute=true" 
    allowfullscreen 
    allow="autoplay; fullscreen; picture-in-picture">
</iframe>

Working with loop

Your embedded content can be automatically played again by adding the loop parameter to your embed method on either a video or a playlist object.

Depending on your Player configuration and your object, you will be able to either loop a list of recommendations, a playlist or a single video.

Player configuration for specific loop behaviors

See how to set up your Player configuration to achieve the intended loop behavior:

Expected loop behavior	Embedded object	Loop	Parameters in Player configuration
Expected loop behavior	Embedded object	Loop	Queue	Autonext
Loop upon single video Video loops smoothly without any interruption	Video	`true`	Disabled	Disabled
Loop upon recommendation list Once your video is finished, the recommended videos will play. When the last video reaches the end, the playback will play again from the beginning of the queue.	Video	`true`	Enabled	Enabled
Loop upon playlist Once your video is finished, your playlist will play. When the last video reaches the end, the playlist will play again from the beginning.	Playlist or Video within a playlist	`true`	Enabled	Enabled

Integration examples

Check the following examples to see how to add the loop parameter in your embed method.

Player Embed Script

Player Library Script

Player iFrame

Working with Picture-in-Picture(PiP)

The Dailymotion Player is compatible with native Picture-in-Picture (PiP) in addition to our own out-of-the-box Picture-in-Picture product.

Native PiP allows viewers to continue watching content while browsing on other apps and websites on their devices. This functionality is controlled by the browsers APIs and cannot be customized: the below method doesn’t apply to it.

Our own Dailymotion PiP solution allows viewers to continue watching your content while scrolling the page. Our PiP is easily managed through the Partner HQ and can be customized: it delivers a smooth and engaging user experience and will help boost your monetization opportunities.

A verified Partner can enable the Dailymotion Picture-in-Picture feature in the Player settings using the Partner HQ or REST API. This functionality requires JavaScript and can only be used with the Player Embed Script or Player Library Script.

PiP settings

As the user scrolls the page, the video must transition from playing in the in-page video player to playing in a sticky video player, which remains in view as the user scrolls the page.

Value	Info
`pip: off`	The PiP is not enabled
`pip: on`	The PiP will tranisition after the main player was firstly seen by the user and after they scroll the page so less than 50% of the main player is within the viewport
`pip: instant`	The PiP will launch once the player is loaded and the main player isn’t in the user’s viewport

When triggered a mini player will be displayed, by default, at the bottom right on wide screens and at the top on narrow screens. Further positioning can be achieved using custom CSS, see the section below “PiP customization”.

PiP positioning

Desktop-specific behavior

The PiP frame will, by default, transition and appear at the bottom right of the screen. It’s optimized for viewability, performance, monetization and built with a minimal, user-centric design. The desktop PiP will have a minimum size of 410px width with a 16:9 aspect ratio sized responsively.

Mobile-specific behavior

The PiP frame will, by default, appear at the top of the screen and take 100% of the width.

On mobile or on a narrow viewport, the PiP Player will automatically adapt and have two modes:

Value	Info
`collapsed`	The video Player height is reduced not to interfere with page content (articles, text, images)
`expanded`	The video Player is at full width and height (preserving video ratio)

By default, the Player will initially transition to a collapsed format unless the configuration is set to “Start PiP in expanded” option in the Partner HQ or REST API. The viewers can alter between the mobile PiP formats using the collapsed toggle on the UI. During advertisements the PiP will automatically expand to preserve ad viewability.

PiP customization

It’s possible to reposition the PiP by adding specific CSS code for the dedicated element IDs. You can find CSS samples below and view demos in our CodePen Collection.

To specifically target small and large viewports, use the dedicated CSS selectors:

CSS Selector	Info
`#dailymotion-pip-large-viewport`	Targets PiP for large viewports
`#dailymotion-pip-small-viewport`	Targets PiP for small viewports

For each CSS selector, specify the CSS properties and their values to adjust your PiP positioning:

CSS Properties	Info
`--position-top`	Property sets the top margin for the PiP element
`--position-bottom`	Property sets the bottom margin for the PiP element
`--position-right`	Property sets the right margin for the PiP element
`--position-left`	Property sets the left margin for the PiP element

You can use any CSS unit within the CSS properties.

Examples:


						


			/* Desktop */
#dailymotion-pip-large-viewport {
/* PiP is positioned in the top left corner with a left margin of 20 pixels and a top margin of 0 pixel */
  --position-left: 20px; /* can be any CSS unit: like px, em, rem, etc */
  --position-top: 0px; /* can be any CSS unit: like px, em, rem, etc */
}

/* Mobile & tablet */
#dailymotion-pip-small-viewport {
  --position-top: 10px; /* can be any CSS unit: like px, em, rem, etc */
}

Programmatically interacting with PiP

The PiP can be programmatically closed, resumed, repainted, collapsed or expanded using allocated methods via the Player API. The PiP setting has to be enabled in the Player configuration. Once the PiP is activated, the Player API exposes five global methods:

Type	Method	Info
Close PiP	`dailymotion.pipClose()`	To suspend PiP functionality.
Resume PiP	`dailymotion.pipResume()`	To resume PiP functionality after it has been suspended.
Repaint PiP	`dailymotion.pipRepaint()`	To repaint PiP seamlessly when dynamic elements are changing the layout of a page.
Collapse mobile PiP	`dailymotion.pipCollapse()`	To collapse the sticky PiP displayed on mobile (delayed if an ad is running).
Expand mobile PiP	`dailymotion.pipExpand()`	To expand the sticky PiP displayed on mobile.

Working with autostart

In recent years browsers have been setting stricter autostart policies. Although you can activate the autostart behavior in the player’s configuration, complete control over autostart behavior isn’t possible, due to users’ browser settings.

Our player includes smart autostart behavior that is engineered to maximize the chances of automatically playing a video in all browser conditions. When autostart is enabled, the player goes through the following waterfall:

If the browser allows autostarting, the player will automatically play with sound.
If autostart is prevented by the browser, it will attempt to play the video again but will automatically mute itself. In this case on mobile devices, the player will display a Tap to unmute call to action that allows users to unmute with a single tap anywhere on the player.
If the browser doesn’t allow autostart the player will display a start screen and wait for the user’s interaction to start video playback.

Working with the advertising configuration

The advertising parameter is a custom parameter used for targeting and reporting purposes. Verified partners can use the parameter to dynamically pass information to their VAST tag. The parameter is passed in on player initialization and can be updated dynamically by the Player API.

Depending on the embed type some encoding may be required if utilizing multiple ads parameters values.

Type	Info	Encoding required
Player Embed Script	Pass values using the `customConfig[customParams]` parameter in the `data-params` attribute	Yes
Player Library Script	Pass values when using the `createPlayer()` method	No
Player iFrame	Pass value using query string “customConfig[customParams]”	Yes
Update with the Player API	Updating the ad values using the `setCustomConfig()` method	No

Some configuration is also required on our side. If more complex use-cases need to be handled we invite you to contact our Ads Ops team. Please see examples of the below embed types on how to pass in the parameter on initialization.

Example with the Player Embed Script

Pass values through using the customConfig[customParams] parameter in the data-params attribute in the script tag. Example values: [test/value=1234&value2=3214]


						


			<script src="https://geo.dailymotion.com/player/{Player ID}.js" data-video="" data-params="logo=false&customConfig[customParams]=test%2Fvalue%3D1234%26value2%3D3214"></script>

Example with the Player Library Script

Pass values through when creating the player using the createPlayer() method. Example values [test/value=1234&value2=3214]


						


			dailymotion.createPlayer("player1", {
  video: "x84sh87",
  params: {
    customConfig: {
      customParams: "test/value=1234&value2=3214",
    },
  },
});

Example of updating values with the Player API [ `setCustomConfig()`]

Using the method setCustomConfig()in order to dynamically update the advertising parameter value, a new value will be sent which then gets updated when the player loads the next video file.


						


			dailymotion.getPlayer("player").then((player) => {
    player.setCustomConfig({ customParams: new_params })
});

Example with the Player iFrame

Pass value through using the Player query string parameter “customConfig[customParams]”. Example values: [test/value=1234&value2=3214]


						


			<iframe src="https://geo.dailymotion.com/player/x938as.html?video=x84sh87&customConfig[customParams]=test/value=1234&value2=3214&startTime=10" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen frameborder="0" width="640" height="360"></iframe>

Working with the referrer policy

It may be required to adjust the referrer-policy string to match your own privacy policy or integration requirements. The Dailymotion video player relies on the referrer passing the full URL to provide valuable products to publishers. Our player by default won’t specify the referrer-policy setting, if no referrer-policy is set the browser’s default policy will be applied.

You have full control over how much data is available in the referrer. If you want the Dailymotion video player to receive the full URL in the Referer HTTP Header you need to add the “no-referrer-when-downgrade” to the referrer-policy parameter in the player embed. Please see the embed examples below on how to adjust the policy when using web embeds.

Player script embed


						


			<script src="https://geo.dailymotion.com/player/{Player ID}.js" data-video="x84sh87" referrerpolicy="no-referrer-when-downgrade"></script>

Player library embed


						


			dailymotion.createPlayer("player", {
  video: "x84sh87",
  referrerPolicy: "no-referrer-when-downgrade",
});

iFrame embed


						


			<iframe src="https://geo.dailymotion.com/player/x938as.html?video=" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen frameborder="0" width="640" height="360" referrerpolicy="no-referrer-when-downgrade"></iframe>

Working with the REST API

To create a Player through the Dailymotion REST API you need to have the manage_players specific permissions. Please refer to the list of extended permissions to obtain them.
Then, define and specify the required fields and perform a POST request. Once a Player has been created and associated with your account, it is possible to update or delete it. Please refer to the exhaustive list of Player fields to customize it.

Example of Player creation:


						


			curl -X POST -H 'Authorization: Bearer ${ACCESS_TOKEN}' \
       -d 'label=My new player' \
       https://api.dailymotion.com/<YOUR_CHANNEL_ID>/players

To embed content with your Player, you need to add it to your page using a generated script embed or iFrame. You can retrieve the script URL of your Player with the REST API using the below fields depending on which embed method you want to use.
To know which of the embed methods best suits your needs, please refer to the description of each integration methods.

Embed type	Player API field	Description
Embed script URL	`embed_script_url`	Retrieve the URL of the Player Embed Script. Add this URL in a script HTML tag. This will load the Player exactly where it is added in the HTML page. This method also provides access to the Player API.
Library script URL	`lib_script_url`	Retrieve the URL of the Player Library Script. Add this URL in a script HTML tag to load your library, and create a Player programatically using the Player API.
Embed HTML URL	`embed_html_url`	Retrieve the URL of the iFrame Player. Add this URL in an iFrame HTML tag. This embed method isn’t using JavaScript, advanced functionalities such as `PiP` or `firstTimeView` will not be available.

You can test and learn more about the REST API with our API Explorer.

Working with TCF2

The embedded Dailymotion Player complies with the IAB TCF 2 standards and automatically detects any TCF 2-certified CMP. In such a case, it collects consent sent by a Publisher’s TCF 2.-certified CMP and does not deploy its independent built-in consent dialogue (i.e. a cookie banner). Note that Dailymotion is a registered IAB Vendor (n° 573). When available, the Dailymotion Player will always rely on the consent that it receives from a CMP through the standard CMP integration. The CMP integration is currently offered at no additional fees to Publishers.

Having a single cookie banner contributes to a less disruptive user experience which may improve the consent rate and potentially result in increased revenues. If the embedding website doesn’t use a TCF 2-compliant CMP, we use the Player’s built-in cookie banner as a fallback solution.

JavaScript Player API Reference

Each script used to embed the player also provides access to the Player API without any additional configuration, everything is available and bundled from the Player embed script. The Player API allows you to create a player, retrieve information about a specific player state, listen to player events and trigger player methods.

The player is loaded asynchronously using a Promise, which on resolve returns a player object. In order to get access to a player, you can retrieve a player using one of the below methods.

Methods

API commands can be called to programmatically create and control the player.

Global methods:

Method	Info
`dailymotion.createPlayer('source_id', {video:String, playlist:String, player:String, params:Object, referrerPolicy:String})`	On resolve the `Promise` will return a created player at the position of the `source_id` on the page. A `video`, `playlist` or `player` can by specified using their corresponding paramater and unique id. If you already have multiple player configurations embedded in your page, you must specify the `player` configuration to use, otherwise the default one will apply, see multiple player configurations. For additional customization you can add runtime `params` to the player, see Player parameters
`dailymotion.getPlayer()`	On resolve the `Promise` will return a player, if there is a single player instance, otherwise it will be rejected if there are multiple player embeds
`dailymotion.getPlayer('source_id')`	On resolve the `Promise` will return the specified player, pass the container ID of the specific player as an argument into the `getPlayer()` method
`dailymotion.getAllPlayers()`	Returns an array of `Promises`. Each `Promise` returns one of the player of the page
`dailymotion.pipClose()`	To deactivate PiP, the method applies to the whole webpage
`dailymotion.pipResume()`	To resume PiP, the method applies to the whole webpage.
`dailymotion.pipCollapse()`	To collapse the mobile sticky PiP, the method applies to the whole webpage
`dailymotion.pipExpand()`	To expand the mobile sticky PiP, the method applies to the whole webpage
`onScriptLoaded()`	A callback function to reflect the loading of the Player Library Script which is triggered when the global variable is correctly initialized in the window object

Using the callback function `- onScriptLoaded()`

The callback function can be used to determine when the Player Library Script is loaded and the global Dailymotion variable is initialized.


						


			if (window.dailymotion === undefined) {
  window.dailymotion = { 
    onScriptLoaded: () => {
      // Create a video player when script has loaded
    }
  }
} else {
  // Script already loaded
}

Player methods:

Once you’ve access to a player on the page, you can then control that player programmatically.

Method	Info	Values	Types
`loadContent()`	To load a video or a playlist. You can play a specific video followed by a playlist by specifying both the video and playlist IDs Note that the loaded content playback is based on the `autostart` configuration defined in the PlayerID settings	`({video:String, playlist:String, startTime:Number})`	Object
`play()`	To start or resume video playback	–	–
`pause()`	To pause video playback	–	–
`setVolume()`	To set the player’s volume to the specified level	Between `0` & `1`	Float
`setSubtitles()`	To activate a subtitles track to a specified language if available	–	String
`setQuality()`	To set the video’s quality to the specified quality	[`240`, `380`, `480`, `720`, `1080`, `1440`, `2160` `default`]	String
`seek()`	To seek to the specified time in video playback in seconds	–	Number
`setFullscreen()`	To enable or disable fullscreen mode	`"true"`,`"false"`	Boolean
`setPlaybackSpeed()`	To modify the playback speed, if the value passed does not match one from the list, the playback speed is rounded to the superior one. The playback speed is kept across videos	`[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]`	Float
`setMute()`	To set the mute mode of the player	`"true"`,`"false"`	Boolean
`setCustomConfig()`	To set the config for ads, dynamically update the advertising parameter value, use the method to send a new value which then gets updated when the player loads the next video file	–	Object
`setScaleMode()`	To adjust the player view of the video screen	`"fit"`, `"fill"`, `"fillLeft"`, `"fillRight"`, `"fillTop"` & `"fillBottom"`	Enum
`updateParams()`	To change the following player config values at runtime `scaleMode`, `mute`, `volume` & `customConfig`	–	Object
`getRootNode()`	Retrieve the node where the player iframe is contained	`<div id="player1" class="dailymotion-player-root"></div>`	HTML Node
`destroy()`	To destroy a player instance pass in specified player id	–	–
`on()`	To set up a `listener` function returning the player state that will be called whenever the specified `event` is dispatched by a player instance. An optional object can be passed as a 3rd parameter. The only available option is currently `once`, and expects a `Boolean` value indicating that the listener should be invoked at most once after being added. If `true`, the listener would be automatically removed when invoked	`(event:String, listener:Function, [{once:Boolean}])`	–
`off()`	To remove a previously registered event `listener` from a player instance. If the `listener` is not specified, it will remove any existing listeners associated with the event	`(event:String, [listener:Function])`	–
`getState()`	To retrieve the current state of the player. See usage in Player API State section here	–	–
`getSettings()`	To retrieve the configuration of a Player as defined in your Partner Space. See available Player settings here	–	–

Events

The player emits events relating to the change of the player state, video playback and ad content. To pick up on these events use the method player.on()


						


			player.on('YOUR_EVENT', callback) // callback function will be trigger each time 'YOUR_EVENT' is fired
player.on('YOUR_EVENT', callback, { once: true }) // callback function will be trigger only the first time 'YOUR_EVENT' is fired

It is also possible to unbind specified listeners using an additional method player.off()


						


			player.off('YOUR_EVENT', callback) // the specific callback associated to 'YOUR_EVENT' will be removed
 player.off('YOUR_EVENT') // every listeners binded to 'YOUR_EVENT' will be removed

Player events

Event	Info
`PLAYER_ASPECTRATIOCHANGE`	Sent when the aspect ratio of the player changes after calling `setAspectRatio('4:3')`)
`PLAYER_CRITICALPATHREADY`	Sent every time a video is ready to play, or started playing (depending on autoplay settings, and their resolution by the browser), or is unable to play (blocked, restricted, unavailable). Listen to this event if you want to defer doing network-heavy and JavaScript-heavy work, to allow the optimal delivery of the first frames of the video to the use
`PLAYER_END`	Sent when the playback of the content video, and eventual post-roll ad video is completed
`PLAYER_ERROR`	Sent when the player triggers an error. Error code available in the Player State object
`PLAYER_PIPEXPANDEDCHANGE`	Sent when the Picture-in-Picture expanded mode changes, only on small viewports
`PLAYER_PLAYBACKPERMISSION`	Sent each time any playback request has failed or if the initial playback attempt has succeeded
`PLAYER_PRESENTATIONMODECHANGE`	Sent when the player transitions to or from a Picture-in-Picture state, either native or the dailymotion version, or when the player enters or exits the fullscreen state
`PLAYER_SCALEMODECHANGE`	Sent when the scale mode of the player changes after using `setScaleMode()`
`PLAYER_START`	Sent the first time the player attempts to start the playback, either because of user interaction, an autoplay parameter or an API call (e.g `play()`, `loadContent()`, etc.)
`PLAYER_VIDEOCHANGE`	Sent when a new video has been loaded in the player. (e.g. after calling `loadContent({ video: 'xID' })`, or at player start-up)
`PLAYER_VIEWABILITYCHANGE`	Sent when the player viewability values changes (50% of the player is within the user’s viewport)
`PLAYER_VOLUMECHANGE`	Sent when the volume level or mute state changes
`PLAYER_HEAVYADSINTERVENTION`	Sent when the player is unloaded from the page due to Chrome browser’s heavy ads intervention policies

Video Events

Video Event	Info
`VIDEO_BUFFERING`	Sent when the player has to temporarily stop video playback for further buffering of content
`VIDEO_DURATIONCHANGE`	Sent when the duration property of the video becomes available or changes after a new video load
`VIDEO_END`	Sent when the player completes playback of the content video
`VIDEO_PAUSE`	Sent when the video playback has paused
`VIDEO_PLAY`	Sent when the playback state of the content video is no longer paused, as a result of the play method or the autoplay attribute
`PLAYER_PLAYBACKSPEEDCHANGE`	Sent when the playback speed changes
`VIDEO_PLAYING`	Sent when the content video starts playing, after the play or waiting event
`VIDEO_PROGRESS`	Sent when the browser is fetching the media data
`VIDEO_QUALITIESREADY`	Sent when video qualities are available
`VIDEO_QUALITYCHANGE`	Sent when the video quality changes
`VIDEO_SEEKEND`	Sent when the player has completed a seeking operation
`VIDEO_SEEKSTART`	Sent when the player starts to seek to another position in the video timeline
`VIDEO_SUBTITLESCHANGE`	Sent when the current subtitle changes
`VIDEO_SUBTITLESREADY`	Sent when subtitles are available
`VIDEO_START`	Sent when the player begins playback of the content video
`VIDEO_TIMECHANGE`	Sent when the playback position changes

Ad Events

Ad Event	Info
`AD_COMPANIONSREADY`	Sent when a companion ad is received. Companion ads should be played in sync with the main ad (linear/non-linear) by listening to events `AD_START` and `AD_END`
`AD_DURATIONCHANGE`	Sent when the duration property of the video advertisement becomes available or changes after a new video load
`AD_END`	Sent when the player completes playback of an ad
`AD_IMPRESSION`	Sent when the first ad frame is displayed
`AD_LOADED`	Sent when the player has loaded and buffered the creative’s media and assets either fully or to the extent that it is ready to play the media
`AD_PAUSE`	Sent when the player pauses an ad
`AD_PLAY`	Sent when the ad playback starts or continues after being in a paused state
`AD_START`	Sent when the player begins playback of an ad video
`AD_TIMECHANGE`	Sent when the playback position of an ad changes
`AD_CLICK`	Sent when a user clicks on a video ad

Example of adding a listener to the player event [PLAYER_START]


						


			player.on(dailymotion.events.PLAYER_START, (state) => {
  console.log("Received PLAYER_START event. Current state is:", state);
});

Example of adding a unique listener

If you want a listener to be invoked only once, pass an additional object composed of {once:true} into the method.


						


			player.on(
  dailymotion.events.PLAYER_START,
  (state) => {
    console.log("Received PLAYER_START event. Current state is:", state);
  },
  { once: true }
);

State

To access data use the getState() method, on resolve, it will return an object representation of the player state.

From the state, it is possible to access required player, video or advertising data for your video application or analytics purposes. You can determine for example, if the PiP is currently displayed, the duration of the video or if the player is in or out of the user’s viewport.

Name	Type	Info	Values
`adAdvertiserName`	`String`	The advertiser name or `null`	–
`adCompanion`	`Array`	An array of parsed companion ad creatives	–
`adCreativeAdId`	`String`	The universal ad id node from the VAST or the ad id of the creative node from the VAST	–
`adCreativeId`	`String`	The id of the creative node from the VAST	–
`adDescription`	`String`	The description of the ad or `null`	–
`adDuration`	`Number`	The duration time of the ad resource in seconds	–
`adEndedReason`	`String`	The reason why the last ad ended	`"error"`, `"stopped"`, `"skipped"`, `"interrupted"` or `null`
`adError`	`Object`	Contains the infos about the last error that occurred with the ad or `null`	–
`adId`	`String`	The id of the ad	–
`adIsPlaying`	`Boolean`	If an ad resource is running	`"true"`,`"false"`
`adIsSkippable`	`Boolean`	If the ad can be skipped by the user at this moment	`"true"`,`"false"`
`adPosition`	`String`	The position of the ad in the video,`null` if no ad is running	`"preroll"`, `"midroll"`, `"postroll"` or `"null"`
`adSkipOffset`	`Number`	The remaining time before the ad can be skipped or -1 if no ad is running
`adTime`	`Number`	The current playback position of an ad in seconds	–
`adTitle`	`String`	The title of the ad or `null`	–
`playerAspectRatio`	`String`	The player current aspect ratio	`"inherit"`, `"16:9"`, `"4:3"`, `"1:1"`, `"3:4"`, `"9:16"`
`playerError`	`Object`	Contains information about the last error that occurred in the player, including `title`, `message` and `code`	–
`playerIsAlertDialogDisplayed`	`Boolean`	If the player has the alert dialog displayed	`"true"`,`"false"`
`playerIsBuffering`	`Boolean`	If the player is loading the media resource	`"true"`,`"false"`
`playerIsCriticalPathReady`	`Boolean`	If the player is ready to play	`"true"`,`"false"`
`playerIsMuted`	`Boolean`	If the player is muted	`"true"`,`"false"`
`playerIsNavigationEnabled`	`Boolean`	If the next and previous controls in the PiP are enabled	`"true"`,`"false"`
`playerIsPipNativeSupported`	`Boolean`	If the player does support the native PiP	`"true"`,`"false"`
`playerIsPlaybackAllowed`	`Boolean`	If the player is allowed to play, depending on the browser permissions	`"true"`,`"false"`
`playerIsPlaying`	`Boolean`	If the player is currently playing video or ad content	`"true"`,`"false"`
`playerIsStartScreen`	`Boolean`	If the player is in start screen	`"true"`,`"false"`
`playerIsReplayScreen`	`Boolean`	If the player is in replay screen	`"true"`,`"false"`
`playerIsViewable`	`Boolean`	If the player is within the viewability threshold	`"true"`,`"false"`
`playerNextVideo`	`String`	The id of the video next video in the queue	–
`playerPipDisplay`	`String`	The current display mode of PiP, If its display on a larger/smaller Screen	`"largeViewport"`, `"smallViewport"`
`playerPipStatus`	`String`	The current PiP feature status	`"enabled"` ,`"disabled"` or `"closed"`
`playerPipIsExpanded`	`Boolean`	If the mobile sticky PiP is expanded	`"true"`,`"false"`
`playerPlaybackPermissionReason`	`String`	The reason why the playback has been allowed or not	`"allowedFallbackMuted"`, `"allowed"`, `"rejectedInactiveTab"`, `"rejectedByBrowser"`
`playerPresentationMode`	`String`	The current mode where the player is displayed	`"inline"`, `"nativePip"`, `"pip"` or `"fullscreen"`
`playerPrevVideo`	`String`	The id of the video previous video which was played	–
`playerScaleMode`	`String`	The player’s current scale mode	`"fit"`, `"fill"`, `"fillLeft"`, `"fillRight"`, `"fillTop"`, `"fillBottom"`
`playerVolume`	`Number`	The current volume level. The volume and mute params operate separately, therefore, you could have a player with full volume, but also muted	Between `0.0` to `1.0`
`playerPlaybackSpeed`	`Number`	The player current playback speed	`[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]`
`videoCreatedTime`	`Number`	The timestamp that corresponds to the creation of the video	–
`videoDuration`	`Number`	The duration time of the video resource in seconds	–
`videoId`	`String`	The unique Id of the video	–
`videoIsPasswordRequired`	`Boolean`	If the video required a password to be read	`"true"`,`"false"`
`videoOwnerId`	`String`	The id of the owner of the video	–
`videoOwnerScreenname`	`String`	The screen name of the owner of the video	–
`videoOwnerUsername`	`String`	The user name of the owner of the video	–
`videoQualitiesList`	`Array`	The video qualities that are available	–
`videoQuality`	`String`	The quality value of the video loaded	–
`videoSubtitles`	`String`	The language code of the subtitle track that is currently enabled	–
`videoSubtitlesList`	`Array`	The language codes of the subtitle tracks which are available for the current media resource	–
`videoTime`	`Number`	The current playback position of the video in seconds	–
`videoTitle`	`String`	The title of the video loaded	–
`videoIsCreatedForKids`	`String`	If the video is created for Children	–

Example player state


						


			{
  "adAdvertiserName": "Dailymotion advertiser",
  "adCompanion": null,
  "adCreativeAdId": null,
  "adCreativeId": "video",
  "adDescription": "Dailymotion ad",
  "adDuration": 15.07,
  "adEndedReason": null,
  "adError": null,
  "adId": "32251",
  "adIsPlaying": true,
  "adIsSkippable": true,
  "adPosition": "midroll",
  "adSkipOffset": 0,
  "adTime": 6.42,
  "adTitle": "Dailymotion_ad",
  "playerAspectRatio": "16:9",
  "playerError": null,
  "playerIsAlertDialogDisplayed": false,
  "playerIsBuffering": false,
  "playerIsCriticalPathReady": true,
  "playerIsMuted": null,
  "playerIsNavigationEnabled": true,
  "playerIsPipNativeSupported": true,
  "playerIsPlaybackAllowed": true,
  "playerIsPlaying": true,
  "playerIsReplayScreen": false,
  "playerIsStartScreen": false,
  "playerIsViewable": true,
  "playerNextVideo": "x81ixxp",
  "playerPipDisplay": "largeViewport",
  "playerPipIsExpanded": false,
  "playerPipStatus": "enabled",
  "playerPlaybackPermissionReason": "allowed",
  "playerPresentationMode": "inline",
  "playerPrevVideo": null,
  "playerScaleMode": "fit",
  "playerVolume": 1,
  "videoCreatedTime": 1551103337,
  "videoDuration": 214.06,
  "videoId": "x730nnd",
  "videoIsPasswordRequired": false,
  "videoOwnerId": "x23rwb7",
  "videoOwnerScreenname": "Player team",
  "videoOwnerUsername": "player-team",
  "videoQualitiesList": ["1080", "720", "480", "380", "240", "144"],
  "videoQuality": "Auto",
  "videoSubtitles": "en",
  "videoSubtitlesList": ["fr", "en"],
  "videoTime": 60.12,
  "videoTitle": "Dailymotion video",
}

Access the Player settings

It’s possible to retrieve the initial player configuration including the player ID using the getSettings() method. On resolve, this returns an object representation of the player configuration.

Example of logging the player settings to the console


						


			dailymotion
  .getPlayer()
  .then((player) => {
    console.log(player.getSettings());
  })
  .catch((e) => console.error(e));

Example player settings object


						


			{
  "aspectRatio": "16:9",
  "autostart": "on",
  "color": "D0021B",
  "enableAdsControls": true,
  "enableAutoNext": true,
  "enableChannelLink": true,
  "enableDMLogo": true,
  "enableInfo": true,
  "enablePlaybackControls": true,
  "enableQueue": true,
  "enableSharing": true,
  "enableSharingUrlLocation": false,
  "enableStartPipExpanded": false,
  "enableStartscreenDMLink": false,
  "enableTitlesInVideoCards": true,
  "enableVideoTitleLink": true,
  "id": "PLAYER_ID",
  "pip": "instant",
  "watermarkImageType": "from_channel",
  "watermarkImageUrl": "",
  "watermarkLinkType": "from_channel",
  "watermarkLinkUrl": ""
}

Optimization info

Please check out the player embed collection on our Dailymotion codepen account to see some useful code snippets that you can test and use within your project.

In order to benefit from the best performance of the new player solution, please consider the following tips from our engineers.

Add preload and preconnect directives towards the top of the <head> section of the HTML response.


						


			 <link rel="preload" href="{https://geo.dailymotion.com/libs/player/{Player ID}.js" as="script">

Load the player or player library directly, avoid using any third-party solution such as Google Ad Manager. Player libraries and the player embed script should be added to the <body> section of your document.
Load the player library in the <body> section, ensure any code that interacts with the Player API is loaded after it.
The Dailymotion player is a sophisticated piece of software that handles several complex processes for you (adaptive streaming, ads monetization, tracking and many more). The video player loading should be prioritized in front of other resources where possible. It’s advisable to reduce the amount of JavaScript executed before the player loads; use the "defer" attribute on non-critical scripts, or load them dynamically via JavaScript instead of HTML.

Changelog

2022-12-05

After a few months of transition, the Legacy JavaScript Player API References linked to our JavaScript SDK have been removed from our official documentation.
Please use our latest integration methods for all your Player embeds, and refer to the dedicated Player API References. Don’t hesitate to reach out to your Content Manager or our Support team if you need assistance.

2022-11-23

VIDEO_DURATIONCHANGE event within the JavaScript Player API has been updated, it will only be sent during video content duration change and no longer for ad duration change. See full list of player event.

2022-11-03

New dailymotion.pipRepaint() method available to maintain PiP positioning on a page with dynamic elements (collapsing menu bar, shifting size header, …)

2022-10-27

Deprecation of setControls() method and the related PLAYER_CONTROLSCHANGE event and playerAreControlsEnabled state.
You can now decide to enable/disable your playback and ad controls independently with the two new toggles in your Player configurator: Player controls and Ads controls.

2022-10-13

PiP customization CSS codes have been updated with units allowing it to be dynamic.

2022-07-01

The playback speed is now set on a player level and this feature is now exposed on our API via a dedicated player method, player event, and player state.
You can now use the method getRootNode to retrive the node where the player iframe is wrapped in.

2022-05-22

The PiP customization has been updated to limit their impact on the CLS score. New CSS attributes have been introduced to control your PiP positioning.

2022-05-10

onScriptLoaded() now available to determine the loading of the player library.

2022-04–13

loadContent() player method behavior has been fixed to match with the autostart settings defined on the Player settings.

2022-04-07

Watermark player settings are now exposed in the API and listed in our Player settings

2022-01-26

New property ‘videoIsCreatedForKids’ added to the player state.

2022-12-17

JavaScript Player API – Expose a new player event PLAYER_HEAVYADSINTERVENTION.

2021-12-02

New Player Embed global release

Player

Overview

Integration methods

Embed the player on web

Getting started

Player Embed Script

Embed a video

Embed a playlist

Embed multiple players

Player Library Script

Embed a video

Embed a playlist

Embed multiple players

Player iFrame

Embed the player in native apps

Android SDK

How to use:

Using player parameters

Methods

Player events

Best practices

TCF2

OM SDK

iOS SDK (Swift)

How to use:

Using player parameters

Methods

Events

Player events

Video events

Ad events

Player properties

Best practices

TCF2

OM SDK

Embed the player on AMP

TCF API with AMP

oEmbed API

Customize the player

Working with player settings

Working with player parameters

Working with loop

Player configuration for specific loop behaviors

Integration examples

Working with Picture-in-Picture(PiP)

PiP settings

PiP positioning

PiP customization

Programmatically interacting with PiP

Working with autostart

Working with the advertising configuration

Example with the Player Embed Script

Example with the Player Library Script

Example of updating values with the Player API [ setCustomConfig()]

Example with the Player iFrame

Working with the referrer policy

Player script embed

Player library embed

iFrame embed

Working with the REST API

Working with TCF2

JavaScript Player API Reference

Methods

Using the callback function - onScriptLoaded()

Events

Player events

Video Events

Ad Events

State

Access the Player settings

Optimization info

Changelog

Your privacy settings

Example of updating values with the Player API [ `setCustomConfig()`]

Using the callback function `- onScriptLoaded()`