@capgo/capacitor-video-player

v8.1.13

Published

7 days ago

Capacitor plugin to play video in native player

0High
0Medium
0Low

riderx

capacitor plugin native video player

@capgo/capacitor-video-player

Documentation

The most complete doc is available here: https://capgo.app/docs/plugins/video-player/

Compatibility

| Plugin version | Capacitor compatibility | Maintained | | -------------- | ----------------------- | ---------- | | v8.*.* | v8.*.* | ✅ | | v7.*.* | v7.*.* | On demand | | v6.*.* | v6.*.* | ❌ | | v5.*.* | v5.*.* | ❌ |

Note: The major version of this plugin follows the major version of Capacitor. Use the version that matches your Capacitor installation (e.g., plugin v8 for Capacitor 8). Only the latest major version is actively maintained.

Install

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

iOS Chromecast setup

iOS Chromecast uses the Google Cast SDK default media receiver. When chromecast is enabled, the plugin adds a Cast button over the fullscreen iOS player, loads the current media on the selected receiver, and keeps plugin play/pause/seek/volume calls pointed at the active Cast session.

For Cast discovery on iOS, add local network keys to your app Info.plist.

<key>NSBonjourServices</key>
<array>
  <string>_googlecast._tcp</string>
  <string>_CC1AD845._googlecast._tcp</string>
</array>
<key>NSLocalNetworkUsageDescription</key>
<string>$(PRODUCT_NAME) uses the local network to discover Cast-enabled devices on your WiFi network.</string>

await VideoPlayer.initPlayer({
  playerId: 'fullscreen',
  mode: 'fullscreen',
  url: 'https://example.com/video.mp4',
  title: 'Video title',
  smallTitle: 'Video subtitle',
  artwork: 'https://example.com/poster.jpg',
  chromecast: true,
});

Supported Features

| Feature | iOS | Android | Web | | ------------------------------ | --- | ------- | --- | | Fullscreen native video player | ✅ | ✅ | ❌ | | Embedded web video player | ❌ | ❌ | ✅ | | Picture in Picture | ✅ | ✅ | ❌ | | Subtitles | ✅ | ✅ | ✅ | | DRM-protected playback | ✅ | ✅ | ❌ | | Chromecast sender playback | ❌ | ✅ | ❌ |

Chromecast (Android)

Chromecast is supported on Android in fullscreen mode. Enable it with the chromecast option. When a Cast session starts, the plugin loads the same media URL on the receiver, keeps the current playback position, and routes play, pause, seek, and timeline controls through the Cast session.

await VideoPlayer.initPlayer({
  mode: 'fullscreen',
  playerId: 'main-player',
  url: 'https://example.com/video.m3u8',
  title: 'Video title',
  smallTitle: 'Optional subtitle',
  artwork: 'https://example.com/artwork.jpg',
  chromecast: true,
  showControls: true,
});

Chromecast Options

| Option | Type | Default | Description | | ------------ | --------- | ------- | ---------------------------------------------------------- | | chromecast | boolean | true | Shows the Android Cast button and enables sender playback. | | title | string | "" | Title shown in the sender controls and receiver metadata. | | smallTitle | string | "" | Subtitle shown in the sender controls and metadata. | | artwork | string | "" | Image URL used for Cast metadata and sender Cast artwork. |

Requirements and Notes

The media URL must be reachable by the Chromecast device, not only by the Android app.
Cast support depends on the receiver app and device media support. MP4, HLS, DASH, and SmoothStreaming streams are mapped to Cast-compatible MIME types by the plugin.
Widevine DRM metadata is forwarded to the Cast media item. DRM-protected streams may still require a receiver that supports your license server and DRM flow.
Request headers used by the Android local player are not automatically available to the Chromecast receiver. Use public URLs, signed URLs, cookies supported by your receiver, or a custom receiver for secured media.

API

initPlayer(...)

initPlayer(options: capVideoPlayerOptions) => Promise<capVideoPlayerResult>

Initialize a video player

| Param | Type | | ------------- | ----------------------------------------------------------------------- | | options | capVideoPlayerOptions |