In a previous article, I showed how to embed into a web page a video encoded with Azure Media Services (AMS).

In this article, I will show you how to add captions to that video.

In my last article, I showed you how to perform audio transcription with Azure Media Services using an Audio Transcription Job. Among other things, this generates a transcript.vtt file with speech-to-text data, listing anything spoken in the video, along with the time at which the words were spoken.

You can also generate this data by using the "Video and Audio Analyzer" job, as described in this article.

For this work, the transcript.vtt file must be in the same folder as the video(s) playing on your web page. A simple way to do this is to download the file from its current container and upload it into the Encoded Video container.

Navigate to the Azure Portal and to your Azure Media Services account, as shown in Fig. 1.

Fig. 1

Then, select "Assets" from the left menu to open the "Assets" blade, as shown in Fig. 2.

Fig. 2

Select the Output Asset containing Audio Transcription or Analyzer data to display the Asset details page, as shown in Fig. 3.

Fig. 3

Click the link next to the "Storage container" label (Fig. 4) to open the Storage Blob container associated with this asset, as shown in Fig. 5. This container should open in a new browser tab.

Fig. 4

Fig. 5

Click the "transcript.vtt" row to open the blob blade showing details of the transcript.vtt blob, as shown in Fig. 6.

Fig. 6

Click the download button (Fig. 7) in the top toolbar and save the transcript.vtt file on your local disc. Note where you save this file.

Fig. 7

Listing 1 shows a sample VTT file.

Listing 1

WEBVTT

NOTE duration:"00:00:11.0290000"

NOTE language:en-us

NOTE Confidence: 0.90088177

00:00:00.000 --> 00:00:04.956 
 This video is about Azure Media Services

NOTE Confidence: 0.90088177

00:00:04.956 --> 00:00:11.029 
 and Azure Media Services are. Awesome.
  

Navigate again to the "Assets" blade, as shown in Fig. 8.

Fig. 8

In the row of the Analyzer or Audio Transcription asset, click the link in the "Storage link" column to open the container associated with this asset, as shown in Fig. 9.

Fig. 9

Click the upload button (Fig. 10) to open the "Upload blob" dialog, as shown in Fig. 11.

Fig. 10

Fig. 11

Click the "Select a file" field to open a file navigation dialog. Navigate to the older where you stored transcript.vtt and select this file. Then, click the [Upload]

When the dialog closes, you should return to the Container blade and transcript.vtt should now be listed, as shown in Fig. 12.

Fig. 12

Click to open the asset containing the video(s) used to generate the VTT file, as shown in Fig. 13.

Fig. 13

Start the Streaming Locator, if it is not already started. If you have not yet created a Streaming Locator, this article walks you through it.

Copy the Streaming URL and save it somewhere. It should begin with "https://" and end with "manifest".

As a reminder, Listing 2 shows the HTML to embed an AMS video in a web page. This is the code shown in this article.

Listing 2:

 
< html lang="en"> 
< head> 
     
     href="https://amp.azure.net/libs/amp/2.3.6/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> 
     
< /head> 
< body> 
    
Video 
     id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" data-setup='{"nativeControlsForTouch": false}'> 
         src="STREAMING_URL_MANIFEST" 
                type="application/vnd.ms-sstr+xml" /> 
default />--> 
     
< /body> 
< /html>
  

where STREAMING_URL_MANIFEST is replaced with the Streaming URL you copied from the video asset.

To add captions to this video, add a tag inside the

Listing 3

 
< html lang="en"> 
< head> 
     
     href="https://amp.azure.net/libs/amp/2.3.6/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> 
     
< /head> 
< body> 
    
Video 
     id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" data-setup='{"nativeControlsForTouch": false}'> 
         src="STREAMING_URL_MANIFEST" 
                 type="application/vnd.ms-sstr+xml" /> 
         src="VTT_URL" label="english" kind="subtitles" srclang="en-us" default /> 
     
< /body> 
< /html>
  

where VTT_URL is replaced with a URL consisting of the same domain and folder as in the src attribute of the source tag, but with "transcript.vtt" as the file name.

Listing 4shows an example using an Azure Media Services account that I have since deleted.

Listing 4:

 lang="en">

    
     href="https://amp.azure.net/libs/amp/2.3.6/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
    


    
Video
     id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" data-setup='{"nativeControlsForTouch": false}'>
         src="https://dgtestblogams-usea.streaming.media.azure.net/232493e2-8c99-41a0-bb09-5a0aea47de35/3b331fca-41e6-458c-8171-235ef3f76875.ism/manifest"
                type="application/vnd.ms-sstr+xml" />
         src="https://dgtestblogams-usea.streaming.media.azure.net/29a650b6-5c0a-4932-8efb-2b4bb4a81bf0/transcript.vtt" label="english" kind="subtitles" srclang="en-us" default />
    


  

Add this HTML file to any web server and navigate to its URL using a web browser. You should see a page with your video embedded and with captions displaying at the bottom of the video, as shown in Fig. 14.

Fig. 14

In this article, I showed you how to include captions in an Azure Media Services video embedded in a web page.