mueslirieger / capacitor-video-player Goto Github PK

capacitor-video-player

CAPACITOR 3

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

The master release has been upgraded to @capacitor/[email protected].

🚨 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 <<- 🚨

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

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.

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);
          }
        }
      );
  }
}

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"/>

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

No configuration required for this plugin

API_Documentation

• pwa-video-player-app-starter

• angular-video-player-app-starter

• react-video-player-app-starter

• angular-video-player-app-starter

• react-video-player-app-starter

• vite-react-videoplayer-app

• vue-videoplayer-app

• see capacitor documentation

• see usage 2.4.7

• see capacitor documentation

• see usage 3.0.0

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

Thanks goes to these wonderful people (emoji key):

Jean Pierre Quéau 💻

Yelhouti 💻

Mamane10 💻

Пронин Андрей KANekT 💻

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