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
Maintainer | GitHub | Social |
---|---|---|
QuΓ©au Jean Pierre | jepiqueau |
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
π¨ 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
π¨ 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.xml
file 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
,
meaning that it will not work in IE11 without additional JavaScript transformations, e.g. with Babel.
npm install --save capacitor-video-player@last3
npx cap sync
npx cap sync @capacitor-community/electron
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.xml
should 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
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 | β | β | β | β |
Name | Android | iOS | Electron | Web |
---|---|---|---|---|
jeepCapVideoPlayerReady | β | β | β | β |
jeepCapVideoPlayerPlay | β | β | β | β |
jeepCapVideoPlayerPause | β | β | β | β |
jeepCapVideoPlayerEnded | β | β | β | β |
jeepCapVideoPlayerExit | β | β | β | β |
- 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 π» |
Michael Rieger π» |
Manuel GarcΓa MarΓn π» |
Jelle Oppenhuis π» |
fegauthier π» |
This project follows the all-contributors specification. Contributions of any kind welcome!