Inicio
Copie 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”Puedes utilizar nuestra configuración asistida por IA para instalar el plugin. Agrega las Capgo habilidades a tu herramienta de IA utilizando el siguiente comando:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-pluginsLuego utiliza el siguiente prompt:
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 complemento 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 playerId dado está jugando
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isPlaying({} as capVideoPlayerIdOptions);Reproduce el video actual desde un jugador con playerId dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.play({} as capVideoPlayerIdOptions);Pausa el video actual desde un jugador con playerId dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.pause({} as capVideoPlayerIdOptions);getDuration
Sección titulada “getDuration”Obtén la duración del video actual desde un jugador con playerId dado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getDuration({} as capVideoPlayerIdOptions);getCurrentTime
Sección titulada “getCurrentTime”Obtenga el tiempo actual del video actual desde un jugador de playerId determinado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getCurrentTime({} as capVideoPlayerIdOptions);setCurrentTime
Sección titulada “setCurrentTime”Establezca el tiempo actual para buscar el video actual a partir de un jugador de playerId determinado
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 determinado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getVolume({} as capVideoPlayerIdOptions);setVolume
Sección titulada “setVolume”Establezca el volumen del video actual a partir de un jugador de playerId determinado
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setVolume({} as capVideoVolumeOptions);getMuted
Sección titulada “getMuted”Obtenga el estado de silencio del video actual desde un jugador de playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getMuted({} as capVideoPlayerIdOptions);setMuted
Sección titulada “setMuted”Establezca el estado de silencio del video actual a partir de un jugador de playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setMuted({} as capVideoMutedOptions);setRate
Sección titulada “setRate”Establezca la velocidad del video actual desde un jugador de playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setRate({} as capVideoRateOptions);getRate
Sección titulada “getRate”Obtenga la velocidad del video actual desde un jugador de playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getRate({} as capVideoPlayerIdOptions);stopAllPlayers
Sección titulada “stopAllPlayers”Detener a 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 tipos
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
Opciones de silencio de video de Capgoexport interface capVideoMutedOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Muted value true or false */ muted?: boolean;}capVideoRateOptions
Opciones de velocidad de video de Capgoexport interface capVideoRateOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Rate value */ rate?: number;}SubTitleOptions
Opciones de subtítulo de Capgoexport 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
Opciones de DRM de Capgoexport interface DrmOptions { /** * FairPlay DRM configuration (iOS) */ fairplay?: FairPlayDrmOptions; /** * PlayReady DRM configuration */ playready?: PlayreadyDrmOptions; /** * Widevine DRM configuration (Android) */ widevine?: WidevineDrmOptions;}FairPlayDrmOptions
Opciones de DRM de FairPlay de Capgoexport 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
Opciones de DRM de Playready de Capgoexport interface PlayreadyDrmOptions { /** * The URL to fetch the PlayReady license */ certificateUrl?: string;}WidevineDrmOptions
Sección titulada “WidevineDrmOptions”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.ts. Vuelve a ejecutar la sincronización cuando el público API cambie 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 nativos e interfaces, conecta con Usando @capgo/capacitor-video-player para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos, 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.