Erste Schritte
Kopiere einen Setup-Prompt mit den Installationsschritten und dem vollständigen Markdown-Guide für dieses Plugin.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-video-thumbnails`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/video-thumbnails/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
Installieren
Abschnitt „Installation“Du kannst unser KI-gestütztes Setup nutzen, um das Plugin zu installieren. Füge die Capgo Skills mit dem folgenden Befehl deinem KI-Tool hinzu:
bunx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsNutze dann diesen Prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-video-thumbnails` plugin in my project.Wenn du ein manuelles Setup bevorzugst, installiere das Plugin mit den folgenden Befehlen und befolge die plattformspezifischen Anweisungen unten:
bun add @capgo/capacitor-video-thumbnailsbunx cap syncImportieren
Abschnitt mit dem Titel „Import“import { CapgoVideoThumbnails } from '@capgo/capacitor-video-thumbnails';Quickstart
Abschnitt „Quick start“import { CapgoVideoThumbnails } from '@capgo/capacitor-video-thumbnails';
const result = await CapgoVideoThumbnails.getThumbnail({ sourceUri: 'file:///path/to/video.mp4', time: 5000, quality: 0.8});console.log('Thumbnail URI:', result.uri);console.log('Dimensions:', result.width, 'x', result.height);Häufige Stolperfallen
Abschnitt „Häufige Fallstricke“- Nativer Sync: ausführen
bunx cap syncnach Plugin-Upgrades. - Single Source of Truth: Vertrauen
src/definitions.tsim GitHub Repo.
API Übersicht
Abschnitt „API Übersicht“getThumbnail
Abschnitt „getThumbnail“Erstellt ein Thumbnail-Bild aus einer Videodatei an einer bestimmten Zeitposition.
import { CapgoVideoThumbnails } from '@capgo/capacitor-video-thumbnails';
const result = await CapgoVideoThumbnails.getThumbnail({ sourceUri: 'file:///path/to/video.mp4', time: 5000, quality: 0.8});console.log('Thumbnail URI:', result.uri);console.log('Dimensions:', result.width, 'x', result.height);Typreferenz
Abschnitt mit dem Titel „Typreferenz“VideoThumbnailsOptions
Abschnitt „VideoThumbnailsOptions“Optionen zur Erstellung eines Video-Thumbnails.
export interface VideoThumbnailsOptions { /** * 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. */ sourceUri: string;
/** * The time position in milliseconds from which to extract the thumbnail. * Defaults to 0 (first frame). */ time?: number;
/** * Quality of the generated image, from 0.0 (lowest) to 1.0 (highest). * Defaults to 1.0. */ quality?: number;
/** * HTTP headers to include when fetching remote video URIs. * Only applicable for remote URLs. */ headers?: Record<string, string>;}VideoThumbnailsResult
Abschnitt mit dem Titel „VideoThumbnailsResult“Ergebnis der Thumbnail-Generierung.
export interface VideoThumbnailsResult { /** * The local URI path to the generated thumbnail image. * This can be used directly in img tags or Image components. */ uri: string;
/** * Width of the generated thumbnail in pixels. */ width: number;
/** * Height of the generated thumbnail in pixels. */ height: number;}Source of Truth
Abschnitt mit dem Titel „Source of Truth“Diese Seite wird aus dem Plugin generiert src/definitions.ts. Führe den Sync erneut aus, wenn sich das öffentliche API upstream ändert.
Weiter geht's nach Getting Started
Abschnitt: „Weiter geht’s mit Getting Started“Wenn du es nutzt Erste Schritte , um natives Media- und Interface-Verhalten zu planen, verbinde es mit Verwendung von @capgo/capacitor-video-thumbnails für die native Funktion bei der Nutzung von @capgo/capacitor-video-thumbnails, @capgo/capacitor-live-activities verwenden für die native Funktion in „@capgo/capacitor-live-activities verwenden“, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities, Verwendung von @capgo/capacitor-video-player für die native Funktion in „@capgo/capacitor-video-player verwenden“, und @capgo/capacitor-video-player für das Implementierungsdetail in @capgo/capacitor-video-player.