Getting Started
Copia una richiesta di configurazione con i passaggi di installazione e la guida markdown completa per questo 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.
Installare
Sezione intitolata “Installazione”Puoi utilizzare la nostra configurazione assistita dall'IA per installare il plugin. Aggiungi le Capgo abilità al tuo strumento di AI utilizzando il seguente comando:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsUsa poi il seguente prompt:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-video-player` plugin in my project.Se preferisci l'installazione manuale, installa il plugin eseguendo i seguenti comandi e segui le istruzioni specifiche per la piattaforma riportate di seguito.
bun add @capgo/capacitor-video-playerbunx cap syncImporta
Sezione intitolata “Importa”import { VideoPlayer } from '@capgo/capacitor-video-player';API Panoramica
Sezione intitolata “API Panoramica”initPlayer
Sezione intitolata “initPlayer”Inizializza un player video
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.initPlayer({ mode: 'fullscreen' });console.log(result);isPlaying
Sezione intitolata “isPlaying”Return if a given playerId is playing
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.isPlaying({ playerId: 'player-id-123' });console.log(result);Riproduci il video corrente da un playerId specificato
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.play({ playerId: 'player-id-123' });console.log(result);Pausa il video corrente da un playerId specificato
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.pause({ playerId: 'player-id-123' });console.log(result);getDuration
Sezione intitolata “getDuration”Otterra il durata del video corrente da un playerId specificato
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getDuration({ playerId: 'player-id-123' });console.log(result);getCurrentTime
Sottosezione intitolata “getCurrentTime”Ottieni l'ora corrente del video corrente da un playerId specifico
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getCurrentTime({ playerId: 'player-id-123' });console.log(result);setCurrentTime
Sottosezione intitolata “setCurrentTime”Imposta l'ora corrente per cercare il video corrente a partire da un playerId specifico
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.setCurrentTime({ playerId: 'player-id-123', seektime: 10,});console.log(result);getVolume
Sottosezione intitolata “getVolume”Ottieni il volume del video corrente da un playerId specifico
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getVolume({ playerId: 'player-id-123' });console.log(result);setVolume
Sottosezione intitolata “setVolume”Imposta il volume del video corrente a partire da un playerId specifico
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.setVolume({ volume: 0.5 });console.log(result);getMuted
Sezione intitolata “getMuted”Ottieni lo stato di silenzio del video corrente dal playerId specificato
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getMuted({ playerId: 'player-id-123' });console.log(result);setMuted
Sezione intitolata “setMuted”Imposta lo stato di silenzio del video corrente dal playerId specificato
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.setMuted({ muted: true });console.log(result);setRate
Sezione intitolata “setRate”Imposta il tasso di riproduzione del video corrente dal playerId specificato
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.setRate({ rate: 1 });console.log(result);getRate
Sezione intitolata “getRate”Ottieni il tasso di riproduzione del video corrente dal playerId specificato
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.getRate({ playerId: 'player-id-123' });console.log(result);stopAllPlayers
Sezione intitolata “stopAllPlayers”Stop tutti i giocatori in corso
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.stopAllPlayers();console.log(result);showController
Sezione intitolata “showController”Mostra il controller
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.showController();console.log(result);isControllerIsFullyVisible
Sezione intitolata “isControllerIsFullyVisible”isControllerIsFullyVisible
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.isControllerIsFullyVisible();console.log(result);exitPlayer
Sezione intitolata “exitPlayer”Esci dal giocatore
import { VideoPlayer } from '@capgo/capacitor-video-player';
const result = await VideoPlayer.exitPlayer();console.log(result);Riferimento di tipo
Sezione intitolata “Riferimento di tipo”capVideoPlayerOptions
Sezione intitolata “opzioni capVideoPlayer”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
Sezione intitolata “risultato capVideoPlayer”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
Sezione intitolata “opzioni capVideoPlayerId”export interface capVideoPlayerIdOptions { /** * Id of DIV Element parent of the player */ playerId?: string;}capVideoTimeOptions
Sezione intitolata “opzioni capVideoTime”export interface capVideoTimeOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Video time value you want to seek to */ seektime?: number;}capVideoVolumeOptions
Sezione intitolata “opzioni capVideoVolume”export interface capVideoVolumeOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Volume value between [0 - 1] */ volume?: number;}capVideoMutedOptions
Sezione intitolata “opzioni di video silenziate”export interface capVideoMutedOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Muted value true or false */ muted?: boolean;}capVideoRateOptions
Opzione di velocità del videoexport interface capVideoRateOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Rate value */ rate?: number;}SubTitleOptions
Sezione intitolata “Opzioni del sottotitolo”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
Sezione intitolata “Opzioni DRM”export interface DrmOptions { /** * FairPlay DRM configuration (iOS) */ fairplay?: FairPlayDrmOptions; /** * PlayReady DRM configuration */ playready?: PlayreadyDrmOptions; /** * Widevine DRM configuration (Android) */ widevine?: WidevineDrmOptions;}FairPlayDrmOptions
Sezione intitolata “Opzioni DRM di FairPlay”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
Sezione intitolata “Opzioni DRM di Playready”export interface PlayreadyDrmOptions { /** * The URL to fetch the PlayReady license */ certificateUrl?: string;}WidevineDrmOptions
Sottosezione intitolata “WidevineDrmOptions”export interface WidevineDrmOptions { /** * The URL to fetch the Widevine license */ certificateUrl?: string;}Fonte di Verità
Sottosezione intitolata “Fonte di Verità”Questa pagina è generata dal plugin’s src/definitions.tsRieccere lo sync quando il pubblico API cambia in alto flusso.
Continua da qui: Getting Started
Sottosezione intitolata “Continua da qui: Getting Started”Se stai utilizzando Getting Started per pianificare il comportamento dei media nativi e dell'interfaccia, connettilo con Utilizzare @capgo/capacitor-player-video per la capacità nativa in Utilizzare @capgo/capacitor-player-video Utilizzare @capgo/capacitor-attività-vive per la capacità nativa in Utilizzare @capgo/capacitor-attività-vive @capgo/capacitor-attività-vive per il dettaglio di implementazione in @capgo/capacitor-attività-vive @capgo/capacitor-player-video per il dettaglio di implementazione in @capgo/capacitor-player-video, e Utilizzare @capgo/capacitor-navigazione-nativa per la capacità nativa in Utilizzare @capgo/capacitor-navigazione-nativa.