Getting Started
Kopieren Sie einen Setup-Vorschlag mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen 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-player`
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-player/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 mit dem Titel „Installieren“Sie können unsere KI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrem KI-Tool hinzu, indem Sie den folgenden Befehl ausführen:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsVerwenden Sie dann den folgenden Prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-video-player` plugin in my project.Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die Plattform-spezifischen Anweisungen unten befolgen:
bun add @capgo/capacitor-video-playerbunx cap syncImportieren
Abschnitt mit Titel „Importieren“import { VideoPlayer } from '@capgo/capacitor-video-player';API Übersicht
Abschnitt mit Titel „API Übersicht“initPlayer
Abschnitt mit Titel „initPlayer“Ein Video-Player initialisieren
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.initPlayer({ mode: 'fullscreen' });console.log(result);Überprüfen, ob ein bestimmter SpielerId abgespielt wird
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.isPlaying({ playerId: 'player-id-123' });console.log(result);Spielen Sie das aktuelle Video mit einem bestimmten SpielerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.play({ playerId: 'player-id-123' });console.log(result);Pausieren Sie das aktuelle Video vom angegebenen SpielerId.
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.pause({ playerId: 'player-id-123' });console.log(result);getDuration
Abschnitt mit Titel “Video-Länge ermitteln”Ermitteln Sie die Länge des aktuellen Videos unter Verwendung eines gegebenen Spieler-Id
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getDuration({ playerId: 'player-id-123' });console.log(result);getCurrentTime
Abschnitt mit Titel “aktuelle Zeit ermitteln”Ermitteln Sie die aktuelle Zeit des aktuellen Videos mit der angegebenen playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getCurrentTime({ playerId: 'player-id-123' });console.log(result);setCurrentTime
Abschnitt mit dem Titel “setCurrentTime”Setze die aktuelle Zeit, um die aktuelle Video zu suchen, von einem gegebenen Spieler-Id
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.setCurrentTime({ playerId: 'player-id-123', seektime: 10,});console.log(result);getVolume
Abschnitt mit dem Titel “getVolume”Ermittle den Lautstärke des aktuellen Videos von einer gegebenen Spieler-Id
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getVolume({ playerId: 'player-id-123' });console.log(result);setVolume
Abschnitt mit dem Titel “setVolume”Setze die Lautstärke des aktuellen Videos zu von einer gegebenen Spieler-Id
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.setVolume({ volume: 0.5 });console.log(result);Ermittle die Mute-Einstellung des aktuellen Videos von einer gegebenen Spieler-Id
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getMuted({ playerId: 'player-id-123' });console.log(result);Setzen Sie den Ton des aktuellen Videos von einem gegebenen SpielerID
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.setMuted({ muted: true });console.log(result);Setzen Sie die Geschwindigkeit des aktuellen Videos von einer gegebenen SpielerID
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.setRate({ rate: 1 });console.log(result);Get the rate of the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getRate({ playerId: 'player-id-123' });console.log(result);stopAllPlayers
Abschnitt mit dem Titel “stopAllPlayers”Beenden Sie alle laufenden Spieler
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.stopAllPlayers();console.log(result);showController
Abschnitt mit dem Titel “showController”Controller anzeigen
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.showController();console.log(result);isControllerIsFullyVisible
Abschnitt mit dem Titel “isControllerIsFullyVisible”istControllerVollständigSichtbar
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.isControllerIsFullyVisible();console.log(result);exitPlayer
Abschnitt mit dem Titel “exitPlayer”Spieler beenden
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.exitPlayer();console.log(result);Typenreferenz
Abschnitt mit dem Titel “Typenreferenz”capVideoPlayerOptions
Abschnitt mit dem Titel “capVideoPlayerOptions”export interface capVideoPlayerOptions { /** * Player mode * - "fullscreen" * - "embedded" (Web only) */ mode?: string; /** * The url of the video to play */ url?: string; /** * The url of subtitle associated with the video */ subtitle?: string; /** * The language of subtitle * see https://github.com/libyal/libfwnt/wiki/Language-Code-identifiers */ language?: string; /** * SubTitle Options */ subtitleOptions?: SubTitleOptions; /** * Id of DIV Element parent of the player */ playerId?: string; /** * Initial playing rate */ rate?: number; /** * Exit on VideoEnd (iOS, Android) * default: true */ exitOnEnd?: boolean; /** * Loop on VideoEnd when exitOnEnd false (iOS, Android) * default: false */ loopOnEnd?: boolean; /** * Picture in Picture Enable (iOS, Android) * default: true */ pipEnabled?: boolean; /** * Background Mode Enable (iOS, Android) * default: true */ bkmodeEnabled?: boolean; /** * Show Controls Enable (iOS, Android) * default: true */ showControls?: boolean; /** * Display Mode ["all", "portrait", "landscape"] (iOS, Android) * default: "all" */ displayMode?: string; /** * Component Tag or DOM Element Tag (React app) */ componentTag?: string; /** * Player Width (mode "embedded" only) */ width?: number; /** * Player height (mode "embedded" only) */ height?: number; /** * Headers for the request (iOS, Android) * by Manuel García Marín (https://github.com/PhantomPainX) */ headers?: { [key: string]: string; }; /** * Title shown in the player (Android) * by Manuel García Marín (https://github.com/PhantomPainX) */ title?: string; /** * Subtitle shown below the title in the player (Android) * by Manuel García Marín (https://github.com/PhantomPainX) */ smallTitle?: string; /** * ExoPlayer Progress Bar and Spinner color (Android) * by Manuel García Marín (https://github.com/PhantomPainX) * Must be a valid hex color code * default: #FFFFFF */ accentColor?: string; /** * Chromecast enable/disable (Android) * by Manuel García Marín (https://github.com/PhantomPainX) * default: true */ chromecast?: boolean; /** * Artwork url to be shown in Chromecast player * by Manuel García Marín (https://github.com/PhantomPainX) * default: "" */ artwork?: string; /** * DRM configuration for protected content (iOS: FairPlay, Android: Widevine) */ drm?: DrmOptions;}capVideoPlayerResult
Abschnitt mit dem Titel “capVideoPlayerResult”export interface capVideoPlayerResult { /** * result set to true when successful else false */ result?: boolean; /** * method name */ method?: string; /** * value returned */ value?: any; /** * message string */ message?: string;}capVideoPlayerIdOptions
Abschnitt mit dem Titel “capVideoPlayerIdOptions”export interface capVideoPlayerIdOptions { /** * Id of DIV Element parent of the player */ playerId?: string;}capVideoTimeOptions
Abschnitt mit dem Titel “capVideoTimeOptions”export interface capVideoTimeOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Video time value you want to seek to */ seektime?: number;}capVideoVolumeOptions
Abschnitt mit dem Titel “capVideoVolumeOptions”export interface capVideoVolumeOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Volume value between [0 - 1] */ volume?: number;}capVideoMutedOptions
Abschnitt mit dem Titel “capVideoMutedOptions”export interface capVideoMutedOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Muted value true or false */ muted?: boolean;}capVideoRateOptions
Abschnitt mit dem Titel “capVideoRateOptions”export interface capVideoRateOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Rate value */ rate?: number;}SubTitleOptions
Abschnitt mit dem Titel „SubTitleOptions“export interface SubTitleOptions { /** * Foreground Color in RGBA (default rgba(255,255,255,1) */ foregroundColor?: string; /** * Background Color in RGBA (default rgba(0,0,0,1) */ backgroundColor?: string; /** * Font Size in pixels (default 16) */ fontSize?: number;
/** * Get the native Capacitor plugin version * * @returns {Promise<{ id: string }>} an Promise with version for this device * @throws An error if the something went wrong */ getPluginVersion(): Promise<{ version: string }>;}DrmOptions
Abschnitt mit dem Titel „DrmOptions“export interface DrmOptions { /** * FairPlay DRM configuration (iOS) */ fairplay?: FairPlayDrmOptions; /** * PlayReady DRM configuration */ playready?: PlayreadyDrmOptions; /** * Widevine DRM configuration (Android) */ widevine?: WidevineDrmOptions;}FairPlayDrmOptions
Abschnitt mit dem Titel „FairPlayDrmOptions“export interface FairPlayDrmOptions { /** * The URL to fetch the FairPlay certificate */ certificateUrl?: string; /** * The URL to send the SPC and receive the CKC license (FairPlay license server URL) */ contentKeySpcUrl?: string;}PlayreadyDrmOptions
Abschnitt mit dem Titel „PlayreadyDrmOptions“export interface PlayreadyDrmOptions { /** * The URL to fetch the PlayReady license */ certificateUrl?: string;}WidevineDrmOptions
Abschnitt mit dem Titel „WidevineDrmOptions“export interface WidevineDrmOptions { /** * The URL to fetch the Widevine license */ certificateUrl?: string;}Quelle der Wahrheit
Abschnitt mit dem Titel “Quelle der Wahrheit”Diese Seite wird aus dem Plugin generiert. src/definitions.tsRe-run die Synchronisierung, wenn die öffentliche API upstream geändert wird.
Weiter geht es von Getting Started
Abschnitt mit dem Titel “Weiter geht es von Getting Started”Wenn Sie Capgo verwenden Getting Started für die native Fähigkeit in Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-video-player Verwendung von @capgo/capacitor-Video-Player für die native Fähigkeit in Using @capgo/capacitor-live-activities Verwendung von @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Using @capgo/capacitor-video-player @capgo/capacitor-live-aktivitäten für die Implementierungsdetails in @capgo/capacitor-live-aktivitäten @capgo/capacitor-Video-Player für die Implementierungsdetails in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigationsfunktionen für die native Fähigkeit in Mit @capgo/capacitor-native-navigationsfunktionen.