How to use the Video.js player with Azure Media Services

Članak
05/02/2022
4 min. za čitanje

AMS website | Media Services v2 documentation | Code Samples | Troubleshooting guide

Overview

Video.js is a web video player built for an HTML5 world. It plays adaptive media formats (such as DASH and HLS) in a browser, without using plugins or Flash. Instead, Video.js uses the open web standards MediaSource Extensions and Encrypted Media Extensions. Moreover, it supports video playback on desktops and mobile devices.

Its official documentation can be found at https://docs.videojs.com/.

Sample code

Sample code for this article is available at Azure-Samples/media-services-3rdparty-player-samples.

Implement the player

Create an index.html file where you'll host the player. Add the following lines of code (you can replace the versions for newer if applicable):

<html>
  <head>
    <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
  </head>
  <body>
    <video id="video" class="video-js vjs-default-skin vjs-16-9" controls data-setup="{}">
    </video>

    <script src="https://vjs.zencdn.net/7.8.2/video.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-eme@3.7.0/dist/videojs-contrib-eme.min.js"></script>
    <script type="module" src="index.js"></script>
  </body>
<html>

Add an index.js file with the following code:

var videoJS = videojs("video");
videoJS.src({
  src: "manifestUrl",
  type: "protocolType",
});

Replace manifestUrl with the HLS or DASH URL from the streaming locator of your asset which can be found on the streaming locator page in the Azure portal.
Replace protocolType with the following options:
- "application/x-mpegURL" for HLS protocols
- "application/dash+xml" for DASH protocols

Set up captions

Run the addRemoteTextTrack method, and replace:

subtitleKind with either "captions", "subtitles","descriptions", or "metadata"
caption with the .vtt file path (vtt file needs to be in the same host to avoid CORS error)
subtitleLang with the BCP 47 code for language, for example, "eng" for English or "es" Spanish
subtitleLabel with your desired display name of caption

videojs.players.video.addRemoteTextTrack({
  kind: subtitleKind,
  src: caption,
  srclang: subtitleLang,
  label: subtitleLabel
});

Set up token authentication

The token must be set in the authorization field of the request's header. In order to avoid problems with CORS, this token must be set only in those requests with 'keydeliver' in its URL. The following code lines should do the work:

setupTokenForDecrypt (options) {
  if (options.uri.includes('keydeliver')) {
    options.headers = options.headers || {}
    options.headers.Authorization = 'Bearer=' + this.getInputToken()
  }

  return options
}

Then, the above function must be attached to the videojs.Hls.xhr.beforeRequest event.

videojs.Hls.xhr.beforeRequest = setupTokenForDecrypt;

Set up AES-128 encryption

Video.js supports AES-128 encryption without any additional configuration.

Azure Media Services currently does not support the Common Encryption (CENC) clear key with CBC encryption which can result in failures in some players.

Set up DRM protection

In order to support DRM protection, you must add the videojs-contrib-eme official extension. A CDN version works as well.

In the index.js file detailed above, you must initialize the EME extension by adding videoJS.eme(); before adding the source of the video:
```
 videoJS.eme();
```

Now you can define the URLs of the DRM services, and the URLs of the corresponding licenses as follows:

videoJS.src({
    keySystems: {
        "com.microsoft.playready": "YOUR PLAYREADY LICENSE URL",
        "com.widevine.alpha": "YOUR WIDEVINE LICENSE URL",
        "com.apple.fps.1_0": {
         certificateUri: "YOUR FAIRPLAY CERTIFICATE URL",
         licenseUri: "YOUR FAIRPLAY LICENSE URL"
        }
      }
    })

Acquiring the license URL

In order to acquire the license URL, you can:

Consult your DRM provider configuration
or, if you are using the sample, consult the output.json document generated when you ran the setup-vod.ps1 PowerShell script for VODs, or the start-live.ps1 script for live streams. You'll also find the KIDs inside this file.

Using tokenized DRM

In order to support tokenized DRM protection, you have to add the following line to the src property of the player:

videoJS.src({
src: ...,
emeHeaders: {'Authorization': "Bearer=" + "YOUR TOKEN"},
keySystems: {...

Security considerations for closed captions, subtitles, and timed-metadata delivery

The dynamic encryption and DRM features of Azure Media Services has limits to consider when attempting to secure content delivery that includes live transcriptions, captions, subtitles, or timed-metadata. The DRM subsystems, including PlayReady, FairPlay, and Widevine do not support the encryption and licensing of text tracks. The lack of DRM encryption for text tracks limits your ability to secure the contents of live transcriptions, manual inserted captions, uploaded subtitles, or timed-metadata signals that may be inserted as separate tracks.

To secure your captions, subtitles, or timed-metadata tracks, follow these guidelines:

Use AES-128 Clear Key encryption. When enabling AES-128 clear key encryption, the text tracks can be configured to be encrypted using a full "envelope" encryption technique that follows the same encryption pattern as the audio and video segments. These segments can then be decrypted by a client application after requesting the decryption key from the Media Services Key Delivery service using an authenticated JWT token. This method is supported by the Azure Media Player, but may not be supported on all devices and can require some client-side development work to make sure it succeeds on all platforms.
Use CDN token authentication to protect the text (subtitle, captions, metadata) tracks being delivered with short form tokenized URLs that are restricted to geo, IP, or other configurable settings in the CDN portal. Enable the CDN security features using Verizon Premium CDN or other 3rd-party CDN configured to connect to your Media Services streaming endpoints.

Warning

If you do not follow one of the guidelines above, your subtitles, captions, or timed-metadata text will be accessible as un-encrypted content that could be intercepted or shared outside of your intended client delivery path. This can result in leaked information. If you are concerned about the contents of the captions or subtitles being leaked in a secure delivery scenario, reach out to the Media Services support team for more information on the above guidelines for securing your content delivery.