Forum Academy Marketplace Showcase Pricing Features

Vimeo thumbnails

Hi all,

I’m developing an app that displays videos. I have 2 pages: a library that lists all the videos and then an individual page for each video (like youtube). On the library page I want to display the thumbnail of each video.

Is there any way to link to the thumbnail of the video? Or do I have to upload a separate image file?

Thanks,

Max

Hi @callie,

That depends on where your videos are being uploaded and transcoded (assuming you’re uploading your own videos and not pulling then in using an API).

If you’re using a service like Vimeo or Ziggeo then they’ll generate thumbnails for you when you upload a video, which you can access via a URI.

If you’re handling it all yourself using Amazon or something similar then you’ll probably have to either generate your own thumbnails or upload a separate image.

Thanks @adamhholmes! We host them from Vimeo. However, I’m unsure how to pull just the thumbnail from the URL?

You can access the video thumbnail image from Vimeo by doing the following:

  1. You need to find the thumbnail picture ID for the video, which you can find in the ‘pictures URI’ field of the ‘Get Video’ API call response (the URI contains the video ID and the thumbnail ID - the Thumbnail ID is the second number).

  2. You can access the thumbnail image at: https://i.vimeocdn.com/video/{thumbnail_ID}

In order to do that dynamically within your app you’ll need to extract the thumbnail ID from the pictures URI (using find and replace is the easiest way).

Then you can either display the thumbnail on a page dynamically straight from the API, or save it as an image in your database.