Contributing

If you wish to contribute to the plugin, please ensure you read the CONTRIBUTING.md guide first.

It contains critical information about our Pull Request structure (Conventional Commits), PR preview environments (pkg.pr.new), and automated release management.

Maintainers

| Maintainer | GitHub | Social | Active | | ------------ | ----------------------------------------------- | ------ | ------ | | Chris Clarke | chrismclarke | | ✅ |

LATEST FOR CAPACITOR 7

Browser Support

The plugin follows the guidelines from the Capacitor Team,

• Capacitor Browser Support

meaning that it will not work in IE11 without additional JavaScript transformations, e.g. with Babel.

Installation

Capacitor 7 (this package)

npm install @picsa/capacitor-video-player
npx cap sync

Or as a drop-in replacement from the original project:

"capacitor-video-player": "npm:@picsa/capacitor-video-player@^7"

Capacitor 6 and below

Use the original capacitor-video-player package:

npm install --save capacitor-video-player
npx cap sync

Note: If migrating from the original package, simply update your package.json:

// Before (Capacitor 6):
"capacitor-video-player": "6.0.2"

// After (Capacitor 7):
"capacitor-video-player": "npm:@picsa/capacitor-video-player@^7"

Build

Then build YOUR_APPLICATION

npm run build
npx cap copy
npx cap copy web
npx cap copy @capacitor-community/electron
npx cap open android
npx cap open ios
npx cap open @capacitor-community/electron
npx cap serve

Configuration

No configuration required for this plugin

Supported methods

| Name | Android | iOS | Electron | Web | | :--------------------------------- | :------ | :-- | :------- | :-- | | initPlayer (mode fullscreen) | ✅ | ✅ | ✅ | ✅ | | initPlayer (mode embedded) | ❌ | ❌ | ✅ | ✅ | | initPlayer (url assets) | ✅ | ✅ | ✅ | ✅ | | initPlayer (url internal) | ✅ | ✅ | ❌ | ❌ | | initPlayer (url application/files) | ✅ | ✅ | ❌ | ❌ | | initPlayer (subtitles) | ✅ | ✅ | ❌ | ❌ | | initPlayer (headers) | ✅ | ✅ | ❌ | ❌ | | initPlayer (title) | ✅ | ✅ | ❌ | ❌ | | initPlayer (smallTitle) | ✅ | ✅ | ❌ | ❌ | | initPlayer (accentColor) | ✅ | ❌ | ❌ | ❌ | | initPlayer (chromecast) | ✅ | ❌ | ❌ | ❌ | | initPlayer (artwork) | ✅ | ✅ | ❌ | ❌ | | isPlaying | ✅ | ✅ | ✅ | ✅ | | play | ✅ | ✅ | ✅ | ✅ | | pause | ✅ | ✅ | ✅ | ✅ | | getCurrentTime | ✅ | ✅ | ✅ | ✅ | | setCurrentTime | ✅ | ✅ | ✅ | ✅ | | getDuration | ✅ | ✅ | ✅ | ✅ | | getMuted | ✅ | ✅ | ✅ | ✅ | | setMuted | ✅ | ✅ | ✅ | ✅ | | getVolume | ✅ | ✅ | ✅ | ✅ | | setVolume | ✅ | ✅ | ✅ | ✅ | | stopAllPlayers | ✅ | ✅ | ✅ | ✅ | | getRate | ✅ | ✅ | ✅ | ✅ | | setRate | ✅ | ✅ | ✅ | ✅ | | showController | ✅ | ❌ | ❌ | ❌ | | isControllerIsFullyVisible | ✅ | ❌ | ❌ | ❌ | | exitPlayer | ✅ | ❌ | ❌ | ❌ |

Supported listeners

| Name | Android | iOS | Electron | Web | | :---------------------- | :------ | :-- | :------- | :-- | | jeepCapVideoPlayerReady | ✅ | ✅ | ✅ | ✅ | | jeepCapVideoPlayerPlay | ✅ | ✅ | ✅ | ✅ | | jeepCapVideoPlayerPause | ✅ | ✅ | ✅ | ✅ | | jeepCapVideoPlayerEnded | ✅ | ✅ | ✅ | ✅ | | jeepCapVideoPlayerExit | ✅ | ✅ | ✅ | ✅ |

Dependencies

• hls.js - HLS video playback on Web and Electron platforms
• ExoPlayer (Media3) - HLS, DASH, and SmoothStreaming on Android platform

Legacy Docs

Documentation

API_Documentation

Tutorials Blog

• JeepQ Capacitor Plugin Tutorials

Applications demonstrating the use of the plugin

Capacitor 5 Apps

• ionic7-angular-videoplayer-app

• vant-nuxt-videoplayer-app

Application Starter (Not yet updated to 5.0.0)

• angular-video-player-app-starter

• react-video-player-app-starter

• vite-react-videoplayer-app

• vue-videoplayer-app

Usage 2.4.7

• see capacitor documentation

• see usage 2.4.7

Usage > 3.0.0

• see capacitor documentation

• see usage > 3.0.0

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!