Skip to content

Latest commit

 

History

History
282 lines (202 loc) · 12.5 KB

readme.md

File metadata and controls

282 lines (202 loc) · 12.5 KB


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!