Updated Media Player for iOS, Android and Web
npm install @eduardoroth/media-player
Native Media Player for iOS, Android and Browser.
Based on the great work of @jepiqueau
- iOS
- AVPlayer
- Android
- ExoPlayer3
- Web
- Vidstack
``bash`
npm install @eduardoroth/media-player
npx cap sync
Required Gradle v7+
For the plugin to work correctly, you have to set/add in your AndroidManifest.xml for your main activity the following setting for android:configChanges
`xml`
>
This will make sure the app doesn't break when doing any of the following actions:
- Changing the orientation
- Showing or hiding the keyboard
- Changing the screen size
- Casting or mirroring the screen
- Changing the font scale
- Changing the screen density
* create(...)
* play(...)
* pause(...)
* getDuration(...)
* getCurrentTime(...)
* setCurrentTime(...)
* isPlaying(...)
* isMuted(...)
* setVisibilityBackgroundForPiP(...)
* mute(...)
* getVolume(...)
* setVolume(...)
* getRate(...)
* setRate(...)
* remove(...)
* removeAll()
* addListener('MediaPlayer:Ready', ...)
* addListener('MediaPlayer:Play', ...)
* addListener('MediaPlayer:Pause', ...)
* addListener('MediaPlayer:Ended', ...)
* addListener('MediaPlayer:Removed', ...)
* addListener('MediaPlayer:Seek', ...)
* addListener('MediaPlayer:TimeUpdated', ...)
* addListener('MediaPlayer:FullScreen', ...)
* addListener('MediaPlayer:PictureInPicture', ...)
* addListener('MediaPlayer:isPlayingInBackground', ...)
* removeAllListeners(...)
* Interfaces
* Type Aliases
`typescript`
create(options: MediaPlayerOptions) => Promise
| Param | Type |
| ------------- | ----------------------------------------------------------------- |
| options | MediaPlayerOptions |
Returns: Promise<MediaPlayerResult<string>>
--------------------
`typescript`
play(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<string>>
--------------------
`typescript`
pause(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<string>>
--------------------
`typescript`
getDuration(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<number>>
--------------------
`typescript`
getCurrentTime(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<number>>
--------------------
`typescript`
setCurrentTime(options: MediaPlayerSetCurrentTimeOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------------------------------- |
| options | MediaPlayerSetCurrentTimeOptions |
Returns: Promise<MediaPlayerResult<number>>
--------------------
`typescript`
isPlaying(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<boolean>>
--------------------
`typescript`
isMuted(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<boolean>>
--------------------
`typescript`
setVisibilityBackgroundForPiP(options: MediaPlayerSetVisibilityBackgroundForPiPOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------------------------------------------------------------- |
| options | MediaPlayerSetVisibilityBackgroundForPiPOptions |
Returns: Promise<MediaPlayerResult<boolean>>
--------------------
`typescript`
mute(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<boolean>>
--------------------
`typescript`
getVolume(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<number>>
--------------------
`typescript`
setVolume(options: MediaPlayerSetVolumeOptions) => Promise
| Param | Type |
| ------------- | ----------------------------------------------------------------------------------- |
| options | MediaPlayerSetVolumeOptions |
Returns: Promise<MediaPlayerResult<number>>
--------------------
`typescript`
getRate(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<number>>
--------------------
`typescript`
setRate(options: MediaPlayerSetRateOptions) => Promise
| Param | Type |
| ------------- | ------------------------------------------------------------------------------- |
| options | MediaPlayerSetRateOptions |
Returns: Promise<MediaPlayerResult<number>>
--------------------
`typescript`
remove(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
Returns: Promise<MediaPlayerResult<string>>
--------------------
`typescript`
removeAll() => Promise
Returns: Promise<MediaPlayerResult<string[]>>
--------------------
`typescript`
addListener(event: 'MediaPlayer:Ready', listener: (event: { playerId: string; }) => void) => Promise
| Param | Type |
| -------------- | ------------------------------------------------------ |
| event | 'MediaPlayer:Ready' |
| listener | (event: { playerId: string; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:Play', listener: (event: { playerId: string; }) => void) => Promise
| Param | Type |
| -------------- | ------------------------------------------------------ |
| event | 'MediaPlayer:Play' |
| listener | (event: { playerId: string; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:Pause', listener: (event: { playerId: string; }) => void) => Promise
| Param | Type |
| -------------- | ------------------------------------------------------ |
| event | 'MediaPlayer:Pause' |
| listener | (event: { playerId: string; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:Ended', listener: (event: { playerId: string; }) => void) => Promise
| Param | Type |
| -------------- | ------------------------------------------------------ |
| event | 'MediaPlayer:Ended' |
| listener | (event: { playerId: string; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:Removed', listener: (event: { playerId: string; }) => void) => Promise
| Param | Type |
| -------------- | ------------------------------------------------------ |
| event | 'MediaPlayer:Removed' |
| listener | (event: { playerId: string; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:Seek', listener: (event: { playerId: string; previousTime: number | undefined; newTime: number; }) => void) => Promise
| Param | Type |
| -------------- | --------------------------------------------------------------------------------------------- |
| event | 'MediaPlayer:Seek' |
| listener | (event: { playerId: string; previousTime: number; newTime: number; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:TimeUpdated', listener: (event: { playerId: string; currentTime: number; }) => void) => Promise
| Param | Type |
| -------------- | --------------------------------------------------------------------------- |
| event | 'MediaPlayer:TimeUpdated' |
| listener | (event: { playerId: string; currentTime: number; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:FullScreen', listener: (event: { playerId: string; isInFullScreen: boolean; }) => void) => Promise
| Param | Type |
| -------------- | ------------------------------------------------------------------------------- |
| event | 'MediaPlayer:FullScreen' |
| listener | (event: { playerId: string; isInFullScreen: boolean; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:PictureInPicture', listener: (event: { playerId: string; isInPictureInPicture: boolean; }) => void) => Promise
| Param | Type |
| -------------- | ------------------------------------------------------------------------------------- |
| event | 'MediaPlayer:PictureInPicture' |
| listener | (event: { playerId: string; isInPictureInPicture: boolean; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
addListener(event: 'MediaPlayer:isPlayingInBackground', listener: (event: { playerId: string; isPlayingInBackground: boolean; }) => void) => Promise
| Param | Type |
| -------------- | -------------------------------------------------------------------------------------- |
| event | 'MediaPlayer:isPlayingInBackground' |
| listener | (event: { playerId: string; isPlayingInBackground: boolean; }) => void |
Returns: Promise<PluginListenerHandle>
--------------------
`typescript`
removeAllListeners(options: MediaPlayerIdOptions) => Promise
| Param | Type |
| ------------- | --------------------------------------------------------------------- |
| options | MediaPlayerIdOptions |
--------------------
#### Error
| Prop | Type |
| ------------- | ------------------- |
| name | string |
| message | string |
| stack | string |
#### PluginListenerHandle
| Prop | Type |
| ------------ | ----------------------------------------- |
| remove` | () => Promise<void> |
#### MediaPlayerResult
{ method: string; result: boolean; value?: ResultValueType; error?: Error; message?: string; }
#### MediaPlayerOptions
{ playerId: string; url: string; placement?: MediaPlayerPlacementOptions; ios?: MediaPlayerIosOptions; android?: MediaPlayerAndroidOptions; web?: MediaPlayerWebOptions; extra?: MediaPlayerExtraOptions; }
#### MediaPlayerPlacementOptions
{ videoOrientation?: 'VERTICAL' | 'HORIZONTAL'; horizontalMargin?: number; horizontalAlignment?: 'START' | 'CENTER' | 'END'; verticalMargin?: number; verticalAlignment?: 'TOP' | 'CENTER' | 'BOTTOM'; height?: number; width?: number; }
#### MediaPlayerIosOptions
{ enableExternalPlayback?: boolean; enablePiP?: boolean; enableBackgroundPlay?: boolean; openInFullscreen?: boolean; automaticallyEnterPiP?: boolean; automaticallyHideBackgroundForPip?: boolean; fullscreenOnLandscape?: boolean; allowsVideoFrameAnalysis?: boolean; }
#### MediaPlayerAndroidOptions
{ enableChromecast?: boolean; enablePiP?: boolean; enableBackgroundPlay?: boolean; openInFullscreen?: boolean; automaticallyEnterPiP?: boolean; fullscreenOnLandscape?: boolean; stopOnTaskRemoved?: boolean; }
#### MediaPlayerWebOptions
{ enableChromecast?: boolean; }
#### MediaPlayerExtraOptions
{ title?: string; subtitle?: string; poster?: string; artist?: string; rate?: number; subtitles?: MediaPlayerSubtitleOptions; autoPlayWhenReady?: boolean; loopOnEnd?: boolean; showControls?: boolean; headers?: { [key: string]: string; }; }
#### MediaPlayerSubtitleOptions
{ url: string; options?: { language?: string; foregroundColor?: string; backgroundColor?: string; fontSize?: number; }; }
#### MediaPlayerIdOptions
{ playerId: string; }
#### MediaPlayerSetCurrentTimeOptions
{ playerId: string; time: number; }
#### MediaPlayerSetVisibilityBackgroundForPiPOptions
{ playerId: string; isVisible: boolean; }
#### MediaPlayerSetVolumeOptions
{ playerId: string; volume: number; }
#### MediaPlayerSetRateOptions
{ playerId: string; rate: number; }