Client-Side Video Media Thumbnails Generation

Client-Side Video Media Thumbnails Generation creates thumbnails for video media from a frame captured in the editor's browser, so the server needs no FFmpeg or other video tool. It is a plugin for Media Thumbnails.

Features

• Automatic thumbnails. When an editor chooses a video file on a media form or in the media library, the browser draws the frame at two seconds (halfway through shorter videos) and sends it to the site as a JPEG. Saving the media item makes that frame its thumbnail.
• Pick any frame. A Regenerate Thumbnail tab on video media plays the video so an editor can pause on the frame they want and set its alt text and title. Each frame is saved as a new file.
• Thumbnails are kept. Saving a media item again keeps its thumbnail. Replacing the video file uses a frame of the new file.
• Video posters. Video players for the media item show the thumbnail before they start.
• Handles MP4, WebM, Ogg and QuickTime files, such as core's Video media type. The server only stores the JPEG; it never opens the video.
• Frames wait for their media item in each user's own directory in the private file system, and frames of private videos become private thumbnails.

Requirements

• Drupal 10.3 or later, or Drupal 11.
• Core Media and Media Thumbnails.
• Editors' browsers must be able to play the video format.
• A private file system is recommended, and needed on sites with more than one web server.

Installation and use

1. Install the module as usual: composer require drupal/media_thumbnails_client_video, then drush en media_thumbnails_client_video.
2. Editors need permission to create or edit media, which they already need to add videos. The Regenerate Thumbnail tab needs permission to edit the media item.
3. Add a video media item. The captured frame becomes its thumbnail when you save.
4. To use another frame, open the item's Regenerate Thumbnail tab, pause on the frame and click Regenerate Thumbnail.

Troubleshooting

• If videos are served from another domain, such as a CDN or S3 bucket, that server must send an Access-Control-Allow-Origin header for the site, or the browser will not let the page read the frame.
• Media Thumbnails uses one plugin per file type, so install either this module or Media Thumbnails Video, not both.

Documentation

See the Media Thumbnails Client Video documentation for configuration, troubleshooting, upgrading from 1.0.0 and the API for custom code.