@capgo/capacitor-video-thumbnails
June 16, 2026 · View on GitHub
Generate video thumbnails from local or remote video files.
Why Capacitor Video Thumbnails?
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.
Documentation
The most complete doc is available here: https://capgo.app/docs/plugins/video-thumbnails/
Compatibility
| 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.
Install
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-plugins
Then 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
Requirements
- iOS: iOS 15.0+
- Android: API 24+ (Android 7.0+)
- Web: Modern browsers with HTML5 video support
API
Capacitor Video Thumbnails Plugin interface for generating video thumbnails.
getThumbnail(...)
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()
getPluginVersion() => Promise<{ version: string; }>
Get the native Capacitor plugin version.
Returns: Promise<{ version: string; }>
Since: 8.0.0
Interfaces
VideoThumbnailsResult
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. |
VideoThumbnailsOptions
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. |
Type Aliases
Record
Construct a type with a set of properties K of type T
{
[P in K]: T;
}
Credits
This was inspired from (Expo SDK)[https://docs.expo.dev/versions/latest/sdk/video-thumbnails/]