Images from Video
Generate images from videos which can be used to show a preview thumbnail or poster images
Generate a thumbnail from a video
To generate an image from a video you can make a request to thevideo.gumlet.io using the following request format
https://video.gumlet.io/{COLLECTION_ID}/{ASSET_ID}/thumbnail-1-0.png
You will need the Gumlet Collection ID and Asset ID of the video which can be obtained from the Gumlet dashboard
The image can be generated at any playback instant by using the time query parameter
https://video.gumlet.io/{COLLECTION_ID}/{ASSET_ID}/thumbnail-1-0.png?time=1
Example: https://video.gumlet.io/5f462c1561cf8a766464ffc4/635789f017629894d4d125a4/thumbnail-1-0.png?time=20
Query Parameters
We support lot of query parameters like crop, flip, etc. Apart from what is listed there, can use the following query parameters.
| Parameter | Type | Example | Description |
|---|---|---|---|
| time | int or string | 13 or 00:00:13.12 | Query parameter to generate the image at any given video playback instant. We support two formats viz. seconds or HH:MM:SS.MS |
| width | int (pixels) | 500 | Query parameter used to control the width of the output image, by default the output image has the same width as that of the video |
| height | int (pixels) | 500 | Query parameter used to control the height of the output image, by default the output image has the same size as that of the video |
Generating a GIF from a video
Gumlet supports generating animated GIFs from a video using the following request format
https://video.gumlet.io/{COLLECTION_ID}/{ASSET_ID}/thumbnail-1-0.png?time=1&format=gif
Use the following query parameters to control the output
| Parameter | Type | Example | Description |
|---|---|---|---|
| time | int or string | 13 or 00:00:13.12 | Query parameter to generate the image at any given video playback instant. We support two formats viz. seconds or HH:MM:SS.MS |
| format | string | gif | This parameter is mandatory |
| duration | int (seconds) | 3 | The video duration to consider for creating the gif. The default value is 5 seconds |
| width | int (pixels) | 500 | Query parameter used to control the width of the output gif, by default the output gif has the same width as that of the video |
| height | int (pixels) | 500 | Query parameter used to control the height of the output gif, by default the output gif has the same size as that of the video |
| fps | int | 15 | Number of frames per second in the output gif, defaults to 10 fps. |
Generate timeline hover previews
What are timeline hover previews?
Timeline hover previews are images or thumbnails that make player operations like fast-forward, rewinding, and seeking more visually rich to the user. Consider the following example.
Each image (also called a thumbnail or tile) you see when hovering over the scrub bar (or player timeline) on the video player is part of a larger image called a storyboard. A storyboard is a collection of thumbnails or tiles, created from video frames selected at regular time intervals and arranged in a grid layout.
The following image is an example of a storyboard generated for the Big Buck Bunny video, the same video used to demo timeline hover previews above.
Add timeline hover previews to your player
There are different ways to add timeline previews depending on your chosen player's capability to support timeline hover previews.
Gumlet-generated storyboard images in PNG format can be requested with the help of the following URL.
https://video.gumlet.io/{COLLECTION_ID}/{ASSET_ID}/preview_thumbnails.png
A lot of players support timeline hover preview with the help of a metadata file in the WebVTT format. This metadata file contains the x-axis and y-axis coordinates of each image in the storyboard image and the corresponding time range. The metadata file can be accessed with the help of the following URL.
https://video.gumlet.io/{COLLECTION_ID}/{ASSET_ID}/preview_thumbnails.vtt
Consider the following as an example of a metadata file.
WEBVTT
00:00:00.000 --> 00:00:11.929
preview_thumbnails.png#xywh=0,0,240,160
00:00:11.929 --> 00:00:23.858
preview_thumbnails.png#xywh=240,0,240,160
00:00:23.858 --> 00:00:35.788
preview_thumbnails.png#xywh=480,0,240,160
00:00:35.788 --> 00:00:47.717
preview_thumbnails.png#xywh=720,0,240,160
00:00:47.717 --> 00:00:59.647
preview_thumbnails.png#xywh=960,0,240,160
00:00:59.647 --> 00:01:11.576
preview_thumbnails.png#xywh=0,160,240,160
00:01:11.576 --> 00:01:23.506
preview_thumbnails.png#xywh=240,160,240,160
00:01:23.506 --> 00:01:35.435
preview_thumbnails.png#xywh=480,160,240,160
00:01:35.435 --> 00:01:47.365
preview_thumbnails.png#xywh=720,160,240,160
The metadata file URL is also available in the Create Asset API response.
By default, storyboard images will contain 50 tiles within the image if the asset is less than 15 minutes duration. If the asset is more than 15 minutes, then there will be 100 tiles populated in the storyboard image. If you have any requirements with the number of images in the storyboard then you can contact [email protected]
WebVTT-compatible video players
WebVTT Limitations
Using a WebVTT file may be limited to HTML5 browser-based video players and may not be supported in Device specific SDKs including iOS and Android. iOS, Android, and other device platforms use a HLS iFrame Playlist.
Gumlet automatically generates iFrame playlist for all videos.
Updated 4 months ago