Capturing Poster and Thumbnail Images

In this topic you will learn how to capture poster and thumbnail images using the Media module.

Videos in your Beacon account have associated poster and thumbnail images. These images allow viewers to pick which videos they want to see in a playlist or other listing of your content. Poster and thumbnail images can be seen in the following areas:

  • In the Media module, the thumbnail image is displayed next to the video; the poster image will appear in the preview player on the video properties page
  • The thumbnail image will appear when publishing a playlist
  • The poster image is displayed in the playback area of the video player before or after video playback

For videos that are uploaded to Beacon, poster and thumbnail images are created automatically by taking a snapshot at the midway point. Beacon will try to capture the image from the highest quality, playable MP4 rendition. If there are no MP4 renditions, it will next try HLS renditions and then DASH renditions.

Client-side image capture takes a frame of the largest rendition the browser can play and sends it to the Beacon ingestion process with the poster and thumbnail dimensions specified in the default ingest profile. If those profile dimensions are larger than the frame we were able to capture, the image is not resized or scaled. If they are smaller, the image is scaled down. For information on increasing the quality of poster and thumbnail images, see Increasing the Quality of Poster and Thumbnail Images.

It is also possible to upload other images to use as the poster and thumbnail.

Requirements

The image capture functionality currently has the following requirements:

  • Chrome, Safari (version 10 and newer), Firefox and Edge browsers are supported
  • The video rendition must be served with CORS headers (which should be enabled on most of Brightcove's house CDNs by default); if you are using a BYO CDN, you should enable CORS headers on your server for image capture to work
  • Image capture should work on mobile devices when using the latest versions of Chrome and Firefox
  • Image capture is not supported for videos that have been secured using DRM
  • Image capture is not supported for restricted trial accounts; you can contact Brightcove to remove this restriction

If image capture is not available, the image capture button will usually be disabled.

Steps to capture new poster and thumbnail images

To capture a new poster or thumbnail image, follow these steps:

  1. Open the Media module.
  2. Click the link for the video you want to edit.
  3. Using the preview player at the top of the page, play the video and pause on the frame you would like to save as the poster/thumbnail image. You can also scrub across the player progress bar to jump to another frame.
  4. Click Capture.
  5. The preview player at the top of the page will display the current video frame. Use the checkboxes to select whether new Poster and/or Thumbnail images will be captured.
  6. Click Save to save the new images. It may take a minute for the processing to complete and for the images to appear in the Media module.

Limitations

  • The ingestion system does not allow concurrent jobs on the same video. Therefore, if you attempt to capture images while the video is being ingested or retranscoded, the image capture will fail.