Get thumbnail from uploaded video

Comments

7 comments

  • Avatar
    Michal Kuperman

    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

     

    0
    Comment actions Permalink
  • Avatar
    TOH XUE ZUN

    hi michal,

    i have similar problem with video thumbnail, the file was uploaded using "remote upload" model

    https://res.cloudinary.com/stashally/video/upload/remote_url/www.stashally.com/social/photos/N7KmrFi6JiYPwyL59TMbZjimAtRNYTAyjzMY6Syx.mp4

    so. i would like to get its thumbnail like so

    https://res.cloudinary.com/stashally/video/upload/remote_url/www.stashally.com/social/photos/N7KmrFi6JiYPwyL59TMbZjimAtRNYTAyjzMY6Syx.jpg

    ( 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?

    https://res.cloudinary.com/stashally/video/upload/remote_url/www.stashally.com/social/photos/mA3fkMs23DsIZWYwVLjtIE8IpV1ALqY51lrpSw9O.jpg

     

    0
    Comment actions Permalink
  • Avatar
    Raz Ziv

    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

    0
    Comment actions Permalink
  • Avatar
    Paulo Vaz dos Santos

    Unfortunately I tried to submitt a video changing the extension from mp4 to jpg, but Cloudnary returns an error of invalid image format. 

    So how to get the thumbnail of the video via URL call?

    0
    Comment actions Permalink
  • Avatar
    Thomas Gurung

    Hi Paulo,

    Thanks for reaching out and sorry to hear you're having issues.

    Can you post the link you are testing with, please?

    Please let me know if you have any other questions or queries.

    Kind Regards,
    Thomas

    0
    Comment actions Permalink
  • Avatar
    Paulo Vaz dos Santos

    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

    0
    Comment actions Permalink
  • Avatar
    Stephen Doyle

    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.jpg

    https://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.jpg

    https://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

    0
    Comment actions Permalink

Please sign in to leave a comment.