@eduardoroth/media-player v4.0.10
@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 syncAndroid
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; }
6 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago