Thumbnails

Hyperserve supports generating any number of thumbnails for uploaded videos in jpeg format.

Generating thumbnails

When you create your video, you can choose to supply a list of timestamps to generate images from the video at. These images will be rendered at each of the resolutions you select in the resolutions field. Check out the create video api call for more information.

const formData = new FormData();

formData.append('file', videoFile);
formData.append('resolutions', '144p,240p,480p');
formData.append('thumbnail_timestamps_seconds', '3,4,8');
formData.append('isPublic', 'true');

fetch(`https://dev.api.hyperserve.io/api/video`, {
method: 'POST',
headers: {
  'X-API-KEY': YOUR_HYPERSERVE_API_KEY,
},
body: formData
});

Displaying generated thumbnails

When you retrieve your video via the Get public video or Get private video apis you will get, in the variants object, an array of thumbnail urls for each resolution. You can use this at run time to display the right thumbnail or set of thumbnails for the right screensize.

data:{
  ...
  variants :{
    "144p": {
      ...
      thumbnail_urls: ["some_url"]
    }
    "240p":{
      ...
    },
    "480p":{
      ...
    }
  }
}