Sign up for free

Getting started with delivery and analytics

api.video provides you with powerful tools that enable you to deliver content to your users with great customization and branding while making sure that you get all of the data you need to analyze the viewer's behavior.

There are two parts to this tutorial, where we will jump into the player capabilities and then look at how to analyze the data we've received from the viewers.

Get started with api.video player

api.video offers an in-house player that you can customize and utilize to give your users the best experience possible, in the least amount of effort.

The api.video player is provided in various SDKs that you can find in the SDK catalog.

Branding your player

You can bring the player closer to your brand by adding logos and your brand colour scheme to the player. The process is possible from the dashboard and the API. You can navigate to the api.video dashboard and play around with it, however, in this tutorial, we will focus on setting it up through the API.

Let's set the player controls color to purple (#800080) and add our branded logo.

Preparation

In this example, we will be using the api.video client libraries, however, if you prefer to use cURL or make the requests yourself, you are welcome to follow along with the API reference documentation.

Adding the api.video client library & initializing

Let's add the api.video client library to our code.

The client library takes your API key, which you can find here. Let's pass it the API key and initialize the client.

If wish to learn more about api.video authentication and how it works, jump over to this page.

Make sure to install the modules / libraries on your environment beforehand.

Install api.video client
const ApiVideoClient = require('@api.video/nodejs-client')

Creating a player theme and adding a color

We have the code for the client initialization now, and we can proceed with creating a new player theme while adding a different color to our player controls.

Creating a new player theme
const playerThemeCreationPayload = {
  link: "rgba(128, 0, 128, 1)", // RGBA color for all controls. Default: rgba(255, 
}; 
const playerTheme = await client.playerThemes.create(playerThemeCreationPayload);  

The following code will give us this effect:

Showing customized player UI

The response that you should expect will contain the playerId that we will use in the next step.

{
  "backgroundBottom": "rgba(94, 95, 89, 1)",
  "backgroundText": "rgba(255, 255, 255, .95)",
  "backgroundTop": "rgba(72, 4, 45, 1)",
  "createdAt": "2020-01-13T10:09:17+00:00",
  "enableApi": false,
  "enableControls": false,
  "forceAutoplay": false,
  "forceLoop": false,
  "hideTitle": false,
  "link": "rgba(255, 0, 0, .95)",
  "linkActive": "rgba(255, 0, 0, .75)",
  "linkHover": "rgba(255, 255, 255, .75)",
  "playerId": "pl45d5vFFGrfdsdsd156dGhh",
  "text": "rgba(255, 255, 255, .95)",
  "trackBackground": "rgba(0, 0, 0, 0)",
  "trackPlayed": "rgba(255, 255, 255, .95)",
  "trackUnplayed": "rgba(255, 255, 255, .1)",
  "updatedAt": "2020-01-13T10:09:17+00:00"
}

Adding the logo

After you've created the player theme, you'll get a player theme id in the response. Let's add our company logo, to that player theme. We will utilize the /players/{player_id}/logo endpoint in order to do that.

First, find the image you would like to add to all of your videos. Make sure to find an image that doesn't exceed 200px x 100px, preferably in PNG format.

Uploading a player logo
const playerId = 'pl45d5vFFGrfdsdsd156dGhh'; // The unique identifier for the player.
const file = './company-logo.jpg'; // The name of the file you want to use for your logo.
const link = 'https://my-company.org'; // A public link that you want to advertise in your player. For example, you could add a link to your company. When a viewer clicks on your logo, they will be taken to this address.
const playerTheme = await client.playerThemes.uploadLogo(playerId, file, link); 

After you've added the image, it will look similar to this:

Showing a custom logo in the api.video player

Assign the theme to a video

In order for the theme to apply by default when you play a video, you need to make sure that you assign the theme to a video. With the same client library, we can add a theme to a video that was already uploaded, or you can apply the theme as soon as you create the video object.

Let's assume that we are updating an existing video:

Adding a player theme to a video
// First install the "@api.video/nodejs-client" npm package
// Documentation: https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/api/VideosApi.md#update
const client = new ApiVideoClient({ apiKey: "YOUR_API_KEY" });
const videoId = 'vi4k0jvEUuaTdRAEjQ4Jfrgz'; // The video ID for the video you want to update.
// define the value you want to update
const videoUpdatePayload = {
    playerId: "pl45d5vFFGrfdsdsd156dGhh", // The unique ID for the player you want to 
}; 
const updatedVideo = await client.videos.update(videoId, videoUpdatePayload);

Now we've applied our theme to this specific video, and we can implement the api.video player on our frontend.

Implementing the player

After we branded our player, we can now implement the player on the frontend. In this example, we'll use the React player, however, you can use any of the available player SDKs.

Let's first install React and add the React Player SDK from api.video

$ npm install --save @api.video/react-player

Once we have the React project and the React Player SDK added to the project, we can dive into our code and add the video component:

import ApiVideoPlayer from '@api.video/react-player'

// your code

<ApiVideoPlayer video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}  style={{
          width: '500px',
          height: '500px',
          }} />

Now you can see your awesome branding in action!

Get started with analytics

After we have a cool branded player, it would be great to get some data on your users. For that purpose, we have the api.video Analytics for your disposal.

Please note, that we will only collect analytics from videos that were played through the api.video player. If you are using a custom player, you can leverage the analytics SDKs to pass on the analytics to api.video.

In this example, we will check what countries your video was watched the most.

Preparation

In this example, we will be using the api.video client libraries, however, is you prefer to use cURL or make the requests yourself, you are welcome to follow along with the API reference documentation.

Add & initialize the api.video client library

If you've followed through the whole tutorial, you can skip this step

Let's add the api.video client library to our code.

Make sure to install the modules / libraries on your environment beforehand.

The client library takes your API key, which you can find here. Let's pass it the API key and initialize the client.

You can learn more about authentication here.

Initializing the api.video client
const ApiVideoClient = require('@api.video/nodejs-client')

Get the count of plays by country

As we planned, in this example, we want to analyze the viewers' geo-location. For that task, we will utilize the api.video client library and make use of the analytics endpoint to get the count of plays for a specific video.

If you are interested in a more in-depth overview, head over to the Analytics & data page to get more information.

Notice that we are passing few parameters:

  • Video Id: This represents the video you want to analyze, you can get the video you've used before in this example.

  • dimension: This parameter will accept a few values, including `country`` in order to return the determine which dimension you would like to analyze.

  • from: is a required field. The date from which the data should start.

Getting analytics data
const client = new ApiVideoClient({ apiKey: "YOUR_API_KEY" });
const from = "2023-09-01";
const dimension = "country"; 
const filter = "videoId:vi3q7HxhApxRF1c8F8r6VeaI"; 
const videoPlays = await client.analytics.getVideosPlays({
  from, dimension, to, filter, currentPage, pageSize
});

The result will be something like this:

{
  "data": [
    {
      "value": "Argentina",
      "plays": 5
    },
    {
      "value": "Israel",
      "plays": 3
    },
    {
      "value": "Estonia",
      "plays": 2
    },
  ],
  "pagination": {
   ...
  }
}

You can now play around with the results and create whatever analysis you need.

Was this page helpful?