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:

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

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>
ParameterValuesDefaultDescription
api['postMessage', 'location', '1']falseEnables the Player API. In native mobile apps, use api=location, otherwise we recommend using api=1.
autoplaybooleanfalseStarts the playback of the video automatically after the player load. Note: this parameter may not work on some mobile OS versions as most mobile devices prevent the video from auto playing to save user's bandwidth. Learn more in the FAQ.
controlsbooleantrueWhether to display the player controls or not. This parameter only removes the control bar, but keeps the startscreen and the endscreen (useful on mobile devices where the video tag needs a direct user interaction to start the playback).
endscreen-enablebooleantrueWhether to enable the end screen or not.
idstringN/AID of the player unique to the page to be passed back with all API messages.
mutebooleanfalseWhether to mute the video or not.
originstringN/AThe domain of the page hosting the Dailymotion player. When using api=postMessage, you might want to specify origin for extra security.
quality['240', '380', '480', '720', '1080', '1440', '2160']'auto'Specifies the suggested playback quality for the video.
sharing-enablebooleantrueWhether to display the sharing button or not.
startnumber0Specifies the time (in seconds) from which the video should start playing.
subtitles-defaultstringN/ASpecifies the default selected subtitles language.
syndicationstringN/APasses your syndication key to the player.
ui-highlightstring'ffcc33'Change the default highlight colour used in the controls (hex value without the leading #). Read our note on the the player customisation section.
ui-logobooleantrueWhether to display the Dailymotion logo or not.
ui-start-screen-infobooleantrueWhether to show video information (title and owner) on the start screen.
ui-theme['dark', 'light']'dark'Choose the default base colour theme. Read our note on the the player customisation section).

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.

Deprecated parameterCorresponding parameter for replacement
highlightui-highlight
infoui-start-screen-info
logoui-logo
mutedmute
relatedendscreen-enable
socialsharing-enable

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:

ParameterParameter description
url(required) The Dailymotion URL for a video.
maxwidthThe maximum width the embedded video can take on the destination page.
maxheightThe maximum height the embedded video can take on the destination page.
formatResponse format, either json or xml. Defaults to json.
callbackWhen returning JSON, wrap in this function.
autoplayAutomatically start playback of the video. Defaults to false.
wmodeAdd the “wmode” parameter to the <embed>/<object> element of the Flash player. Can be either transparent or opaque.
syndicationYour syndication key.

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.

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.

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.

waiting

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