@eduardoroth/media-player

Native Media Player for iOS, Android and Browser. Based on the great work of @jepiqueau

• iOS
  • AVPlayer
• Android
  • ExoPlayer3
• Web
  • Vidstack

Install

npm install @eduardoroth/media-player
npx cap sync

Android

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

<activity
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|screenLayout|uiMode|fontScale|density|fontWeightAdjustment"
>
</activity>

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

Contributors

API

• 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

create(...)

create(options: MediaPlayerOptions) => Promise<MediaPlayerResult<string>>

| Param | Type | | ------------- | ----------------------------------------------------------------- | | options | MediaPlayerOptions |

Returns: Promise<MediaPlayerResult<string>>

play(...)

play(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<string>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<string>>

pause(...)

pause(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<string>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<string>>

getDuration(...)

getDuration(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<number>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<number>>

getCurrentTime(...)

getCurrentTime(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<number>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<number>>

setCurrentTime(...)

setCurrentTime(options: MediaPlayerSetCurrentTimeOptions) => Promise<MediaPlayerResult<number>>

| Param | Type | | ------------- | --------------------------------------------------------------------------------------------- | | options | MediaPlayerSetCurrentTimeOptions |

Returns: Promise<MediaPlayerResult<number>>

isPlaying(...)

isPlaying(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<boolean>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<boolean>>

isMuted(...)

isMuted(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<boolean>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<boolean>>

setVisibilityBackgroundForPiP(...)

setVisibilityBackgroundForPiP(options: MediaPlayerSetVisibilityBackgroundForPiPOptions) => Promise<MediaPlayerResult<boolean>>

| Param | Type | | ------------- | --------------------------------------------------------------------------------------------------------------------------- | | options | MediaPlayerSetVisibilityBackgroundForPiPOptions |

Returns: Promise<MediaPlayerResult<boolean>>

mute(...)

mute(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<boolean>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<boolean>>

getVolume(...)

getVolume(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<number>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<number>>

setVolume(...)

setVolume(options: MediaPlayerSetVolumeOptions) => Promise<MediaPlayerResult<number>>

| Param | Type | | ------------- | ----------------------------------------------------------------------------------- | | options | MediaPlayerSetVolumeOptions |

Returns: Promise<MediaPlayerResult<number>>

getRate(...)

getRate(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<number>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<number>>

setRate(...)

setRate(options: MediaPlayerSetRateOptions) => Promise<MediaPlayerResult<number>>

| Param | Type | | ------------- | ------------------------------------------------------------------------------- | | options | MediaPlayerSetRateOptions |

Returns: Promise<MediaPlayerResult<number>>

remove(...)

remove(options: MediaPlayerIdOptions) => Promise<MediaPlayerResult<string>>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Returns: Promise<MediaPlayerResult<string>>

removeAll()

removeAll() => Promise<MediaPlayerResult<string[]>>

Returns: Promise<MediaPlayerResult<string[]>>

addListener('MediaPlayer:Ready', ...)

addListener(event: 'MediaPlayer:Ready', listener: (event: { playerId: string; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | ------------------------------------------------------ | | event | 'MediaPlayer:Ready' | | listener | (event: { playerId: string; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:Play', ...)

addListener(event: 'MediaPlayer:Play', listener: (event: { playerId: string; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | ------------------------------------------------------ | | event | 'MediaPlayer:Play' | | listener | (event: { playerId: string; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:Pause', ...)

addListener(event: 'MediaPlayer:Pause', listener: (event: { playerId: string; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | ------------------------------------------------------ | | event | 'MediaPlayer:Pause' | | listener | (event: { playerId: string; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:Ended', ...)

addListener(event: 'MediaPlayer:Ended', listener: (event: { playerId: string; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | ------------------------------------------------------ | | event | 'MediaPlayer:Ended' | | listener | (event: { playerId: string; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:Removed', ...)

addListener(event: 'MediaPlayer:Removed', listener: (event: { playerId: string; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | ------------------------------------------------------ | | event | 'MediaPlayer:Removed' | | listener | (event: { playerId: string; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:Seek', ...)

addListener(event: 'MediaPlayer:Seek', listener: (event: { playerId: string; previousTime: number | undefined; newTime: number; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | --------------------------------------------------------------------------------------------- | | event | 'MediaPlayer:Seek' | | listener | (event: { playerId: string; previousTime: number; newTime: number; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:TimeUpdated', ...)

addListener(event: 'MediaPlayer:TimeUpdated', listener: (event: { playerId: string; currentTime: number; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | --------------------------------------------------------------------------- | | event | 'MediaPlayer:TimeUpdated' | | listener | (event: { playerId: string; currentTime: number; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:FullScreen', ...)

addListener(event: 'MediaPlayer:FullScreen', listener: (event: { playerId: string; isInFullScreen: boolean; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | ------------------------------------------------------------------------------- | | event | 'MediaPlayer:FullScreen' | | listener | (event: { playerId: string; isInFullScreen: boolean; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:PictureInPicture', ...)

addListener(event: 'MediaPlayer:PictureInPicture', listener: (event: { playerId: string; isInPictureInPicture: boolean; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | ------------------------------------------------------------------------------------- | | event | 'MediaPlayer:PictureInPicture' | | listener | (event: { playerId: string; isInPictureInPicture: boolean; }) => void |

Returns: Promise<PluginListenerHandle>

addListener('MediaPlayer:isPlayingInBackground', ...)

addListener(event: 'MediaPlayer:isPlayingInBackground', listener: (event: { playerId: string; isPlayingInBackground: boolean; }) => void) => Promise<PluginListenerHandle>

| Param | Type | | -------------- | -------------------------------------------------------------------------------------- | | event | 'MediaPlayer:isPlayingInBackground' | | listener | (event: { playerId: string; isPlayingInBackground: boolean; }) => void |

Returns: Promise<PluginListenerHandle>

removeAllListeners(...)

removeAllListeners(options: MediaPlayerIdOptions) => Promise<void>

| Param | Type | | ------------- | --------------------------------------------------------------------- | | options | MediaPlayerIdOptions |

Interfaces

Error

| Prop | Type | | ------------- | ------------------- | | name | string | | message | string | | stack | string |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

Type Aliases

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