KANekT/capacitor-video-player

Video Player

capacitor-video-player

CAPACITOR 4

Capacitor Video Player Plugin is a custom Native Capacitor plugin to play a video
fullscreen on IOS, Android, Web and Electron platforms
embedded on Web and Electron platforms

Maintainers

Maintainer	GitHub	Social
Quéau Jean Pierre	jepiqueau

LATEST FOR CAPACITOR 4 (Master)

WARNING do not use the 4.0.1 there is a bug with permissions the normal videos not requiring permissions are not displayed

Fix in 4.1.0-1

LAST3 FOR CAPACITOR 3 (3.7.x)

🚨 Since release 3.7.2 ->> 🚨

Android Only by Manuel García Marín (https://github.com/PhantomPainX)

Update to Exoplayer 2.16.0
Add ChromeCast Support

see Chromecast Support

🚨 Since release 3.7.2 <<- 🚨

🚨 Since release 3.7.1 ->> 🚨

New Android Layout by Manuel García Marín (https://github.com/PhantomPainX)

🚨 Since release 3.7.1 <<- 🚨

🚨 Since release 3.3.1 ->> 🚨

the PIP (Picture in Picture) mode has been added to the Android (API >= N) and iOS (iPad - iOS >= 13, iPhone - iOS >= 14) plugins. Is it accessible by clicking on the PiP button next to the Close button on the top-left window corner.

In Android, to have it running in your application, you must include in the AndroidManifest.xmlfile under the <activity tag the following

    android:resizeableActivity="true"
    android:supportsPictureInPicture="true"

In iOS, to have it running in your application, you must set the Background Modes application capabilities and switch on the mode Audio, Air-Play, and Picture in Picture

🚨 Since release 3.3.1 <<- 🚨

PREVIOUS CAPACITOR 2.4.7

The 2.4.7 is now 🛑 NOT MAINTAINED ANYMORE 🛑 and can be used as is.

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

Release 3.7.5

npm install --save capacitor-video-player@last3
npx cap sync
npx cap sync @capacitor-community/electron

Release 2.4.7

npm install --save capacitor-video-player@2.4.7
npx cap sync
npx cap sync @capacitor-community/electron

On Web and Electron, no further steps are needed.
on iOS, you need to set your app Capabilities Background Modes (Audio and AirPlay) in Xcode
On Android, register the plugin in your main activity:

import com.jeep.plugin.capacitor.CapacitorVideoPlayer;

public class MainActivity extends BridgeActivity {

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(
        savedInstanceState,
        new ArrayList<Class<? extends Plugin>>() {
          {
            // Additional plugins you've installed go here
            // Ex: add(TotallyAwesomePlugin.class);
            add(CapacitorVideoPlayer.class);
          }
        }
      );
  }
}

Release 3.0.0

npm install --save capacitor-video-player@latest
npx cap sync
npx cap sync @capacitor-community/electron

On Web and Electron ,

npm install --save hls.js

on iOS, you need to set your app Capabilities Background Modes (Audio and AirPlay) in Xcode
On Android, the AndroidManifest.xmlshould include

  <!-- Permissions -->

  <uses-permission android:name="android.permission.INTERNET" />
  <!-- Camera, Photos, input file -->
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

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)	✅	❌	❌	❌
isPlaying	✅	✅	✅	✅
play	✅	✅	✅	✅
pause	✅	✅	✅	✅
getCurrentTime	✅	✅	✅	✅
setCurrentTime	✅	✅	✅	✅
getDuration	✅	✅	✅	✅
getMuted	✅	✅	✅	✅
setMuted	✅	✅	✅	✅
getVolume	✅	✅	✅	✅
setVolume	✅	✅	✅	✅
stopAllPlayers	✅	✅	✅	✅
getRate	✅	✅	✅	✅
setRate	✅	✅	✅	✅

Supported listeners

Name	Android	iOS	Electron	Web
jeepCapVideoPlayerReady	✅	✅	✅	✅
jeepCapVideoPlayerPlay	✅	✅	✅	✅
jeepCapVideoPlayerPause	✅	✅	✅	✅
jeepCapVideoPlayerEnded	✅	✅	✅	✅
jeepCapVideoPlayerExit	✅	✅	✅	✅