Getting started with delivery

api.video provides you with powerful tools that enable you to deliver content to your users with great customization and branding.

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

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.

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.

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:

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.

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:

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:

// 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!