Using the dailymotion API to create a simple UWP application

In this small tutorial we are going to go over how to use the dailymotion API to create a small dailymotion UWP app.

If you don’t know about our developer portal you should definitively go have a look and see what you can do, you can find many articles and tutorials on how to use our awesome API!

https://developer.dailymotion.com/

What are we going to do?

• Call the dailymotion API to get a list of videos, select the fields that we want to query and sorting type or category type we wish to us
• Call the dailymotion API to get related videos from a video xid

You can find the full demo application here on dailymotion GitHub sample app.

What are we NOT going to do?

• We wont go into the details of the C# service class that calls and transform the HTTP responses
• Explain how to build the UWP application
• Explain how to used the HTML 5 video player in a UWP application

Calling the dailymotion API to retrieve a list of videos

First, lets head over to the dailymotion explorer API where you can very easily explore and understand how the dailymotion API works!

If we just wanted to create a simple list we could just hit the following endpoint:

https://api.dailymotion.com/videos

When looking at the different parameters that you have in the explorer:

We can clearly see that the sky is the limit!

Lets just start by selecting the parameter list=what-to-watch which is going to give us the following endpoint:

https://api.dailymotion.com/videos?list=what-to-watch

which give you this:

{  
   "page":1,
   "limit":10,
   "explicit":false,
   "has_more":true,
   "list":[  
      {  
         "id":"x72crpz",
         "title":"Freestyle - Serge Beynaud",
         "channel":"music",
         "owner":"x1vszd4"
      },
 DATA
   ]
}

We could have also decide to use the sort option which would have given us a different options like recent, random, trending and more.

Next, we are going to want to customize the fields that we are asking for. The default fields that are requested by the API are the id of the video, title (of the video), channel (the type), and the owner id.

In our example, what I wanted the following information channel name, thumbnail of the video , id and title of the video so that we can show the videos in a list.

You can achieve this in the explorer by selecting these fields:

Our new query should look like this:

https://api.dailymotion.com/videos?fields=channel.name,id,thumbnail_url,title,&list=what-to-watch

which will give you this:

{  
   "page":1,
   "limit":10,
   "explicit":false,
   "has_more":true,
   "list":[  
      {  
         "channel.name":"Musique",
         "id":"x72crpz",
         "thumbnail_url":"http://s1.dmcdn.net/vdQNU.jpg",
         "title":"Freestyle - Serge Beynaud"
      },
      DATA
   ]
}

We will not go into the details of how to map HTTP response to the view model entities, your UWP application should have items that have a thumbnail, title and channel name like this:

Here is the C# trending service that calls the HTTP endpoint :

dailymotion/dailymotion-player-sdk-windows

Lets look at the Related Videos Endpoint

We are going to be using the connection video to video from the API to get the related videos from a given video id:

related video

As you are going to see the parameters are more limited then when your are just requesting videos:

options for related video

Here is what the default endpoint API would looks like:

https://api.dailymotion.com/video/x72ci1y/related

Which give you this:

{  
   "page":1,
   "limit":10,
   "explicit":false,
   "has_more":false,
   "list":[  
      {  
         "id":"x72bbmg",
         "title":"These Were The Cutest Couples At The Grammys",
         "channel":"people",
         "owner":"x1mfx45"
      },
 DATA
   ]
}

Like our previous API call, we will want additional information about the related videos we will get from one video. This means that we will also need to request specific fields as follow:

https://api.dailymotion.com/video/{0}/related?fields=channel.name,id,thumbnail_url,title,owner.username

which give you this:

{  
   "page":1,
   "limit":10,
   "explicit":false,
   "has_more":false,
   "list":[  
      {  
         "channel.name":"Amis & Famille",
         "id":"x72bbmg",
         "thumbnail_url":"http://s1.dmcdn.net/vcjyE.jpg",
         "title":"These Were The Cutest Couples At The Grammys",
         "owner.username":"wochit-entertainment"
      },
 DATA
   ]
}

Taking the API result and formatting it into your application you could end up with something as follows, once you have correctly formated the data to you view model entity.

Here is the C# related service that calls the HTTP endpoint :

dailymotion/dailymotion-player-sdk-windows

And there you have it!