Downloadable video

i want to make download button like in youtube
the downloaded video must be only previwed from the app for only authorized user
could i make this for the private video and keep my content secure across all platform

Hey there,

This is very possible, however, a bit tricky. I’d recommend to read the documentation about private videos and session tokens first here: Private Videos

First, you would want to make sure that you disable the mp4support parameter and set it to false. This parameter allow any user that has access to the video to download it. If you would like to create a button, you can go with something like this:

<!DOCTYPE html>
<html>
   <body>
         <a >
         <button type="button">Download</button>  
         </a>
   </body>
<script>

function forceDownload(blob, filename) {
  let a = document.createElement('a');
  a.download = filename;
  a.href = blob;
  document.body.appendChild(a);
  a.click();
  a.remove();
}

// Current blob size limit is around 500MB for browsers
function downloadResource(url, filename) {
  if (!filename) filename = url.split('\\').pop().split('/').pop();
  fetch(url, {
      headers: new Headers({
        'Origin': location.origin
      }),
      mode: 'cors'
    })
    .then(response => response.blob())
    .then(blob => {
      let blobUrl = window.URL.createObjectURL(blob);
      forceDownload(blobUrl, filename);
    })
    .catch(e => console.error(e));
}

downloadResource('https://vod.api.video/vod/xyxyxyx/token/7f641aff-8ae9-46ea-8157-807a204239f5/mp4/source.mp4');

</script>
</html>

Notice that we are doing a fetch, because the download tag in wouldn’t work for cross origin due to some Chrome limitations.

The video id and token can be fetched from the backend by making a request to the Videos endpoint: List all videos

As you are passing in the mp4 asset, make sure the leverage the avh session token, as you are showing the video once, it will be already consumed and in order for the user to download the same video, the avh session token will have to be added to the url you are passing to the fetch function.

Hope it helps :slight_smile:

1 Like