Get thumbnail from uploaded video
how to get thumbnail of a video that is uploaded on cloudinary as url?
-
Hi David,
This can be done by changing the file extension to an image format (jpg, etc).
For example:
This video:
https://res.cloudinary.com/demo/video/upload/dog.mp4
And creating a thumbnail by changing the extension to jpg:
https://res.cloudinary.com/demo/video/upload/dog.jpg
You can read more about this here:
https://cloudinary.com/documentation/video_manipulation_and_delivery#generating_video_thumbnails
-
hi michal,
i have similar problem with video thumbnail, the file was uploaded using "remote upload" model
so. i would like to get its thumbnail like so
( edit: this url now returns correct thumbnail )
but it returns 404, since cloudinary thinks its a new "remote upload"
edit: this one still 404, is it just scheduling issue?
-
Hey Toh Xue Zun,
I've just checked and it seems that the thumbnail URL works now. It was probably just a cached 404 error which has since been expired.
As a side note, if you do not want to change the extension of the file in the URL, you can achieve the same by adding `f_jpg` to the transformation component of the URL as follows:
https://res.cloudinary.com/stashally/video/upload/f_jpg/remote_url/www.stashally.com/social/photos/N7KmrFi6JiYPwyL59TMbZjimAtRNYTAyjzMY6Syx.mp4
If you still experience any issues with these URLs please feel free to let us know.Best,
Raz -
Hi Thomas,
As far I understood in the messages above, if you just rename the extension of the video file to ".jpg" you can use the file as an image to get the thumbnail. So, to test, I tried to upload manually an video with the ".jpg" extension (I just renamed the file before upload), but I got an "invalid format" message that cancels the upload process.
Some context: I'm developing a smartphone app that can upload, read & show images only, so I need to have a thumbnail from each uploaded video. When the user click on the image in my app, I can call a videoplayer pointing to the video link in Cloudinary. But to work I need a way to create automatically a thumbnail file to the video when upload it via app. So the idea to just rename the file with another extension fits perfectly, but I can't make it work.
Another approach maybe is to make a backend function that creates the thumbnail for me after the upload, keeping the same filename but changing the extension. But honestly I don't know how to do it, and how hard is to implement this approach, since I'm not a expert in cloudinary.
Any help will be appreciated!
Regards,
Paulo Vaz
-
Hi Paolo,
When using Cloudinary's Programmable Media product, a common workflow is that you upload the original asset as-is, unmodified, and then in your website or application, you create a URL for that asset, but also add some of our transformation parameters.
When the URL containing transformation parameters is requested, we'll create and deliver a "derived" copy of the original asset using the transformation options from the URL.
For a video thumbnail, that means that the basic idea is that you upload the video without any changes, and when building a URL in your application for the poster/thumbnail image, you take the video's basic details, but also add a transformation option asking us to return it in JPG format instead of its original format (or change the file extension to. jpg, which does the same thing).
You can add other options for resizing, filters and effects, automatic selection of the quality level and output format, etc.
As a specific example, for this video file in our demo account: https://res.cloudinary.com/demo/video/upload/dog.mp4
Either of these URLs will request a .jpg thumbnail of it:
https://res.cloudinary.com/demo/video/upload/dog.jpghttps://res.cloudinary.com/demo/video/upload/f_jpg/dog.mp4
Of those two options, you should use the second example in your case because you're using auto-upload, which means the file's extension should be the same as the file extension on the remote server, for at least the first request (so that we know which extension to include when requesting the remote file)
And these URLs requests the thumbnail with automatic quality and format:
https://res.cloudinary.com/demo/video/upload/f_auto,q_auto/dog.jpghttps://res.cloudinary.com/demo/video/upload/f_jpg/g_auto,q_auto/dog.mp4
(again, the second one is probably best if the remote file has a .mp4 extension and you're not sure that it was already uploaded into your account)
There's a longer guide in the documentation here including examples of building the URL in various SDKs, and more advanced features like choosing where in the video to take the frame that's returned as an image, automatic selection of which frame to use, etc: https://cloudinary.com/documentation/video_effects_and_enhancements#video_thumbnails
If it's still not working as you expect, you can contact us directly with your account details and an example URL that you tried to request, and we can check the reason for the error - there may also be an explanation in the `x-cld-error` header of the response
Regards,
Stephen
Post is closed for comments.
Comments
7 comments