How to determine thumbnail url

After successfully adding a thumbnail using the “Try it!” function in the API Reference I can also do a List Thumbnail successfully. However, the response does not contain a the url of the thumbnail. I therefore assume that I’m supposed to construct the url from the info in the response. I’ve tried multiple combinations without success, so I hope somebody can help.

The manifest url I have is:
https://d2vw4x42lbv2yd.cloudfront.net/2c1df0cb-e0c5-4e80-a8e9-eb59cace7e17/manifest.mpd

Something like https://d2vw4x42lbv2yd.cloudfront.net/2c1df0cb-e0c5-4e80-a8e9-eb59cace7e17/thumbs/thumbnail-5_0.png would be natural to try. But it’s not working.

This is the response from List Thumbnails:

{
“requestId”: “e763596f-9d46-45ef-aced-e4b07a3b0f7b”,
“status”: “SUCCESS”,
“data”: {
“result”: {
“totalCount”: 1,
“items”: [
{
“id”: “7f5ac4ba-2221-4f01-90f3-13cf484436ec”,
“createdAt”: “2023-11-16T20:15:36Z”,
“modifiedAt”: “2023-11-16T20:15:36Z”,
“height”: 1080,
“width”: 1920,
“pattern”: “thumbnail-%number%.png”,
“unit”: “SECONDS”,
“positions”: [
5
],
“outputs”: [
{
“outputId”: “2735db53-bd1f-4fce-a764-2bcae65cc1dd”,
“outputPath”: “/thumbs/”,
“acl”: [
{
“permission”: “PUBLIC_READ”
}
]
}
],
“aspectMode”: “STRETCH”
}
]
}
}
}

I’ve spent the last two days to figure out how the thumbnail feature might work. I’ve discovered that when using my own s3 bucket as output, writing encoded video files, manifests etc. to this s3 bucket and viewing the stream in a browser, works fine, which tells me the bucket is configured correctly.

Despite this, when trying to run “Add Thumbnail” and getting a success response when running it, no new files appear in my s3 bucket, which has led me to believe that it’s not finding the thumbnail url that is the problem. The problem is creating the thumbnail in the first place.

I can not find any working js sample code anywhere on the internet, so I wonder if this function has ever worked. Has any one had success creating thumbnails with this API ?

Hi,
The API returns the output ID, output path and the file naming template.
From there, you can build the output path of each thumbnail.

Example, in case you are using S3 as output and your bucket name is “hello”, then you can build the file path as below :

https://hello.s3.amazonaws.com/[thumnailOutputPath]/thumbnail-[number].png

Please let me know in case there is anything specific you don’t manage to do with this approach and I will help you out further.

Please feel free to open a support ticket or share your encoding ID and we can investigate more specifically in case thumbnails are still not present in your output destination.

Hi. Thanks for answering!
Just now I tried to Add one single thumbnail with “Add thumbnail”. I am using the bitmovin CDN for outout. I have a short stream here and if I paste this: https://d2vw4x42lbv2yd.cloudfront.net/f94783f4-bbbf-493b-bffb-a53eb14d8fff/manifest.m3u8 in to safari it plays just fine.

Using the response below I constructed the url: https://d2vw4x42lbv2yd.cloudfront.net/thumbnails/thumbnail-2_0.jpg

When I paste this url in to a browser I expect to se an image, but I only get AccessDenied from cloudfront.

The encoding id is: a17a0c82-2978-4753-bdf3-2231a4bf7fc0

By the way, if I do the same operation using an S3 bucket, there is absolutely no trace of any thumbnail anywhere in the bucket.

{
“requestId”: “c8071004-50d9-4717-95e7-4f9f3f413ae6”,
“status”: “SUCCESS”,
“data”: {
“result”: {
“id”: “d527cd21-8083-4340-beae-495520bff47d”,
“createdAt”: “2023-11-20T18:09:58Z”,
“modifiedAt”: “2023-11-20T18:09:58Z”,
“height”: 240,
“width”: 320,
“pattern”: “thumbnail-%number%.jpg”,
“unit”: “SECONDS”,
“positions”: [
2
],
“outputs”: [
{
“outputId”: “2735db53-bd1f-4fce-a764-2bcae65cc1dd”,
“outputPath”: “/thumbnails”,
“acl”: [
{
“permission”: “PUBLIC_READ”
}
]
}
],
“aspectMode”: “STRETCH”
},
“messages”: [
{
“id”: “83a6bead-01bd-413e-a68a-e761a8896969”,
“date”: “2023-11-20T18:09:58Z”,
“type”: “INFO”,
“text”: “Thumbnail configuration created successfully”
}
]
}
}

Here is the request:

curl --request POST
–url --the url here
–header ‘X-Api-Key: xxxxxxxxxxxxxxxx’
–header ‘accept: application/json’
–header ‘content-type: application/json’
–data ’
{
“unit”: “SECONDS”,
“aspectMode”: “STRETCH”,
“pattern”: “thumbnail-%number%.jpg”,
“outputs”: [
{
“outputId”: “2735db53-bd1f-4fce-a764-2bcae65cc1dd”,
“outputPath”: “/thumbnails”,
“acl”: [
{
“permission”: “PUBLIC_READ”
}
]
}
],
“height”: 240,
“width”: 320,
“positions”: [
2
]
}

Given the timing of the request, I suspect that you created the thumbnail after the encoding job was finished.
It needs to be done before the encoding starts because Thumbnails generation is part of the video encoding process

So, the “Add thumbnail” never really creates a thumbnail ? It just creates some data for the encoder ?

If so, that is extremely confusing to say the least. It should be called “Add thumbnail time” or something. I’ve regrettably wasted several work days on this.

When creating encodings via the web interface it is not possible to get the necessary encoding_id, so I guess this only is usable when encoding is created via api ? Or is there a other way to get the encoding_id before encoding ?

And what if I forget to add a thumbnail time for a chapter? Must I re-encode everything ?

What are the use-cases for this functionality other than WebVTT based thumbnails ?

It certainly will not work for my video player with chapters under the video like this: https://www.fagfilm.no/filmer/kategori/akademiske-yrker/tittel/elektronikkingeni%C3%B8r/kapittel-0:start

Essentially, the encoder processes the video only once : at the time the encoding job is in progress. This includes generating the segments, thumbnails etc. Otherwise it would be extremely resources consuming to re-download the input file etc… Only to generate thumbnails, for instance.

Only GETting resources, and generating manifests can be done after the encoding job is completed so it is recommended to anticipate which thumbnails you need to generate for instance. Please feel free to let me know more about the use-case and I might be able to help you optimize the process.

You can also generate thumbnails with a new encoding containing only one rendition for instance

Hello Geirbo,

If you want to add the thumbnails using the Try It function in the documentation (https://developer.bitmovin.com/encoding/reference/postencodingencodingsstreamsthumbnailsbyencodingidandstreamid), you must do this while the encoding is in the CREATED state.

Note: This is NOT a recommended workflow, it is just for explaining when the Add Thumbnails Try It function indeed produces thumbnail files.

In this state the encoding is already prepared but not started yet. If you use the Add Thumbnail “Try it” function when the encoding is CREATED, you add the thumbnail configuration to the encoding and it will generate the thumbnails once you start it.

This workflow goes like this:

1 . Create an encoding with any means (SDK, direct HTTP calls using tools like Postman, etc) but don’t start it.
2. Go to the dashboard and verify that your encoding is in the CREATED state.
3. Get from the dashboard the encoding ID and the ID of one video stream. Also get the ID of the output that is configured with the encoding.
4. Go to https://developer.bitmovin.com/encoding/reference/postencodingencodingsstreamsthumbnailsbyencodingidandstreamid and enter the required values into the input fields, including

  • Encoding ID
  • Video Stream ID
  • Name, height, width,
  • The file name pattern (e.g “thumbnail-%number%.png”)
  • Interval (e.g. 4 seconds)
  • Output ID
  • Output Path (this should be the same you configured for the encoding, plus “thumb/”).

The resulting curl request will look like this:

curl --request POST \
--url https://api.bitmovin.com/v1/encoding/encodings/<encoding_id>/streams/<stream_id>/thumbnails \
--header 'X-Api-Key: <api_key>' \
--header 'accept: application/json' \
--header 'content-type: application/json' \
--data '
{
"unit": "SECONDS",
"aspectMode": "STRETCH",
"pattern": "thumbnail-%number%.png",
"width": 320,
"height": 240,
"name": "myThumbnail",
"interval": 4,
"outputs": [
{
"outputId": "<output_id>",
"outputPath": "output/path/to/encoded/files/thumb/",
"acl": [
{
"permission": "PUBLIC_READ"
}
]
}
]
}
'

5 . Now, click “Try it” . The result should look like:

{
"requestId": "dbd9870b-5003-488d-b038-b9850fa378d2",
"status": "SUCCESS",
"data": {
"result": {
"id": "98e1ea41-b45b-4c15-8b4c-532a64ff1234",
"createdAt": "2023-11-21T15:33:07Z",
"name": "myThumbnail",
"modifiedAt": "2023-11-21T15:33:07Z",
"height": 240,
"width": 320,
"pattern": "thumbnail-%number%.png",
"unit": "SECONDS",
"outputs": [
{
"outputId": "<output_id>",
"outputPath": "output/path/to/encoded/files/thumb/",
"acl": [
{
"permission": "PUBLIC_READ"
}
]
}
],
"interval": 4,
"aspectMode": "STRETCH"
},
"messages": [
{
"id": "34617150-cfdb-4702-ab7b-2db4411ce90a",
"date": "2023-11-21T15:33:07Z",
"type": "INFO",
"text": "Thumbnail configuration created successfully"
}
]
}
}

6 . Start the encoding (again using the SDK, or direct HTTP calls using tools like Postman, etc)

After the encoding is FINISHED, you will find the thumbnail in the output with the <output_id>, which should be the output that you configured the encoding with and thus, the output where the encoding wrote the encoded segments and manifests as well. You will find the thumbnails in the directory that you configured, e.g. output/path/to/encoded/files/thumb/ .

I have described this workflow because it contains the usage of the Add Thumbnail “Try it” function in the documentation. This workflow is however not recommended for larger scale testing or production. Here, you should configure the whole encoding using the SDK or the Simple API.

As Ludo said, please elaborate about your use case and intended workflow so we can better help you to set it up.

Hope this helps, and kind regards

Peter

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.