Generate video thumbnails from local or remote video files.
Extract thumbnail images from videos at specific time positions:
- Local & Remote Videos - Works with both file:// paths and http(s):// URLs
- Custom Time Position - Extract frame at any millisecond timestamp
- Quality Control - Adjustable JPEG compression quality
- HTTP Headers Support - Custom headers for authenticated video sources
- Cross-platform - Consistent API across iOS, Android, and Web
Perfect for video galleries, media players, video editors, and any app that needs video preview images.
The most complete doc is available here: https://capgo.app/docs/plugins/video-thumbnails/
| Plugin version | Capacitor compatibility | Maintained |
|---|---|---|
| v8.*.* | v8.*.* | ✅ |
| v7.*.* | v7.*.* | On demand |
| v6.*.* | v6.*.* | ❌ |
| v5.*.* | v5.*.* | ❌ |
Note: The major version of this plugin follows the major version of Capacitor. Use the version that matches your Capacitor installation (e.g., plugin v8 for Capacitor 8). Only the latest major version is actively maintained.
You can use our AI-Assisted Setup to install the plugin. Add the Capgo skills to your AI tool using the following command:
npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-pluginsThen use the following prompt:
Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-video-thumbnails` plugin in my project.
If you prefer Manual Setup, install the plugin by running the following commands and follow the platform-specific instructions below:
npm install @capgo/capacitor-video-thumbnails
npx cap sync- iOS: iOS 15.0+
- Android: API 24+ (Android 7.0+)
- Web: Modern browsers with HTML5 video support
Capacitor Video Thumbnails Plugin interface for generating video thumbnails.
getThumbnail(options: VideoThumbnailsOptions) => Promise<VideoThumbnailsResult>Generate a thumbnail image from a video file at a specific time position.
| Param | Type | Description |
|---|---|---|
options |
VideoThumbnailsOptions |
- Options for generating the thumbnail |
Returns: Promise<VideoThumbnailsResult>
Since: 8.0.0
getPluginVersion() => Promise<{ version: string; }>Get the native Capacitor plugin version.
Returns: Promise<{ version: string; }>
Since: 8.0.0
Result of thumbnail generation.
| Prop | Type | Description |
|---|---|---|
uri |
string |
The local URI path to the generated thumbnail image. This can be used directly in img tags or Image components. |
width |
number |
Width of the generated thumbnail in pixels. |
height |
number |
Height of the generated thumbnail in pixels. |
Options for generating a video thumbnail.
| Prop | Type | Description |
|---|---|---|
sourceUri |
string |
The URI of the video file. Can be a local file path or a remote URL. For local files, use file:// protocol or absolute path. For remote files, use http:// or https:// protocol. |
time |
number |
The time position in milliseconds from which to extract the thumbnail. Defaults to 0 (first frame). |
quality |
number |
Quality of the generated image, from 0.0 (lowest) to 1.0 (highest). Defaults to 1.0. |
headers |
Record<string, string> |
HTTP headers to include when fetching remote video URIs. Only applicable for remote URLs. |
Construct a type with a set of properties K of type T
{
[P in K]: T;
}
This was inspired from (Expo SDK)[https://docs.expo.dev/versions/latest/sdk/video-thumbnails/]