Client-Side Video Media Thumbnails Generation

The Media Thumbnails Client Video module provides a way to generate thumbnails for video files directly in the user's browser using JavaScript. This bypasses the need for FFmpeg or other server-side video processing tools, such as Media Thumbnails Video uses.

Requirements

This module requires the following:

• Media Thumbnails module.

Installation

Install as you would normally install a contributed Drupal module. For further
information, see Installing Drupal Modules.

Configuration

There is no specific configuration for this module. Once enabled, it integrates
automatically with the Media Thumbnails system.

Usage

Automatic Thumbnail Generation

When a user uploads a video file through a Media entity form (e.g., creating a
Video media item), the module's JavaScript automatically attempts to extract a
frame at the 2-second mark of the video. This frame is sent to the server and
stored temporarily. When the Media entity is saved, the Media Thumbnails plugin
identifies this pre-generated frame and uses it as the entity's thumbnail.

Manual Regeneration

If the automatically generated thumbnail is not satisfactory, users can
manually regenerate it:

1. Navigate to the Media entity edit page.
2. Click on the "Regenerate Thumbnail" local task (tab).
3. Use the interactive video player to find the exact frame you want to use.
4. Click "Regenerate Thumbnail" to save the selected frame.

Video Poster Support

The module also implements preprocess hooks to automatically set the poster
attribute of <video> tags in Drupal, using the generated thumbnail image.

How it works

1. Browser-side: When a file is selected in an upload widget, JavaScript
   uses a hidden <video> and <canvas> element to capture a frame.
2. Transfer: The captured frame is sent via AJAX to a custom endpoint on the
   Drupal site.
3. Storage: The server saves the frame in public://client-video-thumbs.
4. Integration: The ClientVideoThumbnail plugin (part of the Media
   Thumbnails ecosystem) checks this directory when a thumbnail is requested for
   a new media item.

Troubleshooting

• CORS Issues: If your video files are hosted on a different domain (e.g.,
  a CDN or S3 bucket), you must ensure that the remote server sends appropriate
  CORS headers (specifically Access-Control-Allow-Origin), otherwise the
  browser will block the JavaScript from capturing frames.
• Browser Support: Most modern browsers supporting HTML5 Video and Canvas
  will work. Very old browsers may fall back to the default Media Thumbnails
  behavior (or no thumbnail if no other plugins are available).