Video player documentation

Embedding the player

Dailymotion provides a simple way to display videos on your website or application: it is possible to embed Dailymotion video player using our iframe-based embed player. Note that our iframe embeds are compatible with most mobile platforms like iOS, Android, Windows Phone and most HTML5-compliant Smart TVs.

• Learn more about our Player features

Embed a video in your native mobile app

For iOS and Android apps, you will have to use our dedicated Swift SDK or Android SDK.

Embed a video in your website

The simplest way to embed Dailymotion videos on your site is to use our iframe-based embed player.

There are three ways to retrieve an embed code for a given video:

• you can obtain it using the oEmbed protocol (using the value of the html field in the oEmbed response)
• you can copy manually it from the export tab of every video page on Dailymotion
• you can obtain it through the embed_html field of the Data API's video object

However, if you plan to customise/control the video players programmatically, we advise you to use our dedicated JavaScript SDK.

Iframe embed HTML skeleton code

Regardless of the way you retrieve the embed code, it will always look more-or-less as follow:

<iframe frameborder="0" width="480" height="270"
src="//www.dailymotion.com/embed/video/VIDEO_ID?PARAMS"
allowfullscreen allow="autoplay"></iframe>

Notes:

• The width and height attributes will vary
• VIDEO_ID is the ID of the video you will embed. ID can be of the form xID (e.g. xwr14q) for public-accessible videos or kID (e.g. kABCD1234) for private-accessible videos.
• PARAMS are additional query-string parameters –documented in the Player parameters section– that allow you to customise the look and behavior of the player.
• allowfullscreen attribute to allow the player to be placed into full screen mode. If this isn't set, the player can't be placed into full screen mode.
• allow="autoplay" attribute to delegate the autoplay permission from the origin once received, as specified by the Feature Policy for autoplay specification. If this isn't set, the player will not be able to play without a user gesture.

Player parameters

The following parameters allow you to customise the look and behavior of the player.

There are two ways to pass them:

• via query-string parameters in the embed <iframe>'s src attribute. For instance:

  <iframe frameborder="0" width="480" height="270"
  src="//www.dailymotion.com/embed/video/xwr14q?autoplay=1&mute=1"
  allowfullscreen allow="autoplay"></iframe>

• via the params option of the DM.player() method from the JavaScript SDK. For instance:

  <script src="https://api.dmcdn.net/all.js"></script>
  <div id="player"></div>
  <script>
  var player = DM.player(document.getElementById("player"), {
      video: "xwr14q",
      width: "100%",
      height: "100%",
      params: {
          autoplay: true,
          mute: true
      }
  });
  </script>

Deprecated player parameters

These deprecated parameters were once part of the player project but are no longer maintained. We still support them for now, but we recommend to remove reference to any of these as they may disappear without warning. Instead, we suggest an alternative parameter to replace it with.

Player customisation

The Dailymotion player can be customised with:

• either a highlight colour (used in the seek bar and to highlight some UI elements such as menu items)
• or one of two themes (light or dark)

We use Luminance and Contrast algorithms to select the best theme for any given highlight (the same as those used on Lea Verou’s Contrast Ratio tool). This ensures that the highlight colour will always be clearly visible on the background colour.

Here are some rules regarding priorities between those two customisation settings:

• if only a theme is requested, then we use the default highlight for the given theme.
• if both a highlight and theme are requested, then the highlight always wins. If the colour contrast ratio is less than a given amount, we allow either theme but default to the dark one.
• customisations made by the video owner trump those made by other users.

oEmbed

oEmbed is an open standard for allowing an embedded representation of a URL on third party sites. The oEmbed API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource: it turns a Dailymotion video page URL into structured data, returning among others an embed code. For more information, see the oEmbed specification. This protocol will be preferred when all you need is to transform a URL provided by one of your users into an embed code.

To request the embed code for a video from its url, you can use the following endpoint: http://www.dailymotion.com/services/oembed

When doing so, you can pass some parameters as query-string parameters:

Hence, a request is of the form: http://www.dailymotion.com/services/oembed?url=<VIDEO_URL>

For a list of response parameters, please have a look at the oEmbed specification. Dailymotion responds with an oEmbed response such as:

{
  "type": "video",
  "version": "1.0",
  "provider_name": "Dailymotion",
  "provider_url": "http://www.dailymotion.com",
  "title": "Wildlife",
  "description": "a movie with animals",
  "author_name": "Dailymotion API",
  "author_url": "http://www.dailymotion.com/DailymotionAPI",
  "width": 480,
  "height": 269,
  "html": "<iframe src=\"http://www.dailymotion.com/embed/video/x26m1j4\" width=\"480\" height=\"269\" frameborder=\"0\" allowfullscreen allow=\"autoplay\""></iframe>",
  "thumbnail_url": "http://s2.dmcdn.net/F83Oh/x240-tGY.jpg",
  "thumbnail_width": 427,
  "thumbnail_height": 240
}

Player API

The Player API we document in this section is only available if you are using the JavaScript SDK.

Properties

autoplay

Returns a Boolean. Whether the media resource plays automatically when available.

bufferedTime

Returns a Number. The part of the media resource that has been downloaded in seconds.

controls

Returns a Boolean. Whether the player controls are visible.

currentTime

Returns a Number. The current playback position in seconds.

duration

Returns a Number. The length of the media resource in seconds.

ended

Returns a Boolean. Whether the media played to the end.

error

Returns an Object. The last error that occurred for this player (properties are code, title and message. This object format is as follow:

{
  code    : "42",
  title   : "Unknown issue",
  message : "An unknown issue has just occured!"
}

fullscreen

Returns a Boolean. The current fullscreen state.

muted

Returns a Boolean. The current mute state.

paused

Returns a Boolean. The current playback state.

qualities

Returns an Array. An array of the available qualities.

Possible qualities are as follow: ['240', '380', '480', '720', '1080', '1440', '2160'].

quality

Returns a String. The current quality — see qualities for possible values.

seeking

Returns a Boolean. Whether the video element is seeking.

subtitle

Returns a String. The current subtitle language code.

subtitles

Returns an Array. An array of the available subtitles's language codes.

volume

Returns a Number. The current volume – between 0 and 1.

video

Returns an Object. Contains the videoId and title of the video currently loaded in the player.

{
   videoId: 'x5e9eog',
   title: 'Dailymotion Hackathon Feb 2017',
}

Methods

addEventListener(event, callback)

• event (String) – A string representing the event name to listen. See Events for a list of accepted events.
• callback (Function) – The function to call when the event is triggered.

Registers and invokes the given callback every time event occur.

Example – listening to the volumechange event

player.addEventListener('volumechange', function(event) {
  console.log('event '+event.type+' received on '+event.target+'!');
});

load(videoId, [params])

• videoId (String) – A string representing a video ID – of the form xID (e.g. xwr14q) for public-accessible videos or kID (e.g. kABCD1234) for private-accessible videos.
• params (Object) – An object containing player parameters.

Loads the video with the videoId ID in the player, with optional params.

Example – loading the video associated to the xwr14q xID

player.load('xwr14q', {
  autoplay: true,
  start: 30
});

play()

Starts or resumes the current video's playback.

Example – resuming the current video's playback

player.play();

pause()

Pauses the current video's playback.

Example – pausing the current video's playback

player.pause();

seek(seconds)

• seconds (Number) – The time in seconds to seek to.

Seeks to the current video's to seconds seconds.

Example – seeking to 30 seconds of the current video's playback

player.seek(30);

setControls(enable)

• enable (Boolean) – Whether to show or hide the controls.

Shows the controls when enable evaluates to true, hides them otherwise.

Example – hiding the controls

player.setControls(false);

setFullscreen(enable)

• enable (Boolean) – Whether to enter or exit fullscreen.

Enters fullscreen when enable evaluates to true, exits it otherwise.

Example – entering fullscreen

player.setFullscreen(true);

setMuted(enable)

• enable (Boolean) – Whether to mute or un-mute the player.

Mutes the player when enable evaluates to true, unmutes it otherwise.

Example – muting the player

player.setMuted(true);

setQuality(level)

• level (String) – The quality name to switch to – see qualities for accepted values.

Sets the current video's quality to the specified quality.

Example – setting the current video's quality to '720'

player.setQuality('720');

setSubtitle(languageCode)

• languageCode (String) – The subtitle's language code.

Sets the current video's subtitle to the specified language code.

Example – setting the current video's subtitle to 'fr'

player.setSubtitle('fr');

setVolume(level)

• level (Number) – The volume level to set – between 0 and 1.

Sets the player's volume to the specified level.

Example – setting the player's volume to 50% of its maximum

player.setVolume(0.5);

toggleControls()

Toggles the player's controls visibility.

Example – toggling the player's controls

player.toggleControls();

toggleMuted()

Toggles the player's mute state.

Example – toggling the player's mute state

player.toggleMuted();

togglePlay()

Toggles the current's video playback state.

Example – toggling the current video's play state

player.togglePlay();

watchOnSite()

Opens the current video on dailymotion.com in a new tab.

Example – opening the current video's on dailymotion.com in a new tab

player.watchOnSite();

Events

ad_end

Sent when the player reaches the end of an Ad media resource.

ad_pause

Sent when an Ad playback pauses.

ad_play

Sent when an Ad playback starts.

ad_start

Sent when the player starts to play an Ad media resource.

ad_timeupdate

Sent on each Ad's time update.

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 player's controls state changes (visible or hidden).

durationchange

Sent when the duration of the video become available or change during playback.

end

Sent when playback has stopped at the end of the media resources set (ads + content).

ended - deprecated

Deprecated. Use video_end instead.

error

Sent when the player triggers an error.

fullscreenchange

Sent when the player enters or exits fullscreen.

loadedmetadata

Sent when video's metadata are available.

pause

Sent when playback pauses after the pause method returns.

play

Sent when playback starts after the play method returns.

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

playing

Sent when the content media resource playback has started.

progress

Sent when the browser is fetching the media data.

qualitiesavailable

Sent when qualities are available – see qualities for accepted values.

qualitychange

Sent when the current quality changes.

seeked

Sent when the player has completed a seeking operation.

seeking

Sent when the player is starting to seek to another position in the video.

subtitlechange

Sent when the current subtitle changes.

subtitlesavailable

Sent when subtitles are available.

start

Sent the first time the player attempts to start the playback, either because of a user interaction, an autoplay parameter, or an API call (e.g play(), load(), etc.).

timeupdate

Sent when the playback position changes as part of normal playback or because of some other condition.

video_start

Sent when the player starts to play the content media resource.

video_end

Sent when the player reaches the end of the content media resource.

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 player volume or mute state has changed.

waiting

Sent when the player has to stop video playback for further buffering of content.