Getting Started
Copy a setup prompt with the install steps and the full markdown guide for this 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.
Install
Section titled “Install”bun add @capgo/capacitor-video-playerbunx cap syncImport
Section titled “Import”import { VideoPlayer } from '@capgo/capacitor-video-player';API Overview
Section titled “API Overview”initPlayer
Section titled “initPlayer”Initialize a video player
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.initPlayer({} as capVideoPlayerOptions);isPlaying
Section titled “isPlaying”Return if a given playerId is playing
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isPlaying({} as capVideoPlayerIdOptions);Play the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.play({} as capVideoPlayerIdOptions);Pause the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.pause({} as capVideoPlayerIdOptions);getDuration
Section titled “getDuration”Get the duration of the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getDuration({} as capVideoPlayerIdOptions);getCurrentTime
Section titled “getCurrentTime”Get the current time of the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getCurrentTime({} as capVideoPlayerIdOptions);setCurrentTime
Section titled “setCurrentTime”Set the current time to seek the current video to from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setCurrentTime({} as capVideoTimeOptions);getVolume
Section titled “getVolume”Get the volume of the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getVolume({} as capVideoPlayerIdOptions);setVolume
Section titled “setVolume”Set the volume of the current video to from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setVolume({} as capVideoVolumeOptions);getMuted
Section titled “getMuted”Get the muted of the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getMuted({} as capVideoPlayerIdOptions);setMuted
Section titled “setMuted”Set the muted of the current video to from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setMuted({} as capVideoMutedOptions);setRate
Section titled “setRate”Set the rate of the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.setRate({} as capVideoRateOptions);getRate
Section titled “getRate”Get the rate of the current video from a given playerId
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.getRate({} as capVideoPlayerIdOptions);stopAllPlayers
Section titled “stopAllPlayers”Stop all players playing
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.stopAllPlayers();showController
Section titled “showController”Show controller
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.showController();isControllerIsFullyVisible
Section titled “isControllerIsFullyVisible”isControllerIsFullyVisible
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.isControllerIsFullyVisible();exitPlayer
Section titled “exitPlayer”Exit player
import { VideoPlayer } from '@capgo/capacitor-video-player';
await VideoPlayer.exitPlayer();Type Reference
Section titled “Type Reference”capVideoPlayerOptions
Section titled “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
Section titled “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
Section titled “capVideoPlayerIdOptions”export interface capVideoPlayerIdOptions { /** * Id of DIV Element parent of the player */ playerId?: string;}capVideoTimeOptions
Section titled “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
Section titled “capVideoVolumeOptions”export interface capVideoVolumeOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Volume value between [0 - 1] */ volume?: number;}capVideoMutedOptions
Section titled “capVideoMutedOptions”export interface capVideoMutedOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Muted value true or false */ muted?: boolean;}capVideoRateOptions
Section titled “capVideoRateOptions”export interface capVideoRateOptions { /** * Id of DIV Element parent of the player */ playerId?: string; /** * Rate value */ rate?: number;}SubTitleOptions
Section titled “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
Section titled “DrmOptions”export interface DrmOptions { /** * FairPlay DRM configuration (iOS) */ fairplay?: FairPlayDrmOptions; /** * PlayReady DRM configuration */ playready?: PlayreadyDrmOptions; /** * Widevine DRM configuration (Android) */ widevine?: WidevineDrmOptions;}FairPlayDrmOptions
Section titled “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
Section titled “PlayreadyDrmOptions”export interface PlayreadyDrmOptions { /** * The URL to fetch the PlayReady license */ certificateUrl?: string;}WidevineDrmOptions
Section titled “WidevineDrmOptions”export interface WidevineDrmOptions { /** * The URL to fetch the Widevine license */ certificateUrl?: string;}Source Of Truth
Section titled “Source Of Truth”This page is generated from the plugin’s src/definitions.ts. Re-run the sync when the public API changes upstream.