After videos have been transcoded on api.video, it’s natural that you want to give your users the ability to download their videos, or just download the video for your own use, possibly for backup.
api.video allows you and your users to download videos directly from the player or programmatically through the API.
api.video playerDownload a video from
The video object can be created or updated with the
mp4Support tag. The tag will make the video downloadable and display a button on the api.video player.
- By default, the
mp4Supporttag is set to
true, hence the video is downloadable. If you want to disable the download ability from the api.video player, you have to set the
- If you don’t want the user to be able to download the video, do not serve the mp4 asset.
You can also find more information on the
/videos endpoints on the API reference page.
Disable download for a video object
How to create a video object with disabled download
Once the object is created, all you have to do is just upload the video to the object:
Disable download for an existing video object
It’s also possible to disable the download ability for the users, after the video was already uploaded and transcoded. For that, you just need to update the video object.
Creating a custom download button
Most players support download, however, if you would like to add a download button to a custom player that doesn’t have a download button, it’s also possible.
By leveraging the API, you can create a request to api.video, which will get the video id and then render a download button serving the mp4 asset.
In this example, you will learn how to create a custom download button with React and Node.js backend
- api.video API key, you can find the information on how to retrieve the API key in the Retrieve your api.video API key guide
- Make sure that you have Node.js, npm and React installed
- Create a React project
React Button Component
After you have the React project ready, navigate to the project root folder:
file-saver module dependency
We will need to add a new component to React, that will make a request and get the video mp4 asset url. For your convenience, we’ve created the component for you. All you have to do is add the component below.
// here you specify how you want to call the downloaded file const = ; const = // on the click handle, get the mp4 asset of the video const ; // download the mp4 asset using file-saver library const const
As a best practice, you need to add the component in the
Component folder (inside
Now let’s add the component to our
You will notice that you pass a
videoId as a prop, for this example, just grab any video id from your dashboard or from the API.
Serving the url from the backend server
In order to make sure that your request is not made from the frontend which might expose your API key, we need to create a server that will make the actual API request.
In the example, we are using Node.js with express server. Let’s create a Node.js server first
Then navigate to the directory
Initialise npm in that directory
Now edit the index.js file that you’ve created, and copy this code.
Make sure that you copy your API key from the api.video dashboard and replace the port to the port you would like to run the server on.
const = ; // cors can be commented out in prod const = const = const = // change the port to whatever port you would like to run the server on const = 5500 const = new; // get the video id from the request const // get the video mp4 asset url const
The next step is to install the modules. Make sure that you are in the server directory
Run the server
Starting up React
Depending on the port and hostname that you’ve set, replace the port in the React component (DownloadVideo) with the port that you’ve set for the server:
Start the React frontend from the React project directory
The result that you should see is a button that will download the
source.mp4 of the video once the button is clicked.
Was this page helpful?