Forked from react-native-media-kit
This is a video and audio component for react-native apps, supporting both iOS and Android, with API similar to HTML video.
Supported media types:
- iOS: Should be the same as those supported by AVPlayer
- Android: Should be the same as those supported by ExoPlayer
Using npm:
$ npm install --save react-native-media-suite
or using yarn:
$ yarn add react-native-media-suite
For each platform (iOS/Android) you plan to use, follow one of the options for the corresponding platform.
iOS
Run $ react-native link react-native-media-suite
to link the react-native-media-suite library. You only need to do this once, it will link both Android and iOS
- Right click on Libraries and choose 'Add files to "Project Name"'.
- Navigate to
project_name/node_modules/react-native-media-suite/ios/
and add the filereact-native-media-suite.xcodeproj
. - Open project settings and at the top choose 'Build Phases'
- Expand the 'Link Binary With Libraries' section.
- Click the + at the bottom of the list
- Add the
libreact-native-media-suite.a
file
Android
Run $ react-native link react-native-media-suite
to link the react-native-media-suite library. You only need to do this once, it will link both Android and iOS.
include ':react-native-media-suite'
project(':react-native-media-suite').projectDir = new File('../node_modules/react-native-media-suite/android')
dependencies {
...
compile project(':react-native-media-suite')
}
import za.co.digitalwaterfall.reactnativemediasuite.MediaSuitePackage;
...
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MediaKitPackage()
);
}
import Video from 'react-native-media-suite';
render() {
return (
<Video
src="https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd"
ref={ref => this.videoRef = ref}
style={styles.videoStyle}
onError={this.videoError} // Callback when video cannot be loaded
onProgress={this.videoProgress} // Callback called every second to give info about playback
/>
);
}
var styles = StyleSheet.create({
videoStyle: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
Property Name | Type | Description | iOS | Android |
---|---|---|---|---|
src |
string | The URL of the video or downloadID | ✅ | ✅ |
autoplay |
boolean | True to automatically begins to play. Default is false . |
✅ | ✅ |
loop |
boolean | true to automatically seek back to the start upon reaching the end of the video. Default is false . |
✅ | ✅ |
muted |
boolean | true to silence the audio. Default is false . |
✅ | ✅ |
ignoreSilentSwitch |
boolean | true to ignore the iPhone silent switch when playing audio. |
✅ | ❌ |
Property Name | Description | iOS | Android |
---|---|---|---|
onPlayerPause |
✅ | ✅ | |
onPlayerPlay |
✅ | ✅ | |
onPlayerEnd |
✅ | ✅ | |
onPlayerBuffer |
✅ | ✅ | |
onPlayerBufferOk |
✅ | ✅ | |
onPlayerProgress |
✅ | ✅ | |
onPlayerError |
✅ | ✅ | |
onPlayerBufferChange |
✅ | ✅ | |
onPlayerLoadStart |
✅ | ✅ | |
onPlayerLoad |
✅ | ✅ | |
onPlayerSeek |
❌ | ✅ | |
onPlayerTimedMetadata |
❌ | ✅ | |
onFullscreenPlayerWillPresent |
❌ | ✅ | |
onFullscreenPlayerDidPresent |
❌ | ✅ | |
onFullscreenPlayerWillDismiss |
❌ | ✅ | |
onFullscreenPlayerDidDismiss |
❌ | ✅ | |
onPlayerReadyForDisplay |
❌ | ✅ | |
onPlayerRateChange |
❌ | ✅ | |
onPlayerAudioFocusChanged |
❌ | ✅ | |
onPlayerAudioBecomingNoisy |
❌ | ✅ |
play()
play()
Resumes playback.
Example:
this.videoRef.play();
Platforms: All
pause()
pause()
Pauses playback.
Example:
this.videoRef.pause();
Platforms: All
seekTo()
seekTo(milliseconds)
Seek to the specified position represented by milliseconds, milliseconds is a integer value.
Example:
this.videoRef.seekTo(33300); //Seek to 33.3 seconds
Platforms: All
presentFullscreenPlayer()
presentFullscreenPlayer()
Puts the player into fullscreen mode.
On Android, this puts the navigation controls in fullscreen mode. Note this does not put the video into fullscreen, will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.
Example:
this.videoRef.presentFullscreenPlayer();
Platforms: Android
dismissFullscreenPlayer()
dismissFullscreenPlayer()
Takes the player out of fullscreen mode.
Example:
this.videoRef.dismissFullscreenPlayer();
Platforms: Android
Methods can be passed to the constructor to be called when events occur. The following callbacks are supported.
import { Downloader } from 'react-native-media-suite';
...
const downloader = new Downloader({
onDownloadFinished: eventData => console.log(`eventData: ${eventData}`),
onDownloadProgress: eventData => console.log(`eventData: ${eventData}`),
onDownloadStarted: eventData => console.log(`eventData: ${eventData}`),
onDownloadError: eventData => console.log(`eventData: ${eventData}`),
onDownloadCancelled: eventData => console.log(`eventData: ${eventData}`)
});
Method Name | Evocation Property | iOS | Android |
---|---|---|---|
onDownloadFinished |
{ downloadID : string, downloadLocation : string, size : integer (bytes) } |
✅ | ✅ |
onDownloadProgress |
{ downloadID : string, percentComplete : float } |
✅ | ✅ |
onDownloadStarted |
{ downloadID : string } |
✅ | ✅ |
onDownloadError |
{ downloadID : string, error : string, errorType : string } |
✅ | ✅ |
onDownloadCanceled |
{ downloadID : string } |
✅ | ✅ |
downloader.restoreMediaDownloader();
downloader.downloadStream('someMediaUrl', 'someDownloadId', );
downloader.deleteDownloadedStream('someDownloadId');
downloader.pauseDownload('someDownloadId');
downloader.resumeDownload('someDownloadId');
downloader.cancelDownload('someDownloadId');
Method Name | Properties | iOS | Android |
---|---|---|---|
restoreMediaDownloader |
✅ | ✅ | |
downloadStream |
url: string , downloadID: string , bitRate: integer (Optional - defaults to max bit-rate) |
✅ | ✅ |
deleteDownloadedStream |
downloadID: string |
✅ | ✅ |
pauseDownload |
downloadID: string |
✅ | ✅ |
resumeDownload |
downloadID: string |
✅ | ✅ |
cancelDownload |
downloadID: string |
✅ | ✅ |
For details about the usage of above APIs, check library/media-downloader/download-manager.js
.
- Downloading
- DRM
- Google Play
- Air Play