Upload Video From Phone to React Native

react-native-video

A <Video> component for react-native, as seen in react-native-login!

Version v.10 recommends react-native >= 0.60.0 for Android 64bit builds and Android X back up.

Version 4.10 requires react-native >= 0.57.0

Version 3.x requires react-native >= 0.40.0

Version 5.0.0 breaking changes

Version v introduces breaking changes on Android, delight check carefully the steps described in that location: Android Installation

Version 4.0.0 breaking changes

Version 4.0.0 changes some behaviors and may require updates to your Gradle files. See Updating for details.

Version iv.0.0 at present requires Android target SDK 26+ and Gradle three plugin in order to support ExoPlayer 2.9.0. Google is dropping support for apps using target SDKs older than 26 every bit of October 2018 and Gradle 2 as of January 2019. React Native 0.57 defaults to Gradle iii & SDK 27.

If you need to back up an older React Native version, you lot should use react-native-video three.two.one.

Version three.0.0 breaking changes

Version iii.0 features a number of changes to existing behavior. Run into Updating for changes.

Installation
- iOS
- tvOS
- Android
- Windows
- react-native-dom
Usage
iOS App Transport Security
Audio Mixing
Android Expansion File Usage
Updating

Installation

Using npm:

npm install --save react-native-video

or using yarn:

yarn add together react-native-video

Then follow the instructions for your platform to link react-native-video into your project:

iOS installation

iOS details

Standard Method

React Native 0.threescore and above

Run npx pod-install. Linking is not required in React Native 0.lx and above.

React Native 0.59 and below

Run react-native link react-native-video to link the react-native-video library.

Using CocoaPods (required to enable caching)

Setup your Podfile like information technology is described in the react-native documentation.

Depending on your requirements y'all have to choose between the two possible subpodspecs:

Video but:

                  pod 'Folly', :podspec => '../node_modules/react-native/3rd-party-podspecs/Folly.podspec'                                      +                    `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`                  terminate

Video with caching (more info):

                  pod 'Folly', :podspec => '../node_modules/react-native/3rd-party-podspecs/Folly.podspec'                                      +                    `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`                  cease

tvOS installation

tvOS details

react-native link react-native-video doesn't work properly with the tvOS target and so we need to add the library manually.

First select your project in Xcode.

Afterward that, select the tvOS target of your application and select « General » tab

Whorl to « Linked Frameworks and Libraries » and tap on the + button

Select RCTVideo-tvOS

Android installation

Android details

Linking is not required in React Native 0.lx and above. If your project is using React Native < 0.60, run react-native link react-native-video to link the react-native-video library.

Or if you have trouble, make the following additions to the given files manually:

android/settings.gradle

The newer ExoPlayer library will work for most people.

include                                      ':react-native-video'                                    project(                    ':react-native-video'                  ).projectDir                  =                  new                  File(rootProject.projectDir,                                      '../node_modules/react-native-video/android-exoplayer'                  )

If y'all demand to use the old Android MediaPlayer based player, use the following instead:

include                                      ':react-native-video'                                    projection(                    ':react-native-video'                  ).projectDir                  =                  new                  File(rootProject.projectDir,                                      '../node_modules/react-native-video/android'                  )

android/app/build.gradle

From version >= five.0.0, you have to apply these changes:

dependencies {    ...     compile project(':react-native-video')                                      +                    implementation "androidx.appcompat:appcompat:1.0.0"                                      -                    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"                  }

android/gradle.properties

Migrating to AndroidX (needs version >= v.0.0):

                  android.useAndroidX=true                  android.enableJetifier=true

MainApplication.java

On top, where imports are:

                  import                  com.brentvatne.react.ReactVideoPackage;

Add the ReactVideoPackage form to your listing of exported packages.

                  @Override                  protected                  List<ReactPackage>                  getPackages() {                  return                  Arrays                  .asList(                  new                  MainReactPackage(),                  new                  ReactVideoPackage()     ); }

Windows installation

Windows RNW C++/WinRT details

Autolinking

React Native Windows 0.63 and above

Autolinking should automatically add together react-native-video to your app.

Transmission Linking

React Native Windows 0.62

Make the following additions to the given files manually:

windows\myapp.sln

Add together the ReactNativeVideoCPP project to your solution (eg. windows\myapp.sln):

Open your solution in Visual Studio 2019
Right-click Solution icon in Solution Explorer > Add > Existing Project...
Select node_modules\react-native-video\windows\ReactNativeVideoCPP\ReactNativeVideoCPP.vcxproj

windows\myapp\myapp.vcxproj

Add a reference to ReactNativeVideoCPP to your main awarding project (eg. windows\myapp\myapp.vcxproj):

Open your solution in Visual Studio 2019
Right-click main application projection > Add > Reference...
Bank check ReactNativeVideoCPP from Solution Projects

pch.h

Add #include "winrt/ReactNativeVideoCPP.h".

app.cpp

Add PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider()); earlier InitializeComponent();.

React Native Windows 0.61 and below

Follow the transmission linking instuctions for React Native Windows 0.62 to a higher place, merely substitute ReactNativeVideoCPP61 for ReactNativeVideoCPP.

react-native-dom installation

react-native-dom details

Make the following additions to the given files manually:

dom/bootstrap.js

Import RCTVideoManager and add together it to the list of nativeModules:

                  import                  {                  RNDomInstance                  }                  from                  "react-native-dom"                  ;                  import                  {                  name                  every bit                  appName                  }                  from                  "../app.json"                  ;                  import                  RCTVideoManager                  from                  'react-native-video/dom/RCTVideoManager'                  ;                  // Add this                  // Path to RN Parcel Entrypoint ================================================                  const                  rnBundlePath                  =                  "./entry.bundle?platform=dom&dev=true"                  ;                  // React Native DOM Runtime Options =============================================                  const                  ReactNativeDomOptions                  =                  {                  enableHotReload:                  false                  ,                  nativeModules:                  [                  RCTVideoManager                  ]                  // Add this                  }                  ;

Usage

                // Load the module                import                Video                from                'react-native-video'                ;                // Within your render role, bold yous have a file called                // "groundwork.mp4" in your projection. You can include multiple videos                // on a single screen if you like.                <                Video                source                =                {                {                uri:                "background"                }                }                // Can be a URL or a local file.                ref                =                {                (                ref                )                =>                {                this                .                player                =                ref                }                }                // Store reference                onBuffer                =                {                this                .                onBuffer                }                // Callback when remote video is buffering                onError                =                {                this                .                videoError                }                // Callback when video cannot be loaded                fashion                =                {                styles                .                backgroundVideo                }                /                >                // Subsequently on in your styles..                var                styles                =                StyleSheet                .                create                (                {                backgroundVideo:                {                position:                'absolute'                ,                top:                0                ,                left:                0                ,                lesser:                0                ,                right:                0                ,                }                ,                }                )                ;

Configurable props

allowsExternalPlayback
audioOnly
automaticallyWaitsToMinimizeStalling
bufferConfig
controls
currentPlaybackTime
disableFocus
filter
filterEnabled
fullscreen
fullscreenAutorotate
fullscreenOrientation
headers
hideShutterView
id
ignoreSilentSwitch
maxBitRate
minLoadRetryCount
mixWithOthers
muted
paused
pictureInPicture
playInBackground
playWhenInactive
poster
posterResizeMode
preferredForwardBufferDuration
preventsDisplaySleepDuringVideoPlayback
progressUpdateInterval
rate
repeat
reportBandwidth
resizeMode
selectedAudioTrack
selectedTextTrack
selectedVideoTrack
source
stereoPan
textTracks
trackId
useTextureView
volume

Event props

onAudioBecomingNoisy
onBandwidthUpdate
onEnd
onExternalPlaybackChange
onFullscreenPlayerWillPresent
onFullscreenPlayerDidPresent
onFullscreenPlayerWillDismiss
onFullscreenPlayerDidDismiss
onLoad
onLoadStart
onReadyForDisplay
onPictureInPictureStatusChanged
onPlaybackRateChange
onProgress
onSeek
onRestoreUserInterfaceForPictureInPictureStop
onTimedMetadata

Methods

dismissFullscreenPlayer
presentFullscreenPlayer
salvage
restoreUserInterfaceForPictureInPictureStop
seek

Configurable props

allowsExternalPlayback

Indicates whether the player allows switching to external playback mode such as AirPlay or HDMI.

true (default) - allow switching to external playback mode
false - Don't allow switching to external playback mode

Platforms: iOS

audioOnly

Indicates whether the player should only play the audio rails and instead of displaying the video track, prove the affiche instead.

false (default) - Display the video as normal
true - Testify the poster and play the audio

For this to work, the poster prop must be fix.

Platforms: all

automaticallyWaitsToMinimizeStalling

A Boolean value that indicates whether the player should automatically delay playback in guild to minimize stalling. For clients linked confronting iOS 10.0 and later

false - Immediately starts playback
truthful (default) - Delays playback in order to minimize stalling

Platforms: iOS

bufferConfig

Adjust the buffer settings. This prop takes an object with one or more of the properties listed below.

Property	Blazon	Description
minBufferMs	number	The default minimum duration of media that the histrion will attempt to ensure is buffered at all times, in milliseconds.
maxBufferMs	number	The default maximum duration of media that the player will attempt to buffer, in milliseconds.
bufferForPlaybackMs	number	The default duration of media that must exist buffered for playback to outset or resume following a user action such as a seek, in milliseconds.
bufferForPlaybackAfterRebufferMs	number	The default duration of media that must exist buffered for playback to resume afterwards a rebuffer, in milliseconds. A rebuffer is defined to be caused past buffer depletion rather than a user action.

This prop should merely be ready when you are setting the source, irresolute it later on the media is loaded will cause it to be reloaded.

Example with default values:

              bufferConfig={{   minBufferMs: 15000,   maxBufferMs: 50000,   bufferForPlaybackMs: 2500,   bufferForPlaybackAfterRebufferMs: 5000 }}

Platforms: Android ExoPlayer

currentPlaybackTime

When playing an HLS live stream with a EXT-X-Plan-Date-Time tag configured, then this property will incorporate the epoch value in msec.

Platforms: Android ExoPlayer, iOS

controls

Determines whether to show player controls.

** false (default)** - Don't show player controls
true - Evidence player controls

Annotation on iOS, controls are ever shown when in fullscreen style.

For Android MediaPlayer, you will demand to build your own controls or apply a package like react-native-video-controls or react-native-video-player.

Note on Android ExoPlayer, native controls are available by default. If needed, you lot can also add your controls or use a package like [react-native-video-controls].

Platforms: Android ExoPlayer, iOS, react-native-dom

disableFocus

Determines whether video sound should override background music/audio in Android devices.

** fake (default)** - Override groundwork audio/music
true - Let background sound/music from other apps play

Platforms: Android Exoplayer

DRM

To setup DRM please follow this guide

Platforms: Android Exoplayer, iOS

filter

Add together video filter

FilterType.NONE (default) - No Filter
FilterType.Invert - CIColorInvert
FilterType.MONOCHROME - CIColorMonochrome
FilterType.POSTERIZE - CIColorPosterize
FilterType.FALSE - CIFalseColor
FilterType.MAXIMUMCOMPONENT - CIMaximumComponent
FilterType.MINIMUMCOMPONENT - CIMinimumComponent
FilterType.CHROME - CIPhotoEffectChrome
FilterType.FADE - CIPhotoEffectFade
FilterType.INSTANT - CIPhotoEffectInstant
FilterType.MONO - CIPhotoEffectMono
FilterType.NOIR - CIPhotoEffectNoir
FilterType.Process - CIPhotoEffectProcess
FilterType.TONAL - CIPhotoEffectTonal
FilterType.TRANSFER - CIPhotoEffectTransfer
FilterType.SEPIA - CISepiaTone

For more details on these filters refer to the iOS docs.

Notes:

Using a filter tin impact CPU usage. A workaround is to relieve the video with the filter and and then load the saved video.
Video filter is currently non supported on HLS playlists.
filterEnabled must be gear up to truthful

Platforms: iOS

filterEnabled

Enable video filter.

false (default) - Don't enable filter
true - Enable filter

Platforms: iOS

fullscreen

Controls whether the actor enters fullscreen on play.

faux (default) - Don't brandish the video in fullscreen
true - Display the video in fullscreen

Platforms: iOS

fullscreenAutorotate

If a preferred fullscreenOrientation is gear up, causes the video to rotate to that orientation but permits rotation of the screen to orientation held by user. Defaults to TRUE.

Platforms: iOS

fullscreenOrientation

all (default) -
landscape
portrait

Platforms: iOS

headers

Laissez passer headers to the HTTP client. Can be used for authorisation. Headers must be a part of the source object.

Case:

              source={{   uri: "https://www.example.com/video.mp4",   headers: {     Potency: 'bearer some-token-value',     'Ten-Custom-Header': 'some value'   } }}

Platforms: Android ExoPlayer

hideShutterView

Controls whether the ExoPlayer shutter view (black screen while loading) is enabled.

fake (default) - Show shutter view
true - Hide shutter view

Platforms: Android ExoPlayer

id

Gear up the DOM id element so yous can use document.getElementById on web platforms. Accepts string values.

Example:

              id="video"

Platforms: react-native-dom

ignoreSilentSwitch

Controls the iOS silent switch behavior

"inherit" (default) - Apply the default AVPlayer behavior
"ignore" - Play audio even if the silent switch is set
"obey" - Don't play sound if the silent switch is set

Platforms: iOS

maxBitRate

Sets the desired limit, in $.25 per second, of network bandwidth consumption when multiple video streams are available for a playlist.

Default: 0. Don't limit the maxBitRate.

Example:

              maxBitRate={2000000} // 2 megabits

Platforms: Android ExoPlayer, iOS

minLoadRetryCount

Sets the minimum number of times to retry loading data before declining and reporting an error to the application. Useful to recover from transient internet failures.

Default: 3. Retry three times.

Case:

              minLoadRetryCount={5} // retry 5 times

Platforms: Android ExoPlayer

mixWithOthers

Controls how Audio mix with other apps.

"inherit" (default) - Use the default AVPlayer behavior
"mix" - Sound from this video mixes with audio from other apps.
"duck" - Reduces the volume of other apps while sound from this video plays.

Platforms: iOS

muted

Controls whether the sound is muted

faux (default) - Don't mute audio
true - Mute audio

Platforms: all

paused

Controls whether the media is paused

false (default) - Don't suspension the media
true - Intermission the media

Platforms: all

pictureInPicture

Make up one's mind whether the media should played every bit picture in motion picture.

imitation (default) - Don't non play as pic in moving picture
true - Play the media as picture in moving picture

Platforms: iOS

playInBackground

Determine whether the media should go on playing while the app is in the background. This allows customers to go on listening to the audio.

false (default) - Don't continue playing the media
true - Continue playing the media

To employ this feature on iOS, you must:

Enable Background Audio in your Xcode project
Ready the ignoreSilentSwitch prop to "ignore"

Platforms: Android ExoPlayer, Android MediaPlayer, iOS

playWhenInactive

Decide whether the media should go on playing when notifications or the Control Center are in front of the video.

false (default) - Don't proceed playing the media
true - Continue playing the media

Platforms: iOS

poster

An image to display while the video is loading
Value: cord with a URL for the affiche, due east.k. "https://baconmockup.com/300/200/"

Platforms: all

posterResizeMode

Determines how to resize the poster image when the frame doesn't match the raw video dimensions.

"incorporate" (default) - Scale the image uniformly (maintain the prototype's aspect ratio) and then that both dimensions (width and height) of the image will be equal to or less than the respective dimension of the view (minus padding).
"center" - Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that information technology is contained in the view.
"embrace" - Scale the image uniformly (maintain the image's aspect ratio) and so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
"none" - Don't apply resize
"repeat" - Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio. (iOS only)
"stretch" - Calibration width and height independently, This may change the aspect ratio of the src.

Platforms: all

preferredForwardBufferDuration

The elapsing the player should buffer media from the network ahead of the playhead to guard confronting playback disruption. Sets the preferredForwardBufferDuration instance belongings on AVPlayerItem.

Default: 0

Platforms: iOS

preventsDisplaySleepDuringVideoPlayback

Controls whether or not the brandish should be allowed to sleep while playing the video. Default is non to allow display to sleep.

Default: true

Platforms: iOS, Android

progressUpdateInterval

Delay in milliseconds between onProgress events in milliseconds.

Default: 250.0

Platforms: all

charge per unit

Speed at which the media should play.

0.0 - Pauses the video
1.0 - Play at normal speed
Other values - Boring downward or speed upwards playback

Platforms: all

Annotation: For Android MediaPlayer, rate is simply supported on Android 6.0 and higher devices.

repeat

Determine whether to repeat the video when the cease is reached

false (default) - Don't repeat the video
true - Repeat the video

Platforms: all

reportBandwidth

Determine whether to generate onBandwidthUpdate events. This is needed due to the high frequency of these events on ExoPlayer.

false (default) - Don't generate onBandwidthUpdate events
truthful - Generate onBandwidthUpdate events

Platforms: Android ExoPlayer

resizeMode

Determines how to resize the video when the frame doesn't lucifer the raw video dimensions.

"none" (default) - Don't apply resize
"contain" - Scale the video uniformly (maintain the video'south aspect ratio) and then that both dimensions (width and acme) of the video will be equal to or less than the corresponding dimension of the view (minus padding).
"embrace" - Calibration the video uniformly (maintain the video'due south aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
"stretch" - Scale width and peak independently, This may modify the attribute ratio of the src.

Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP

selectedAudioTrack

Configure which audio track, if any, is played.

              selectedAudioTrack={{   blazon: Blazon,   value: Value }}

Instance:

              selectedAudioTrack={{   type: "title",   value: "Dubbing" }}

Type	Value	Description
"system" (default)	North/A	Play the sound rail that matches the system language. If none match, play the beginning rails.
"disabled"	North/A	Turn off audio
"title"	string	Play the sound rail with the championship specified equally the Value, e.one thousand. "French"
"language"	string	Play the audio runway with the language specified as the Value, eastward.yard. "fr"
"alphabetize"	number	Play the sound track with the alphabetize specified as the value, e.g. 0

If a rails matching the specified Blazon (and Value if appropriate) is unavailable, the start sound track will be played. If multiple tracks match the criteria, the first match will be used.

Platforms: Android ExoPlayer, iOS

selectedTextTrack

Configure which text runway (caption or subtitle), if whatever, is shown.

              selectedTextTrack={{   type: Type,   value: Value }}

Example:

              selectedTextTrack={{   type: "title",   value: "English Subtitles" }}

Type	Value	Clarification
"organization" (default)	N/A	Display captions only if the system preference for captions is enabled
"disabled"	Due north/A	Don't display a text runway
"title"	string	Display the text track with the title specified every bit the Value, e.yard. "French 1"
"language"	string	Display the text track with the linguistic communication specified as the Value, e.grand. "fr"
"alphabetize"	number	Brandish the text track with the index specified as the value, e.g. 0

Both iOS & Android (only 4.four and higher) offer Settings to enable Captions for hearing impaired people. If "organisation" is selected and the Captions Setting is enabled, iOS/Android will look for a explanation that matches that customer'southward language and display it.

If a track matching the specified Type (and Value if appropriate) is unavailable, no text rail volition be displayed. If multiple tracks lucifer the criteria, the outset match will be used.

Platforms: Android ExoPlayer, iOS

selectedVideoTrack

Configure which video rail should be played. Past default, the player uses Adaptive Bitrate Streaming to automatically select the stream it thinks will perform best based on available bandwidth.

              selectedVideoTrack={{   type: Type,   value: Value }}

Case:

              selectedVideoTrack={{   type: "resolution",   value: 480 }}

Type	Value	Description
"motorcar" (default)	N/A	Let the player decide which track to play using ABR
"disabled"	Northward/A	Turn off video
"resolution"	number	Play the video track with the pinnacle specified, due east.g. 480 for the 480p stream
"alphabetize"	number	Play the video rail with the alphabetize specified as the value, e.g. 0

If a track matching the specified Type (and Value if advisable) is unavailable, ABR will be used.

Platforms: Android ExoPlayer

source

Sets the media source. You can pass an nugget loaded via require or an object with a uri.

Setting the source volition trigger the player to effort to load the provided media with all other given props. Please be sure that all props are provided earlier/at the same time as setting the source.

Rendering the player component with a null source will init the player, and kickoff playing once a source value is provided.

Providing a zip source value later on loading a previous source will stop playback, and clear out the previous source content.

The docs for this prop are incomplete and volition be updated as each option is investigated and tested.

Asset loaded via require

Instance:

              const sintel = require('./sintel.mp4');  source={sintel}

URI cord

A number of URI schemes are supported by passing an object with a uri aspect.

Web accost (http://, https://)

Example:

              source={{uri: 'https://world wide web.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4' }}

Platforms: all

File path (file://)

Example:

              source={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}

Note: Your app will demand to request permission to read external storage if you're accessing a file outside your app.

Platforms: Android ExoPlayer, Android MediaPlayer, possibly others

iPod Library (ipod-library://)

Path to a sound file in your iTunes library. Typically shared from iTunes to your app.

Case:

              source={{ uri: 'ipod-library:///path/to/music.mp3' }}

Note: Using this feature adding an entry for NSAppleMusicUsageDescription to your Info.plist file equally described here

Platforms: iOS

Explicit mimetype for the stream

Provide a member blazon with value (mpd/m3u8/ism) inside the source object. Sometimes is needed when URL extension does non match with the mimetype that y'all are expecting, as seen on the next example. (Extension is .ism -polish streaming- just file served is on format mpd -mpeg nuance-)

Example:

              source={{ uri: 'http://host-serving-a-type-different-than-the-extension.ism/manifest(format=mpd-time-csf)', type: 'mpd' }}

Other protocols

The post-obit other types are supported on some platforms, simply aren't fully documented yet: content://, ms-appx://, ms-appdata://, assets-library://

stereoPan

Adapt the balance of the left and correct audio channels. Any value between –1.0 and one.0 is accepted.

-1.0 - Full left
0.0 (default) - Centre
one.0 - Full correct

Platforms: Android MediaPlayer

textTracks

Load 1 or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should take the format:

Property	Description
title	Descriptive proper noun for the track
language	ii letter ISO 639-one code representing the language
type	Mime type of the track * TextTrackType.SRT - SubRip (.srt) * TextTrackType.TTML - TTML (.ttml) * TextTrackType.VTT - WebVTT (.vtt) iOS only supports VTT, Android ExoPlayer supports all 3
uri	URL for the text track. Currently, only tracks hosted on a webserver are supported

On iOS, sidecar text tracks are only supported for individual files, not HLS playlists. For HLS, you should include the text tracks equally part of the playlist.

Note: Due to iOS limitations, sidecar text tracks are not uniform with Airplay. If textTracks are specified, AirPlay support will be automatically disabled.

Example:

              import { TextTrackType }, Video from 'react-native-video';  textTracks={[   {     championship: "English CC",     language: "en",     type: TextTrackType.VTT, // "text/vtt"     uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"   },   {     title: "Spanish Subtitles",     linguistic communication: "es",     type: TextTrackType.SRT, // "application/x-subrip"     uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"   } ]}

Platforms: Android ExoPlayer, iOS

trackId

Configure an identifier for the video stream to link the playback context to the events emitted.

Platforms: Android ExoPlayer

useTextureView

Controls whether to output to a TextureView or SurfaceView.

SurfaceView is more than efficient and provides better performance just has two limitations:

It can't exist blithe, transformed or scaled
You tin can't overlay multiple SurfaceViews

useTextureView can just be ready at same fourth dimension you're setting the source.

true (default) - Use a TextureView
false - Use a SurfaceView

Platforms: Android ExoPlayer

volume

Adjust the book.

1.0 (default) - Play at full volume
0.0 - Mute the audio
Other values - Reduce volume

Platforms: all

Event props

onAudioBecomingNoisy

Callback role that is called when the audio is about to get 'noisy' due to a alter in audio outputs. Typically this is called when audio output is being switched from an external source like headphones back to the internal speaker. Information technology'southward a expert idea to suspension the media when this happens so the speaker doesn't first blasting sound.

Payload: none

Platforms: Android ExoPlayer, iOS

onBandwidthUpdate

Callback function that is called when the available bandwidth changes.

Payload:

Property	Type	Description
bitrate	number	The estimated bitrate in $.25/sec

Instance:

              {   bitrate: one thousand thousand }

Annotation: On Android ExoPlayer, you must gear up the reportBandwidth prop to enable this event. This is due to the high book of events generated.

Platforms: Android ExoPlayer

onEnd

Callback function that is called when the thespian reaches the end of the media.

Payload: none

Platforms: all

onExternalPlaybackChange

Callback part that is called when external playback mode for electric current playing video has changed. Generally useful when connecting/disconnecting to Apple Tv set – it'southward called on connection/disconnection.

Payload:

Property	Blazon	Description
isExternalPlaybackActive	boolean	Boolean indicating whether external playback manner is active

Example:

              {   isExternalPlaybackActive: true }

Platforms: iOS

onFullscreenPlayerWillPresent

Callback role that is called when the player is nearly to enter fullscreen way.

Payload: none

Platforms: Android ExoPlayer, Android MediaPlayer, iOS

onFullscreenPlayerDidPresent

Callback function that is called when the thespian has entered fullscreen mode.

Payload: none

Platforms: Android ExoPlayer, Android MediaPlayer, iOS

onFullscreenPlayerWillDismiss

Callback function that is called when the player is almost to exit fullscreen mode.

Payload: none

Platforms: Android ExoPlayer, Android MediaPlayer, iOS

onFullscreenPlayerDidDismiss

Callback office that is called when the player has exited fullscreen mode.

Payload: none

Platforms: Android ExoPlayer, Android MediaPlayer, iOS

onLoad

Callback part that is called when the media is loaded and ready to play.

Payload:

Belongings	Blazon	Description
currentPosition	number	Time in seconds where the media will outset
duration	number	Length of the media in seconds
naturalSize	object	Properties: * width - Width in pixels that the video was encoded at * meridian - Height in pixels that the video was encoded at * orientation - "portrait" or "landscape"
audioTracks	array	An assortment of sound track info objects with the following backdrop: * alphabetize - Index number * title - Clarification of the track * language - two letter of the alphabet ISO 639-one or 3 letter ISO639-2 language code * type - Mime type of track
textTracks	array	An array of text track info objects with the following properties: * index - Index number * title - Description of the track * language - 2 letter ISO 639-1 or iii alphabetic character ISO 639-ii language lawmaking * blazon - Mime type of track
videoTracks	array	An array of video track info objects with the post-obit properties: * trackId - ID for the runway * bitrate - Bit rate in bits per second * codecs - Comma separated list of codecs * superlative - Height of the video * width - Width of the video

Example:

              {    canPlaySlowForward: true,   canPlayReverse: false,   canPlaySlowReverse: faux,   canPlayFastForward: false,   canStepForward: false,   canStepBackward: false,   currentTime: 0,   duration: 5910.208984375,   naturalSize: {      meridian: 1080      orientation: 'landscape'      width: '1920'   },   audioTracks: [     { linguistic communication: 'es', title: 'Castilian', type: 'sound/mpeg', index: 0 },     { language: 'en', title: 'English', blazon: 'sound/mpeg', index: 1 }   ],   textTracks: [     { title: '#one French', language: 'fr', index: 0, type: 'text/vtt' },     { championship: '#2 English language CC', language: 'en', index: i, type: 'text/vtt' },     { title: '#3 English Managing director Commentary', language: 'en', alphabetize: 2, type: 'text/vtt' }   ],   videoTracks: [     { bitrate: 3987904, codecs: "avc1.640028", height: 720, trackId: "f1-v1-x3", width: 1280 },     { bitrate: 7981888, codecs: "avc1.640028", height: 1080, trackId: "f2-v1-x3", width: 1920 },     { bitrate: 1994979, codecs: "avc1.4d401f", height: 480, trackId: "f3-v1-x3", width: 848 }   ] }

Platforms: all

onLoadStart

Callback part that is chosen when the media starts loading.

Payload:

Holding	Description
isNetwork	boolean
blazon	string
uri	string

Example:

              {   isNetwork: true,   type: '',   uri: 'https://bitdash-a.akamaihd.internet/content/sintel/hls/playlist.m3u8' }

Platforms: all

onReadyForDisplay

Callback part that is called when the kickoff video frame is ready for display. This is when the affiche is removed.

Payload: none

iOS: readyForDisplay
Android: MEDIA_INFO_VIDEO_RENDERING_START
Android ExoPlayer STATE_READY

Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Spider web

onPictureInPictureStatusChanged

Callback function that is chosen when motion-picture show in picture becomes active or inactive.

Property	Type	Clarification
isActive	boolean	Boolean indicating whether picture in picture is active

Example:

              { isActive: true }

Platforms: iOS

onPlaybackRateChange

Callback function that is called when the rate of playback changes - either paused or starts/resumes.

Property	Type	Description
playbackRate	number	0 when playback is paused, ane when playing at normal speed. Other values when playback is slowed down or sped up

Example:

              {   playbackRate: 0, // indicates paused }

Platforms: all

onProgress

Callback role that is chosen every progressUpdateInterval seconds with info most which position the media is currently playing.

Belongings	Type	Clarification
currentTime	number	Current position in seconds
playableDuration	number	Position to where the media tin can exist played to using merely the buffer in seconds
seekableDuration	number	Position to where the media tin can be seeked to in seconds. Typically, the full length of the media

Example:

              {   currentTime: 5.two,   playableDuration: 34.vi,   seekableDuration: 888 }

Platforms: all

onSeek

Callback office that is called when a seek completes.

Payload:

Property	Blazon	Description
currentTime	number	The electric current time later on the seek
seekTime	number	The requested time

Instance:

              {   currentTime: 100.5   seekTime: 100 }

Both the currentTime & seekTime are reported considering the video role player may not seek to the exact requested position in order to improve seek performance.

Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP

onRestoreUserInterfaceForPictureInPictureStop

Callback function that corresponds to Apple'southward restoreUserInterfaceForPictureInPictureStopWithCompletionHandler. Telephone call restoreUserInterfaceForPictureInPictureStopCompleted within of this role when washed restoring the user interface.

Payload: none

Platforms: iOS

onTimedMetadata

Callback function that is called when timed metadata becomes available

Payload:

Property	Type	Description
metadata	array	Assortment of metadata objects

Example:

              {   metadata: [     { value: 'Streaming Encoder', identifier: 'TRSN' },     { value: 'Internet Stream', identifier: 'TRSO' },     { value: 'Any Fourth dimension Y'all Like', identifier: 'TIT2' }   ] }

Back up for timed metadata on Android MediaPlayer is limited at best and only compatible with some videos. It requires a target SDK of 23 or higher.

Platforms: Android ExoPlayer, Android MediaPlayer, iOS

Methods

Methods operate on a ref to the Video element. You tin create a ref using code similar:

              return (   <Video source={...}     ref={ref => (this.thespian = ref)} /> );

dismissFullscreenPlayer

dismissFullscreenPlayer()

Have the player out of fullscreen manner.

Example:

              this.player.dismissFullscreenPlayer();

Platforms: Android ExoPlayer, Android MediaPlayer, iOS

presentFullscreenPlayer

presentFullscreenPlayer()

Put the actor in fullscreen manner.

On iOS, this displays the video in a fullscreen view controller with controls.

On Android ExoPlayer & MediaPlayer, this puts the navigation controls in fullscreen mode. Information technology is not a complete fullscreen implementation, so you will still need to apply a manner that makes the width and height lucifer your screen dimensions to get a fullscreen video.

Example:

              this.role player.presentFullscreenPlayer();

Platforms: Android ExoPlayer, Android MediaPlayer, iOS

save

save(): Hope

Salvage video to your Photos with electric current filter prop. Returns promise.

Instance:

              let response = await this.player.relieve(); let path = response.uri;

Notes:

Currently only supports highest quality consign
Currently merely supports MP4 export
Currently only supports exporting to user's cache directory with a generated UUID filename.
User will need to remove the saved video through their Photos app
Works with cached videos likewise. (Checkout video-caching example)
If the video is has not began buffering (e.chiliad. in that location is no internet connection) and so the salve function will throw an error.
If the video is buffering then the save function hope will return after the video has finished buffering and processing.

Hereafter:

Will support multiple qualities through options
Will support more formats in the future through options
Will support custom directory and file name through options

Platforms: iOS

restoreUserInterfaceForPictureInPictureStopCompleted

restoreUserInterfaceForPictureInPictureStopCompleted(restored)

This function corresponds to the completion handler in Apple's restoreUserInterfaceForPictureInPictureStop. IMPORTANT: This function must be called afterwards onRestoreUserInterfaceForPictureInPictureStop is called.

Example:

              this.player.restoreUserInterfaceForPictureInPictureStopCompleted(truthful);

Platforms: iOS

seek()

seek(seconds)

Seek to the specified position represented by seconds. seconds is a float value.

seek() can just be called after the onLoad event has fired. Once completed, the onSeek event volition be chosen.

Example:

              this.player.seek(200); // Seek to 3 minutes, 20 seconds

Platforms: all

Exact seek

By default iOS seeks inside 100 milliseconds of the target position. If you need more accuracy, yous tin use the seek with tolerance method:

seek(seconds, tolerance)

tolerance is the max distance in milliseconds from the seconds position that's allowed. Using a more exact tolerance tin can crusade seeks to take longer. If you want to seek exactly, set tolerance to 0.

Example:

              this.player.seek(120, fifty); // Seek to 2 minutes with +/- 50 milliseconds accurateness

Platforms: iOS

iOS App Ship Security

By default, iOS will only load encrypted (https) urls. If y'all desire to load content from an unencrypted (http) source, you will need to modify your Info.plist file and add the post-obit entry:

For more detailed info check this article

Sound Mixing

At some point in the future, react-native-video will include an Audio Managing director for configuring how videos mix with other apps playing sounds on the device.

On iOS, if y'all would like to permit other apps to play music over your video component, make the following change:

AppDelegate.1000

#import                                  <AVFoundation/AVFoundation.h>                                                  //                  import                - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary                *)launchOptions {   ...   [[AVAudioSession                sharedInstance]                setCategory:AVAudioSessionCategoryAmbient                error:                nil];                                  //                  let                ... }

You can also apply the ignoreSilentSwitch prop.

Android Expansion File Usage

Expansions files permit you to ship assets that exceed the 100MB apk size limit and don't need to exist updated each time yous push an app update.

This merely supports mp4 files and they must non be compressed. Example command line for preventing compression:

aught -r -n .mp4                *.mp4 histrion.video.instance.com

                // Within your render function, assuming you have a file chosen                // "background.mp4" in your expansion file. Just add your main and (if applicable) patch version                <                Video                source                =                {                {                uri:                "background"                ,                mainVer:                ane                ,                patchVer:                0                }                }                // Looks for .mp4 file (background.mp4) in the given expansion version.                resizeMode                =                "cover"                // Fill the whole screen at aspect ratio.                style                =                {                styles                .                backgroundVideo                }                /                >

Load files with the RN Nugget Arrangement

The asset system introduced in RN 0.14 allows loading epitome resources shared across iOS and Android without touching native code. As of RN 0.31 the same is true of mp4 video assets for Android. As of RN 0.33 iOS is as well supported. Requires react-native-video@0.ix.0.

                <                Video                source                =                {                require                (                '../assets/video/turntable.mp4'                )                }                /                >

Play in background on iOS

To enable audio to play in background on iOS the sound session needs to be set to AVAudioSessionCategoryPlayback. Come across Apple documentation for additional details. (Notation: there is now a ticket to expose this every bit a prop )

Examples

See an Example integration in react-native-login notation that this case uses an older version of this library, before we used consign default -- if you employ require you will demand to do require('react-native-video').default as per instructions to a higher place.

Try the included VideoPlayer example yourself:

git clone git@github.com:react-native-community/react-native-video.git                    cd                    react-native-video/case npm install open ios/VideoPlayer.xcodeproj

Then Cmd+R to start the React Packager, build and run the project in the simulator.

Lumpen Radio contains another example integration using local files and full screen background video.

Updating

Version 5.0.0

Probably you want to update your gradle version:

gradle-wrapper.properties

                                  -                  distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip                                  +                  distributionUrl=https\://services.gradle.org/distributions/gradle-5.i.1-all.zip

android/app/build.gradle

From version >= 5.0.0, yous accept to utilize this changes:

dependencies {    ...     compile project(':react-native-video')                                  +                  implementation "androidx.appcompat:appcompat:1.0.0"                                  -                  implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"                }

android/gradle.properties

Migrating to AndroidX (needs version >= 5.0.0):

                android.useAndroidX=true                android.enableJetifier=true

Version iv.0.0

Gradle 3 and target SDK 26 requirement

In society to back up ExoPlayer 2.nine.0, yous must use version iii or college of the Gradle plugin. This is included by default in React Native 0.57.

ExoPlayer 2.9.0 Java 1.8 requirement

ExoPlayer ii.9.0 uses some Coffee ane.viii features, and then yous may demand to enable support for Java one.viii in your app/build.gradle file. If yous become an error, compiling with ExoPlayer similar: Default interface methods are only supported starting with Android Due north (--min-api 24)

Add the following to your app/build.gradle file:

              android {    ... // Various other settings become here    compileOptions {      targetCompatibility JavaVersion.VERSION_1_8    } }

ExoPlayer no longer detaches

When using a router like the react-navigation TabNavigator, switching between tab routes would previously cause ExoPlayer to detach causing the video player to pause. We now don't disassemble the view, allowing the video to continue playing in a groundwork tab. This matches the behavior for iOS. Android MediaPlayer will crash if it detaches when switching routes, so its behavior has non been changed.

useTextureView at present defaults to true

The SurfaceView, which ExoPlayer has been using past default has a number of quirks that people are unaware of and oft cause issues. This includes not supporting animations or scaling. It besides causes foreign behavior if y'all overlay two videos on elevation of each other, because the SurfaceView will punch a hole through other views. Since TextureView doesn't have these problems and behaves in the way most developers expect, information technology makes sense to go far the default.

TextureView is non as fast as SurfaceView, so you may still want to enable SurfaceView back up. To do this, you lot can fix useTextureView={simulated}.

Version iii.0.0

All platforms at present auto-play

Previously, on Android ExoPlayer if the paused prop was non gear up, the media would not automatically start playing. The only way information technology would work was if you set paused={simulated}. This has been changed to automatically play if paused is non set and then that the behavior is consistent beyond platforms.

All platforms now keep their paused state when returning from the background

Previously, on Android MediaPlayer if y'all setup an AppState effect when the app went into the background and set a paused prop and then that when you returned to the app the video would exist paused information technology would exist ignored.

Note, Windows does non have a concept of an app going into the groundwork, so this doesn't employ there.

Use Android target SDK 27 by default

Version iii.0 updates the Android build tools and SDK to version 27. React Native is in the process of switchting over to SDK 27 in preparation for Google'due south requirement that new Android apps use SDK 26 by August 2018.

You will either demand to install the version 27 SDK and version 27.0.three buildtools or modify your build.gradle file to configure react-native-video to utilise the aforementioned build settings as the residuum of your app as described beneath.

Using app build settings

You volition demand to create a project.ext department in the top-level build.gradle file (not app/build.gradle). Fill in the values from the example below using the values found in your app/build.gradle file.

              // Top-level build file where y'all can add configuration options common to all sub-projects/modules.  buildscript {     ... // Various other settings go here }  allprojects {     ... // Diverse other settings get here      project.ext {         compileSdkVersion = 23         buildToolsVersion = "23.0.1"          minSdkVersion = 16         targetSdkVersion = 22     } }

If you encounter an error Could not find com.android.support:support-annotations:27.0.0. reinstall your Android Back up Repository.

TODOS

[ ] Add support for playing multiple videos in a sequence (volition interfere with current repeat implementation)
[x] Callback to become buffering progress for remote videos
[ ] Bring API closer to HTML5 <Video> reference

MIT Licensed

harristherhavery.blogspot.com

Source: https://www.npmjs.com/package/react-native-video

Upload Video From Phone to React Native

react-native-video

Version 5.0.0 breaking changes

Version 4.0.0 breaking changes

Version three.0.0 breaking changes

Table of Contents

Installation

iOS installation

Standard Method

Using CocoaPods (required to enable caching)

tvOS installation

Android installation

android/settings.gradle

android/app/build.gradle

android/gradle.properties

MainApplication.java

Windows installation

Autolinking

Transmission Linking

windows\myapp.sln

windows\myapp\myapp.vcxproj

pch.h

app.cpp

react-native-dom installation

dom/bootstrap.js

Usage

Configurable props

Event props

Methods

Configurable props

allowsExternalPlayback

audioOnly

automaticallyWaitsToMinimizeStalling

bufferConfig

currentPlaybackTime

controls

disableFocus

DRM

filter

filterEnabled

fullscreen

fullscreenAutorotate

fullscreenOrientation

headers

hideShutterView

id

ignoreSilentSwitch

maxBitRate

minLoadRetryCount

mixWithOthers

muted

paused

pictureInPicture

playInBackground

playWhenInactive

poster

posterResizeMode

preferredForwardBufferDuration

preventsDisplaySleepDuringVideoPlayback

progressUpdateInterval

charge per unit

repeat

reportBandwidth

resizeMode

selectedAudioTrack

selectedTextTrack

selectedVideoTrack

source

Asset loaded via require

URI cord

Web accost (http://, https://)

File path (file://)

iPod Library (ipod-library://)

Explicit mimetype for the stream

Other protocols

stereoPan

textTracks

trackId

useTextureView

volume