Skip to content

tailosoft/capacitor-video-player

Β 
Β 

Repository files navigation


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,

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 [email protected]
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) βœ… ❌ ❌ ❌
initPlayer (artwork) βœ… ❌ ❌ ❌
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 βœ… βœ… βœ… βœ…

Documentation

API_Documentation

Applications demonstrating the use of the plugin

Application Starter 2.4.7

Application Starter 3.0.0

Usage 2.4.7

Usage 3.0.0

Dependencies

  • hls.js for HLS videos on Web and Electron platforms
  • ExoPlayer for HLS, DASH, SmoothStreaming videos on Android platform

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Jean Pierre QuΓ©au

πŸ’»

Yelhouti

πŸ’»

Mamane10

πŸ’»

ΠŸΡ€ΠΎΠ½ΠΈΠ½ АндрСй KANekT

πŸ’»

Michael Rieger

πŸ’»

Manuel GarcΓ­a MarΓ­n

πŸ’»

Jelle Oppenhuis

πŸ’»

fegauthier

πŸ’»

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

About

Capacitor Video Player Plugin

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 48.1%
  • Swift 33.5%
  • TypeScript 17.1%
  • Other 1.3%