Getting Started
Copiar un prompt de configuración con los pasos de instalación y la guía de markdown completa para este 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.
Instalar
Sección titulada “Instalar”Puede utilizar nuestra configuración asistida por IA para instalar el plugin. Agregue las Capgo habilidades a su herramienta de IA utilizando el siguiente comando:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsLuego utilice la siguiente solicitud:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-video-player` plugin in my project.Si prefieres la configuración manual, instala el plugin ejecutando los siguientes comandos y sigue las instrucciones específicas de la plataforma a continuación:
bun add @capgo/capacitor-video-playerbunx cap syncImportar
Sección titulada “Importar”import { VideoPlayer } from '@capgo/capacitor-video-player';API Resumen
Sección titulada “API Resumen”initPlayer
Sección titulada “initPlayer”Iniciar un reproductor de video
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.initPlayer({} as capVideoPlayerOptions);isPlaying
Sección titulada “isPlaying”Devuelve si un jugador con el id dado está jugando
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isPlaying({} as capVideoPlayerIdOptions);Reproducir el video actual desde un jugador con el id dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.play({} as capVideoPlayerIdOptions);Pausar el video actual desde un jugador con el id dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.pause({} as capVideoPlayerIdOptions);getDuration
Sección titulada “getDuration”Obtener la duración del video actual desde un jugador con el id dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getDuration({} as capVideoPlayerIdOptions);getCurrentTime
Sección titulada “getCurrentTime”Obtenga la hora actual del video actual desde un jugador de playerId dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getCurrentTime({} as capVideoPlayerIdOptions);setCurrentTime
Sección titulada “setCurrentTime”Establezca la hora actual para buscar el video actual desde un jugador de playerId dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setCurrentTime({} as capVideoTimeOptions);getVolume
Sección titulada “getVolume”Obtenga el volumen del video actual desde un jugador de playerId dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getVolume({} as capVideoPlayerIdOptions);setVolume
Sección titulada “setVolume”Establezca el volumen del video actual para desde un jugador de playerId dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setVolume({} as capVideoVolumeOptions);getMuted
Sección titulada “getMuted”Obtenga el silenciado del video actual de un jugador dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getMuted({} as capVideoPlayerIdOptions);setMuted
Sección titulada “setMuted”Establezca el silenciado del video actual a partir de un jugador dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setMuted({} as capVideoMutedOptions);setRate
Sección titulada “setRate”Establezca la velocidad del video actual a partir de un jugador dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setRate({} as capVideoRateOptions);getRate
Sección titulada “getRate”Obtenga la velocidad del video actual a partir de un jugador dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getRate({} as capVideoPlayerIdOptions);stopAllPlayers
Sección titulada “stopAllPlayers”Detener todos los jugadores que están jugando
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.stopAllPlayers();showController
Sección titulada “showController”Mostrar controlador
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.showController();isControllerIsFullyVisible
Sección titulada “isControllerIsFullyVisible”isControllerIsFullyVisible
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isControllerIsFullyVisible();exitPlayer
Sección titulada “exitPlayer”Salir del jugador
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.exitPlayer();Referencia de tipo
Sección titulada “Referencia de tipos”capVideoPlayerOptions
Sección titulada “opciones de 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
Sección titulada “resultado de 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
Sección titulada “opciones de ID de capVideoPlayer”export interface capVideoPlayerIdOptions { /** * Id of DIV Element parent of the player */ playerId?: string;}capVideoTimeOptions
Sección titulada “opciones de tiempo de capVideo”export interface capVideoTimeOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Video time value you want to seek to */ seektime?: number;}capVideoVolumeOptions
Sección titulada “opciones de volumen de capVideo”export interface capVideoVolumeOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Volume value between [0 - 1] */ volume?: number;}capVideoMutedOptions
Sección titulada “opciones de silenciado de capVideo”export interface capVideoMutedOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Muted value true or false */ muted?: boolean;}capVideoRateOptions
Sección titulada “opciones de velocidad de video cap”export interface capVideoRateOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Rate value */ rate?: number;}SubTitleOptions
Sección titulada “opciones de subtítulo”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
Sección titulada “opciones de DRM”export interface DrmOptions { /** * FairPlay DRM configuration (iOS) */ fairplay?: FairPlayDrmOptions; /** * PlayReady DRM configuration */ playready?: PlayreadyDrmOptions; /** * Widevine DRM configuration (Android) */ widevine?: WidevineDrmOptions;}FairPlayDrmOptions
Sección titulada “opciones de DRM de 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
Sección titulada “opciones de DRM de Playready”export interface PlayreadyDrmOptions { /** * The URL to fetch the PlayReady license */ certificateUrl?: string;}WidevineDrmOptions
Sección titulada “opciones de DRM de Widevine”export interface WidevineDrmOptions { /** * The URL to fetch the Widevine license */ certificateUrl?: string;}Fuente de Verdad
Sección titulada “Fuente de Verdad”Esta página se genera a partir del plugin’s src/definitions.tsRe-ejecutar la sincronización cuando los archivos públicos API cambian en la fuente.
Sigue adelante desde Getting Started
Sección titulada “Sigue adelante desde Getting Started”Si estás utilizando Getting Started para planificar el comportamiento de medios y interfaz nativa, conecta con Usando @capgo/capacitor-video-player para la capacidad nativa en Usando @capgo/capacitor-video-player, Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo, @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo, @capgo/capacitor-reproductor-de-videos para el detalle de implementación en @capgo/capacitor-reproductor-de-videos, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.