We use cookies to offer an improved online experience and offer you content and services adapted to your interests.
By using Dailymotion, you are giving your consent to our cookies.
The Funniest Tweets About Parenting Gets Animated Watch the videos
</Developer>

JavaScript SDK

The JavaScript SDK enables you to access all of the features of the Dailymotion Graph API via JavaScript. Many functions in the JavaScript SDK require an API key. You can create an API key to be used with the JavaScript SDK by registering your application with the “Browser Application” profil.

The JavaScript SDK is available on GitHub.

Usage

You load the SDK using the standard <script> element and by calling DM.init() method. Below is an example of initializing the SDK with all the common options turned on:

<script src="http://api.dmcdn.net/all.js"></script>
<script>
    DM.init({
        apiKey: 'YOUR API KEY',
        status: true, // check login status
        cookie: true // enable cookies to allow the server to access the session
    });
</script>

Loading the SDK Asynchronously

The most efficient way to load the SDK in your site is to load it asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots/spiders. Below outlines an example:

<script>
    window.dmAsyncInit = function()
    {
        DM.init({apiKey: 'your app id', status: true, cookie: true});
    };
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//api.dmcdn.net/all.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    }());
</script>

In the example above, the function assigned to window.dmAsyncInit is run as soon as the Dailymotion JS SDK is loaded. Any code you want to run after the SDK is loaded should be placed within this function and after the call to DM.init(). For example, this is where you would test the logged in status of the user or subscribe to any Dailymotion events your application is interested in.

SSL

The Dailymotion Javascript SDK is also available over SSL. You should only use this when your own page is served over https://. The library will rely on the current page protocol at runtime. The SSL URL is the same, only the protocol is changed: https://api.dmcdn.net/all.js

Authentication

The Dailymotion JavaScript SDK allows you to log your users with their Dailymotion account in order to act access their private content or publish, edit their own content from you site.

Status & Sessions

The first step is figuring out how you identify who the current user is, and how to make API calls on their behalf. In fact, almost half of the public API deals directly with auth:

In addition, there many events that you can subscribe to using DM.Event.subscribe():

  • auth.statusChange
  • auth.sessionChange
  • auth.login
  • auth.logout

API Calls

Dailymotion provides many server-side APIs to enable you to integrate data from Dailymotion into your site, as well as allowing you to submit data into Dailymotion. The JavaScript SDK makes all this available to you via DM.api():

DM.api('/user/rs', {fields: "screenname"}, function(response)
{
    alert('Name is ' + response.screenname);
});

Player API

The Dailymotion Javascript SDK also implement the Player API. To dynamically create a player with which you can interact, use the DM.player method:

// Play last buzz videos one after the other
DM.api('/videos', {filters: "buzz", fields: "id", limit: 100}, function(response)
{
    // Append a div in the DOM, you may use a real <div> tag
    var div = document.createElement('div');
    document.body.appendChild(div);

    var videos = response.list;
    var player = DM.player(div, {video: videos.shift().id});

    // At the end of a video, load the next video if any
    player.addEventListener("ended", function(e)
    {
        var nextVideo = videos.shift();
        if (nextVideo)
        {
            e.target.load(nextVideo.id);
        }
    });
});

NOTE: As the VIDEO_ID parameter is optional, you can also initialize DM.player early and define the video to play later, through a call to the load API.

Methods

DM.api

Server-side calls are available via the JavaScript SDK that allow you to build rich applications that can make API calls against the Dailymotion servers directly from the user’s browser. This can improve performance in many scenarios, as compared to making all calls from your server. It can also help reduce, or eliminate the need to proxy the requests thru your own servers, freeing them to do other things.

The range of APIs available covers virtually all facets of Dailymotion. Public data are available with no specific authentication. Various parts of the API are available depending on the authenticated status and the permissions the user has granted your application.

The DM.api() method is used to call REST API methods. Except the path, all arguments to this method are optional.

If you have an authenticated user, get their User Object:

DM.api('/me', {fields: 'screenname'}, function(user)
{
    alert('Your name is ' + user.screenname);
});

Get the 3 most recent posted video from the authenticated user:

DM.api('/me/videos', {limit: 3}, function(response)
{
    alert('Got ' + response.list.length + ' videos' + (response.has_more ? ' and has more' : ''));
});

Search for videos with “javascript tutorial” query:

DM.api('/videos', {search: "javascript tutorial", fields: "title"}, function(response)
{
    alert(response.list[0].title);
});

If you have an authenticated user with write permission scope and you want to like a video for them:

var videoId = 'xk2jd2'
DM.api('/me/favorites/' + videoId, 'post', function(response)
{
    if (!response || response.error)
    {
        alert('Error occured');
    }
    else
    {
        alert('Liked successfuly');
    }
});

Parameters

Name Type Description
path String The resource path
method String The HTTP method (default “get”)
params Object The parameters for the query
cb Function The callback function to handle the response

DM.player

Creates a DM.Player object.

Parameters

Name Type Description
element String or DOM element A reference to a DOM element or an id of the HTML element where the API will insert the <iframe> tag containing the player.
options Object A javascript object containing the following properties:
video The Dailymotion video ID that identifies the video that the player will load.
width The width of the video player. The default value is 480.
height The height of the video player. The default value is 270.
params The object’s properties identify player parameters that can be used to customize the player.
events The object’s properties identify the events that the API fires and the functions (event listeners) that the API will call when those events occur.

DM.Player Properties

Name Type Description
autoplay Boolean A Boolean value that determines whether the media resource plays automatically when available.
currentTime Number The current playback position in seconds.
bufferedTime Number The part of the media resource that have been downloaded in seconds.
duration Number The length of the media resource in seconds.
seeking Boolean A Boolean value that indicates whether the element is seeking.
error Object The last error that occurend for this player (properties are code, title and message
ended Boolean A Boolean value that indicates whether the media played to the end.
muted Boolean A Boolean value that determines whether the audio content should be muted.
volume Number The volume of the video between 0 and 1.
paused Boolean A Boolean value that indicates whether the media is paused.
fullscreen Boolean A Boolean value that indicates whether the video is displayed fullscreen.

DM.Player Methods

Name Description
addEventListener(ev, fn) Add an event listner to this player. See player events for the list of authorized events.
api(method, arg) Call raw player API method.
play() Plays the video.
pause() Pauses the video.
togglePlay() Toggle the play stat of the videos
seek(seconds) Sees to the specified point in the video (time in seconds).
load(videoId) Load another video in the player by specifying its id.
setVolume(vol) Changes the volume level of the player to the specified level (between 0 and 1). This call may not be supported on all devices. See Compatibility for more info.
setMuted(muted) Mutes/unmute the player’s volume. Pass 1 to mute the volume or 0 to unmute. This call may not be supported on all devices. See Compatibility for more info.
toggleMuted() Toggle mute stat. This call may not be supported on all devices. See Compatibility for more info.
setFullscreen(fs) Enter/leave fullscreen This call may not be supported on all devices. See Compatibility for more info.
watchOnSite() Redirect the user on the Dailymotion page for this video seeked at the same position in the video.

DM.getSession

Synchronous accessor for the current Session. The synchronous nature of this method is what sets it apart from the other login methods. It is similar in nature to DM.getLoginStatus(), but it just returns the session. Many parts of your application already assume the user is connected with your application. In such cases, you may want to avoid the overhead of making asynchronous calls.

NOTE: You should never use this method at page load time. Generally, it is safer to use DM.getLoginStatus() if you are unsure.

Returns

The current session if available, null otherwise.

DM.getLoginStatus

Find out the current status from the server, and get a session if the user is connected.

The user’s status or the question of who is the current user is the first thing you will typically start with. For the answer, we ask dailymotion.com. Dailymotion will answer this question in one of two ways:

  • Someone you don’t know.
  • Someone you know and have interacted with. Here’s a session for them.

Here’s how you find out:

DM.getLoginStatus(function(response)
{
    if (response.session)
    {
        // logged in and connected user, someone you know
    }
    else
    {
        // no user session available, someone you dont know
    }
});

The example above will result in the callback being invoked once on load based on the session from www.dailymotion.com. JavaScript applications are typically written with heavy use of events, and the SDK encourages this by exposing various events. These are fired by the various interactions with authentication flows, such as DM.login().

Events

  • auth.login This event is fired when your application first notices the user (in other words, gets a session when it didn’t already have a valid one).
  • auth.logout This event is fired when your application notices that there is no longer a valid user (in other words, it had a session but can no longer validate the current user).
  • auth.sessionChange This event is fired for any auth related change as they all affect the session: login, logout, session refresh. Sessions are refreshed over time as long as the user is active with your application.
  • auth.statusChange Typically you will want to use the auth.sessionChange event. But in rare cases, you want to distinguish between these three states: * Connected * Logged into Dailymotion but not connected with your application * Not logged into Dailymotion at all.

The DM.Event.subscribe and DM.Event.unsubscribe functions are used to subscribe to these events. For example:

DM.Event.subscribe('auth.login', function(response)
{
    // do something with response
});

The response object returned to all these events is the same as the response from DM.getLoginStatus, DM.login or DM.logout. This response object contains:

  • status The status of the User. One of connected, notConnected or unknown.
  • session The session object.

Parameters

Name Type Description
cb Function The callback function to handle the response

DM.login

Once you have determined the user’s status, you may need to prompt the user to login. It is best to delay this action to reduce user friction when they first arrive at your site. You can then prompt and show them the “Connect with Dailymotion” button bound to an event handler which does the following:

DM.login(function(response)
{
    if (response.session)
    {
        // user successfully logged in
    }
    else
    {
        // user cancelled login
    }
});

You should only call this on a user event as it opens a popup. Most browsers block popups, unless they were initiated from a user event, such as a click on a button or a link.

Depending on your application’s needs, you may need additional permissions from the user. A large number of calls do not require any additional permissions, so you should first make sure you need a permission. This is a good idea because this step potentially adds friction to the user’s process. Another point to remember is that this call can be made even after the user has first connected. So you may want to delay asking for permissions until as late as possible:

DM.login(function(response)
{
    if (response.session)
    {
        if (response.session.scope)
        {
            // user is logged in and granted some permissions.
            // perms is a comma separated list of granted permissions
        }
        else
        {
            // user is logged in, but did not grant any permissions
        }
    }
    else
    {
        // user is not logged in
    }
}, {scope: 'read write'});

Parameters

Name Type Description
cb Function The callback function to handle the response
opts Object

(optional) Options to modify login behavior.

scope: Space separated list of permissions

DM.logout

Logout the user in the background.

Just like logging in is tied to dailymotion.com, so is logging out – and this call logs the user out of both Dailymotion and your site. This is a simple call:

DM.logout(function(response)
{
    // user is now logged out
});

NOTE: You can only log out a user that is connected to your site.

Parameters

Name Type Description
cb Function The callback function to handle the response

DM.Event.subscribe

Subscribe to a given event name, invoking your callback function whenever the event is fired.

For example, suppose you want to get notified whenever the session changes:

DM.Event.subscribe('auth.sessionChange', function(response)
{
    // do something with response.session
});

Parameters

Name Type Description
name String Name of the event
cb Function The handler function

DM.Event.unsubscribe

Removes subscribers, inverse of DM.Event.subscribe.

Removing a subscriber is basically the same as adding one. You need to pass the same event name and function to unsubscribe that you passed into subscribe. If we use a similar example to DM.Event.subscribe, we get:

var onSessionChange = function(response)
{
    // do something with response.session
};
DM.Event.subscribe('auth.sessionChange', onSessionChange);

// sometime later in your code you dont want to get notified anymore
DM.Event.unsubscribe('auth.sessionChange', onSessionChange);

Parameters

Name Type Description
name String Name of the event
cb Function The handler function

Table Of Contents