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. The player automatically chooses the technology to use (Flash or HTML5) to provide the best experience for the end user. Note that our iframe embeds are compatible with most mobile platforms like iOS, Android, Windows Phone and most HTML5-compliant Smart TVs.

Embed a video in your native mobile app

For iOS and Android apps, you will have to use our dedicated Objective-C 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></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.

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

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

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.

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);

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);

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.

canplay

Sent when the player can resume playback of the media data, but estimates that if playback is started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content.

canplaythrough

Sent when the player estimates that if playback is started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.

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.

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.

rebuffer

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

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.

volumechange

Sent when the player volume or mute state has changed.