Use the Azure Video Analyzer player widget

In this tutorial, you learn how to use a player widget within your application. This code is an easy-to-embed widget that allows your users to play video and browse through the portions of a segmented video file. To do this, you'll be generating a static HTML page with the widget embedded, and all the pieces to make it work.

In this tutorial, you will:

  • Create a token
  • List videos
  • Get the base URL for playing back a video application resource
  • Create a page with the player
  • Pass a streaming endpoint and a token to the player

Prerequisites

The following are required for this tutorial:

List video resources

Next, generate a list of video resources. You make a REST call to the account endpoint you used earlier, and you authenticate with the token you generated.

There are many ways to send a GET request to a REST API, but for this you're going to use a JavaScript function. The following code uses XMLHttpRequest, coupled with values you're storing in the clientApiEndpointUrl and token fields on the page to send a synchronous GET request. It then takes the resulting list of videos and stores them in the videoList text area you have set up on the page.

function getVideos()
{
    var xhttp = new XMLHttpRequest();
    var getUrl = document.getElementById("clientApiEndpointUrl").value + "/videos?api-version=2021-05-01-preview";
    xhttp.open("GET", getUrl, false);
    xhttp.setRequestHeader("Authorization", "Bearer " + document.getElementById("token").value);
    xhttp.send();
    document.getElementById("videoList").value = xhttp.responseText.toString();
}

Note

The clientApiEndPoint and token are collected from creating a token

Add the Video Analyzer player component

Now that you have a client API endpoint URL, a token, and a video name, you can add the player to the page.

  1. Include the player module itself by adding the package directly to your page. You can either include the NPM package direction in your application, or have it embed dynamically at runtime, as in the following:
    <script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets"></script>
    
  2. Add an AVA-Player element to the document:
    <ava-player width="720px" id="avaPlayer"></ava-player>
    
  3. Get a link to the Video Analyzer player widget that is in the page:
    const avaPlayer = document.getElementById("avaPlayer");
    
  4. To configure the player with the values that you have, you will need to set them up as an object, as shown here:
    avaPlayer.configure( {
       token: document.getElementById("token").value,
       clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
       videoName: document.getElementById("videoName").value
    } );
    
  5. Load the video into the player to begin.
    avaPlayer.load();
    

Add the Zone Drawer Component

  1. Add an AVA-Zone-Drawer element to the document:
    <ava-zone-drawer width="720px" id="zoneDrawer"></ava-zone-drawer>
    
  2. Get a link to the Video Analyzer zone drawer that is in the page:
    const zoneDrawer = document.getElementById("zoneDrawer");
    
  3. Load the zone drawer into the player:
    zoneDrawer.load();
    
  4. To create and save zones, you have to add event listeners here:
    zoneDrawer.addEventListener('ZONE_DRAWER_ADDED_ZONE', (event) => {
             console.log(event);
             document.getElementById("zoneList").value = JSON.stringify(event.detail);
         });
    
         zoneDrawer.addEventListener('ZONE_DRAWER_SAVE', (event) => {
             console.log(event);
             document.getElementById("zoneList").value = JSON.stringify(event.detail);
         });
    

Put it all together

Combining the preceding web elements, you get the following static HTML page. This page allows you to use an account endpoint and token to view a video.

<html>
<head>
<title>Video Analyzer Player Widget Demo</title>
</head>
<script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets"></script>
<body>
<script>
    function getVideos()
    {
        var xhttp = new XMLHttpRequest();
        var getUrl = document.getElementById("clientApiEndpointUrl").value + "/videos?api-version=2021-05-01-preview";
        xhttp.open("GET", getUrl, false);
        xhttp.setRequestHeader("Authorization", "Bearer " + document.getElementById("token").value);
        xhttp.send();
        document.getElementById("videoList").value = xhttp.responseText.toString();
    }
    function playVideo() {
        const avaPlayer = document.getElementById("avaPlayer");
        avaPlayer.configure( {
            token: document.getElementById("token").value,
            clientApiEndpointUrl: document.getElementById("clientApiEndpointUrl").value,
            videoName: document.getElementById("videoName").value
        } );
        avaPlayer.load();
    
        const zoneDrawer = document.getElementById("zoneDrawer");
        zoneDrawer.load();

        zoneDrawer.addEventListener('ZONE_DRAWER_ADDED_ZONE', (event) => {
            console.log(event);
            document.getElementById("zoneList").value = JSON.stringify(event.detail);
        });

        zoneDrawer.addEventListener('ZONE_DRAWER_SAVE', (event) => {
            console.log(event);
            document.getElementById("zoneList").value = JSON.stringify(event.detail);
        });
    }
</script>
Client API endpoint URL: <input type="text" id="clientApiEndpointUrl" /><br><br>
Token: <input type="text" id="token" /><br><br>
<button type="submit" onclick="getVideos()">Get Videos</button><br><br>
<textarea rows="20" cols="100" id="videoList"></textarea><br><br>
Video name: <input type="text" id="videoName" /><br><br>
<button type="submit" onclick="playVideo()">Play Video</button><br><br>
<textarea rows="5" cols="100" id="zoneList"></textarea><br><br>
<ava-zone-drawer width="720px" id="zoneDrawer">
    <ava-player id="avaPlayer"></ava-player>
</ava-zone-drawer>
</body>
</html>

Host the page

You can test this page locally, but you might want to test a hosted version. In case you don't have a quick way to host a page, here are instructions on how to do so by using static websites with Azure Storage. The following steps are a condensed version of these more complete instructions. The steps are updated for the files you're using in this tutorial.

  1. Create a storage account.
  2. Under Data management, select Static website.
  3. Enable the static website on the storage account.
  4. For Index document name, enter index.html.
  5. For Error document path, enter 404.html.
  6. Select Save.
  7. Note the Primary endpoint that shows up. This will be your website.
  8. Above Primary endpoint, select $web.
  9. By using the Upload button at the top, upload your static HTML page as index.html.`

Play a video

Now that you have the page hosted, go there and go through the steps to play a video.

  1. Enter the Client API endpoint URL and Token values.
  2. Select Get videos.
  3. From the video list, select a video name, and enter it into the Video name field.
  4. Select Play video.

Additional details

The following sections contain some important additional details to be aware of.

Refresh the access token

The player uses the access token that you generated earlier to get a playback authorization token. Tokens expire periodically and need to be refreshed. There are two ways to refresh the access token for the player after you've generated a new one:

  • Actively calling the widget method setAccessToken.
    avaPlayer.setAccessToken('<NEW-ACCESS-TOKEN>');
    
  • Acting upon the TOKEN_EXPIRED event by listening to this event.
    avaPlayer.addEventListener(PlayerEvents.TOKEN_EXPIRED, () => {
        avaPlayer.setAccessToken('<YOUR-NEW-TOKEN>');
    });
    

The TOKEN_EXPIRED event will occur 5 seconds before the token is going to expire. If you're setting an event listener, you should do so before calling the load function on the player widget.

Configuration details

The preceding player has a simple configuration, but you can use a wider range of options for configuration values. The following are the supported fields:

Name Type Description
token string Your JWT token for the widget
videoName string The name of the video resource
clientApiEndpointUrl string The endpoint URL for the client API

Alternate ways to load the code into your application

The package used to get the code into your application is an NPM package. In the preceding example, the latest version was loaded at runtime directly from the repository. But you can also download and install the package locally by using the following:

npm install @azure/video-analyzer/widgets

Or you can import it within your application code by using this for TypeScript:

import { Player } from '@azure/video-analyzer-widgets';
import { ZoneDrawer } from '@azure/video-analyzer-widgets';

If you want to create a player widget dynamically, you can use this for JavaScript:

<script async type="module" src="https://unpkg.com/@azure/video-analyzer-widgets@latest/dist/global.min.js"></script>

If you use this method to import, you will need to create the zone drawer and player objects programmatically after the import is complete. In the preceding example, you added the module to the page using the ava-player HTML tag. To create a zone drawer object and a player object through code, you can do the following in JavaScript:

const zoneDrawer = new window.ava.widgets.zoneDrawer();
document.firstElementChild.appendChild(zoneDrawer);
const playerWidget = new window.ava.widgets.player();
zoneDrawer.appendChild(playerWidget);

Or, in TypeScript:

const avaPlayer = new Player();
const zoneDrawer = new ZoneDrawer();

Then you must add it to the HTML:

document.firstElementChild.appendChild(zoneDrawer);
zoneDrawer.appendChild(playerWidget);

Next steps