React Native Media Suite

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

Installation

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

Standard Method

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

Manually

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 file react-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

Standard Method

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.

Manually

`android/settings.gradle`

include ':react-native-media-suite'
project(':react-native-media-suite').projectDir = new File('../node_modules/react-native-media-suite/android')

`android/app/build.gradle`

dependencies {
    ...
    compile project(':react-native-media-suite')
}

`android/app/src/main/java/.../MainApplication.java` (or `MainActivity.java` on RN <= 0.29)

import za.co.digitalwaterfall.reactnativemediasuite.MediaSuitePackage;
...
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new MediaKitPackage()
    );
}

Documentation

Video Player API

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

Properties

Configurable props

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.	✅	❌

Events

Property Name	iOS	Android
`onPlayerPause`	✅	✅
`onPlayerPlay`	✅	✅
`onPlayerEnd`	✅	✅
`onPlayerBuffer`	✅	✅
`onPlayerBufferOk`	✅	✅
`onPlayerProgress`	✅	✅
`onPlayerError`	✅	✅
`onPlayerBufferChange`	✅	✅
`onPlayerLoadStart`	✅	✅
`onPlayerLoad`	✅	✅
`onPlayerSeek`	❌	✅
`onPlayerTimedMetadata`	❌	✅
`onFullscreenPlayerWillPresent`	❌	✅
`onFullscreenPlayerDidPresent`	❌	✅
`onFullscreenPlayerWillDismiss`	❌	✅
`onFullscreenPlayerDidDismiss`	❌	✅
`onPlayerReadyForDisplay`	❌	✅
`onPlayerRateChange`	❌	✅
`onPlayerAudioFocusChanged`	❌	✅
`onPlayerAudioBecomingNoisy`	❌	✅

Reference Methods

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

Downloader API

Initialisation

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 }`	✅	✅

Methods

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.

TODO

Downloading
DRM
Google Play
Air Play

hnyaoqingping / react-native-media-suite Goto Github PK