@eduardoroth/media-player

@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

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

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