Skip to main content

Video Player Capacitor plugin

Native video playback with subtitles, fullscreen, and comprehensive controls

Install

bun add @capgo/capacitor-video-player bunx cap sync
npm, pnpm or yarn
  • npm install @capgo/capacitor-video-player
  • pnpm add @capgo/capacitor-video-player
  • yarn add @capgo/capacitor-video-player

Guide

How to use Video Player in Capacitor

Test on device

Download the Capgo app, then scan the QR code.

Video Player plugin preview QR code

Using @capgo/capacitor-video-player

Capacitor plugin to play video in native player.

Install

bun add @capgo/capacitor-video-player
bunx cap sync

bunx cap sync copies the plugin's native code into your native projects. Run it again after every plugin upgrade.

Import

import { VideoPlayer } from '@capgo/capacitor-video-player';

API at a glance

Method Description
initPlayer Initialize a video player.
isPlaying Return if a given playerId is playing.
play Play the current video from a given playerId.
pause Pause the current video from a given playerId.
getDuration Get the duration of the current video from a given playerId.
getCurrentTime Get the current time of the current video from a given playerId.
setCurrentTime Set the current time to seek the current video to from a given playerId.
getVolume Get the volume of the current video from a given playerId.
setVolume Set the volume of the current video to from a given playerId.
getMuted Get the muted of the current video from a given playerId.
setMuted Set the muted of the current video to from a given playerId.
setRate Set the rate of the current video from a given playerId.
getRate Get the rate of the current video from a given playerId.
stopAllPlayers Stop all players playing.
showController Show controller.
isControllerIsFullyVisible isControllerIsFullyVisible.
exitPlayer Exit player.
hidePlayer Hide the currently presented player UI without stopping playback (native fullscreen).
showPlayer Show again a previously hidden player UI (native fullscreen).

Examples

initPlayer()

Initialize a video player.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.initPlayer({ mode: 'fullscreen' });
console.log(result);

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);

play()

Play the current video from a given playerId.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.play({ playerId: 'player-id-123' });
console.log(result);

pause()

Pause the current video from a given playerId.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.pause({ playerId: 'player-id-123' });
console.log(result);

getDuration()

Get the duration of the current video from a given playerId.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getDuration({ playerId: 'player-id-123' });
console.log(result);

getCurrentTime()

Get the current time of the current video from a given playerId.

import { VideoPlayer } from '@capgo/capacitor-video-player';

const result = await VideoPlayer.getCurrentTime({ playerId: 'player-id-123' });
console.log(result);

The table above lists the 19 core methods. Listener and version helpers, and the full contract of each method, are documented in the GitHub repository.

Full reference

Keep going from Using @capgo/capacitor-video-player

If you are using Using @capgo/capacitor-video-player to plan native media and interface behavior, connect it with @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, Getting Started for the implementation detail in Getting Started, Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.

FAQ

Video Player plugin FAQ

How do I install the Video Player plugin in a Capacitor app?

Run "bun add @capgo/capacitor-video-player" (or "npm install @capgo/capacitor-video-player"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-video-player" in your app code.

Does @capgo/capacitor-video-player work with React, Vue and Angular?

Yes. Video Player is a Capacitor package, so it works with any web framework that runs inside Capacitor, including Ionic, React, Vue, Angular, Svelte and plain JavaScript.

Which Capacitor version does @capgo/capacitor-video-player support?

Capgo plugins follow Capacitor's major version: use the plugin major version that matches your Capacitor major version (for example plugin v8 with Capacitor 8). The compatibility table in the GitHub README lists the maintained versions.

Is @capgo/capacitor-video-player free and open source?

Yes. The source code is public on GitHub at https://github.com/Cap-go/capacitor-video-player/ and the package is free to install from npm. Bug reports and pull requests are welcome.

Can I update code that uses Video Player without an App Store review?

Installing or upgrading the plugin changes native code, so it needs a new store build. After that, JavaScript, HTML and CSS changes that call the plugin can ship instantly with Capgo live updates.

Ship Video Player changes without waiting for app review

Once the plugin is in your store build, Capgo live updates push your JavaScript, HTML and CSS changes to users in minutes.

Start with Capgo