Private Video On Hls Or External Players

api.video recommends that you read Private Videos to ensure that you understand the concept of private videos before proceeding.

There are cases where you would want to use built-in players that are not api.video. We support private video delivery via other players other than our in-house. In this article you can find how to deliver private videos with HLS built-in player

HLS manifest for private videos

Playing your private video on an HLS player is as easy as just passing on the url we provide while you retrieve
for example, if you would like to play the video on HLS, we provide a ready made url for with the HLS manifest:

https://vod.api.video/vod/{video id}/token/{private token}/hls/manifest.m3u8

Serving private videos to HTML on Safari, Chrome and Firefox

You can use the video tag directly to play the video in Safari, for example:

<html>
  <head>
  </head>
  <body>
  	<video>
    	<source src='https://vod.api.video/vod/{video id}/token/{private token}/hls/manifest.m3u8'>
    </video>
  </body>
</html>

Example of loading the manifest with hls.js on Safari:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

<video id="video"></video>
<script>
  if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
      console.log('video and hls.js are now bound together !');
    });
    hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
      console.log(
        'manifest loaded, found ' + data.levels.length + ' quality level'
      );
    });
    hls.loadSource('https://vod.api.video/vod/{video id}/token/{private token}/hls/manifest.m3u8');
    // bind them together
    hls.attachMedia(video);
  }
</script>

Source: GitHub

Test the manifest with hls.js demo

You can test and pass the manifest to this demo player that is provided by hls.js: https://hls-js.netlify.app/demo/

Serving private videos dynamically

In order to build a dynamically served private videos, you can leverage the /videos endpoint in order to get the url of the video and private token. For example the following steps are possible:

Make a request to /videos endpoint

curl --request GET \
     --url https://ws.api.video/videos/ABC \
     --header 'accept: application/json' \
     --header 'authorization: Basic ZYX='

You will get the following response, where the private token in the url and you can get the manifest url from the hls field:

{
  "videoId": "ABC",
  "title": "test video",
  "description": "something that I wanted to share",
  "public": false,
  "panoramic": false,
  "mp4Support": true,
  "publishedAt": "2023-01-19T10:19:19+00:00",
  "createdAt": "2023-01-19T10:19:19+00:00",
  "updatedAt": "2023-01-26T16:55:41+00:00",
  "tags": [],
  "metadata": [],
  "source": {
    "type": "upload",
    "uri": "/videos/ABC/source"
  },
  "assets": {
    "iframe": "<iframe src=\"https://embed.api.video/vod/ABC?token=XYZ\" width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"true\"></iframe>",
    "player": "https://embed.api.video/vod/ABC?token=XYZ",
    "hls": "https://vod.api.video/vod/ABC/token/XYZ/hls/manifest.m3u8",
    "thumbnail": "https://vod.api.video/vod/ABC/token/XYZ/thumbnail.jpg",
    "mp4": "https://vod.api.video/vod/ABC/token/XYZ/mp4/source.mp4"
  }
}

All you have to do now is to get the hls url and pass it as a value to the HTML that will be generated by the server. We will handle the rest.

Private video delivery on iOS / tvOS native player (HLS)

You can serve the manifest directly into the native iOS player, you can find an example below.

Reference: Apple Developer docs

@IBAction func playVideo(_ sender: UIButton) {
    guard let url = URL(string: "https://vod.api.video/vod/ABC/token/XYZ/hls/manifest.m3u8") else { return }

    // Create an AVPlayer, passing it the HTTP Live Streaming URL.
    let player = AVPlayer(url: url)

    // Create a new AVPlayerViewController and pass it a reference to the player.
    let controller = AVPlayerViewController()
    controller.player = player

    // Modally present the player and call the player's play() method when complete.
    present(controller, animated: true) {
        player.play()
    }
}