JavaScript SDK
The JavaScript SDK is available on GitHub and must be loaded from https://api.dmcdn.net/all.js
. This SDK will provide access to the features of the Platform API.
Overview
Loading the SDK
You can load the SDK using a <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="https://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 = 'https://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 JavaScript 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.
Authentication
The Dailymotion JavaScript SDK allows you to log your users with their Dailymotion account in order to act on their behalf: access content, publish or edit videos, etc. For this purpose, you can use any of:
Method | Method description |
---|---|
dm.login() | Login and/or request extended permissions. |
dm.logout() | Logout (only if the user is connected with your site). |
dm.getLoginStatus() | Get current login status from dailymotion.com. |
dm.getSession() | Synchronous accessor for the current session. |
In addition, you can subscribe to the following events using DM.Event.subscribe()
:
auth.statusChange
auth.sessionChange
auth.login
auth.logout
Make an API call
You can make Graph API requests using DM.api()
method:
var handleAPIResponse = function (response) {
alert('Name is ' + response.screenname);
};
DM.api('/user/rs', {
fields: 'screenname'
}, handleAPIResponse);
SDK Reference
DM.api()
The JavaScript SDK allows 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 through your own servers, freeing them to do other things.
Signature
DM.api(path, method, params, callback)
Except path
, all arguments to this method are optional.
Name | Type | Description |
---|---|---|
path | String | The resource path. |
method | String | The HTTP method (default “get”). |
params | Object | The parameters for the query. |
callback | Function | The callback function to handle the response. |
If you have an authenticated user, get their User Object:
var handleAPIResponse = function (response) {
alert('Your name is ' + user.screenname);
};
DM.api('/me', {
fields: 'screenname'
}, handleAPIResponse);
Get the 3 most recent posted video from the authenticated user:
var handleAPIResponse = function(response) {
alert('Got ' + response.list.length + ' videos' + (response.has_more ? ' and has more' : ''));
};
DM.api('/me/videos', {
limit: 3
}, handleAPIResponse);
Search for videos with “javascript tutorial” query:
var handleAPIResponse = function(response) {
alert(response.list[0].title);
};
DM.api('/videos', {
search: 'javascript tutorial',
fields: 'title'
}, handleAPIResponse);
If you have an authenticated user with write permission scope and you want to like a video for them:
var videoId = 'xk2jd2';
var handleAPIResponse = function(response) {
if (!response || response.error)
{
alert('Error occured');
}
else
{
alert('Liked successfuly');
}
};
DM.api('/me/favorites/' + videoId, 'post', handleAPIResponse);
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 is 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
Event name | Event description |
---|---|
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:
Property | Property description |
---|---|
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.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.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. |