React video autoplay iOS
react-native-videoA Show
Version 5.x recommends react-native >= 0.60.0 for Android 64bit builds and Android X support. Version 4.x requires react-native >= 0.57.0 Version 3.x requires react-native >= 0.40.0 Version 5.0.0 breaking changesVersion 5 introduces breaking changes on Android, please check carefully the steps described there: Android Installation Version 4.0.0 breaking changesVersion 4.0.0 changes some behaviors and may require updates to your Gradle files. See Updating for details. Version 4.0.0 now requires Android target SDK 26+ and Gradle 3 plugin in order to support ExoPlayer 2.9.0. Google is dropping support for apps using target SDKs older than 26 as of October 2018 and Gradle 2 as of January 2019. React Native 0.57 defaults to Gradle 3 & SDK 27. If you need to support an older React Native version, you should use react-native-video 3.2.1. Version 3.0.0 breaking changesVersion 3.0 features a number of changes to existing behavior. See Updating for changes. Table of Contents
InstallationUsing npm: npm install --save react-native-video or using yarn: yarn add react-native-video Then follow the instructions for your platform to link react-native-video into your project: iOS installationiOS detailsStandard MethodReact Native 0.60 and above Run npx pod-install. Linking is not required in React Native 0.60 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 it is described in the react-native documentation. Depending on your requirements you have to choose between the two possible subpodspecs: Video only: pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+ `pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end Video with caching (more info): pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+ `pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'`
end tvOS installationtvOS detailsreact-native link react-native-video doesnt work properly with the tvOS target so we need to add the library manually. First select your project in Xcode. After that, select the tvOS target of your application and select «General» tab Scroll to «Linked Frameworks and Libraries» and tap on the + button Select RCTVideo-tvOS Android installationAndroid detailsLinking is not required in React Native 0.60 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.gradleThe 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 you need to use the old Android MediaPlayer based player, use the following instead: include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android') android/app/build.gradleFrom version >= 5.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.propertiesMigrating to AndroidX (needs version >= 5.0.0): android.useAndroidX=true
android.enableJetifier=true MainApplication.javaOn top, where imports are: import com.brentvatne.react.ReactVideoPackage; Add the ReactVideoPackage class to your list of exported packages. @Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactVideoPackage()
);
} Windows installationWindows RNW C++/WinRT detailsAutolinkingReact Native Windows 0.63 and above Autolinking should automatically add react-native-video to your app. Manual LinkingReact Native Windows 0.62 Make the following additions to the given files manually: windows\myapp.slnAdd the ReactNativeVideoCPP project to your solution (eg. windows\myapp.sln):
windows\myapp\myapp.vcxprojAdd a reference to ReactNativeVideoCPP to your main application project (eg. windows\myapp\myapp.vcxproj):
pch.hAdd #include "winrt/ReactNativeVideoCPP.h". app.cppAdd PackageProviders().Append(winrt::ReactNativeVideoCPP::ReactPackageProvider()); before InitializeComponent();. React Native Windows 0.61 and below Follow the manual linking instuctions for React Native Windows 0.62 above, but substitute ReactNativeVideoCPP61 for ReactNativeVideoCPP. react-native-dom installationreact-native-dom detailsMake the following additions to the given files manually: dom/bootstrap.jsImport RCTVideoManager and add it to the list of nativeModules: import { RNDomInstance } from "react-native-dom";
import { name as appName } from "../app.json";
import RCTVideoManager from 'react-native-video/dom/RCTVideoManager'; // Add this
// Path to RN Bundle 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 function, assuming you have a file called
// "background.mp4" in your project. 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
style={styles.backgroundVideo} />
// Later on in your styles..
var styles = StyleSheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
}); Configurable props
Event props
Methods
Configurable propsallowsExternalPlaybackIndicates whether the player allows switching to external playback mode such as AirPlay or HDMI.
Platforms: iOS audioOnlyIndicates whether the player should only play the audio track and instead of displaying the video track, show the poster instead.
For this to work, the poster prop must be set. Platforms: all automaticallyWaitsToMinimizeStallingA Boolean value that indicates whether the player should automatically delay playback in order to minimize stalling. For clients linked against iOS 10.0 and later
Platforms: iOS bufferConfigAdjust the buffer settings. This prop takes an object with one or more of the properties listed below.
This prop should only be set when you are setting the source, changing it after 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 currentPlaybackTimeWhen playing an HLS live stream with a EXT-X-PROGRAM-DATE-TIME tag configured, then this property will contain the epoch value in msec. Platforms: Android ExoPlayer, iOS controlsDetermines whether to show player controls.
Note on iOS, controls are always shown when in fullscreen mode. For Android MediaPlayer, you will need to build your own controls or use 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 can also add your controls or use a package like [react-native-video-controls]. Platforms: Android ExoPlayer, iOS, react-native-dom disableFocusDetermines whether video audio should override background music/audio in Android devices.
Platforms: Android Exoplayer DRMTo setup DRM please follow this guide Platforms: Android Exoplayer, iOS filterAdd video filter
For more details on these filters refer to the iOS docs. Notes:
Platforms: iOS filterEnabledEnable video filter.
Platforms: iOS fullscreenControls whether the player enters fullscreen on play.
Platforms: iOS fullscreenAutorotateIf a preferred fullscreenOrientation is set, 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
Platforms: iOS headersPass headers to the HTTP client. Can be used for authorization. Headers must be a part of the source object. Example: source={{ uri: "https://www.example.com/video.mp4", headers: { Authorization: 'bearer some-token-value', 'X-Custom-Header': 'some value' } }}Platforms: Android ExoPlayer hideShutterViewControls whether the ExoPlayer shutter view (black screen while loading) is enabled.
Platforms: Android ExoPlayer idSet the DOM id element so you can use document.getElementById on web platforms. Accepts string values. Example: id="video"Platforms: react-native-dom ignoreSilentSwitchControls the iOS silent switch behavior
Platforms: iOS maxBitRateSets the desired limit, in bits 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 megabitsPlatforms: Android ExoPlayer, iOS minLoadRetryCountSets the minimum number of times to retry loading data before failing and reporting an error to the application. Useful to recover from transient internet failures. Default: 3. Retry 3 times. Example: minLoadRetryCount={5} // retry 5 timesPlatforms: Android ExoPlayer mixWithOthersControls how Audio mix with other apps.
Platforms: iOS mutedControls whether the audio is muted
Platforms: all pausedControls whether the media is paused
Platforms: all pictureInPictureDetermine whether the media should played as picture in picture.
Platforms: iOS playInBackgroundDetermine whether the media should continue playing while the app is in the background. This allows customers to continue listening to the audio.
To use this feature on iOS, you must:
Platforms: Android ExoPlayer, Android MediaPlayer, iOS playWhenInactiveDetermine whether the media should continue playing when notifications or the Control Center are in front of the video.
Platforms: iOS posterAn image to display while the video is loading Platforms: all posterResizeModeDetermines how to resize the poster image when the frame doesn't match the raw video dimensions.
Platforms: all preferredForwardBufferDurationThe duration the player should buffer media from the network ahead of the playhead to guard against playback disruption. Sets the preferredForwardBufferDuration instance property on AVPlayerItem. Default: 0 Platforms: iOS preventsDisplaySleepDuringVideoPlaybackControls whether or not the display should be allowed to sleep while playing the video. Default is not to allow display to sleep. Default: true Platforms: iOS, Android progressUpdateIntervalDelay in milliseconds between onProgress events in milliseconds. Default: 250.0 Platforms: all rateSpeed at which the media should play.
Platforms: all Note: For Android MediaPlayer, rate is only supported on Android 6.0 and higher devices. repeatDetermine whether to repeat the video when the end is reached
Platforms: all reportBandwidthDetermine whether to generate onBandwidthUpdate events. This is needed due to the high frequency of these events on ExoPlayer.
Platforms: Android ExoPlayer resizeModeDetermines how to resize the video when the frame doesn't match the raw video dimensions.
Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP selectedAudioTrackConfigure which audio track, if any, is played. selectedAudioTrack={{ type: Type, value: Value }}Example: selectedAudioTrack={{ type: "title", value: "Dubbing" }}
If a track matching the specified Type (and Value if appropriate) is unavailable, the first audio track will be played. If multiple tracks match the criteria, the first match will be used. Platforms: Android ExoPlayer, iOS selectedTextTrackConfigure which text track (caption or subtitle), if any, is shown. selectedTextTrack={{ type: Type, value: Value }}Example: selectedTextTrack={{ type: "title", value: "English Subtitles" }}
Both iOS & Android (only 4.4 and higher) offer Settings to enable Captions for hearing impaired people. If "system" is selected and the Captions Setting is enabled, iOS/Android will look for a caption that matches that customer's language and display it. If a track matching the specified Type (and Value if appropriate) is unavailable, no text track will be displayed. If multiple tracks match the criteria, the first match will be used. Platforms: Android ExoPlayer, iOS selectedVideoTrackConfigure which video track should be played. By 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 }}Example: selectedVideoTrack={{ type: "resolution", value: 480 }}
If a track matching the specified Type (and Value if appropriate) is unavailable, ABR will be used. Platforms: Android ExoPlayer sourceSets the media source. You can pass an asset loaded via require or an object with a uri. Setting the source will trigger the player to attempt to load the provided media with all other given props. Please be sure that all props are provided before/at the same time as setting the source. Rendering the player component with a null source will init the player, and start playing once a source value is provided. Providing a null source value after loading a previous source will stop playback, and clear out the previous source content. The docs for this prop are incomplete and will be updated as each option is investigated and tested. Asset loaded via requireExample: URI stringA number of URI schemes are supported by passing an object with a uri attribute. Web address (http://, https://)Example: source={{uri: 'https://www.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 need 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. Example: source={{ uri: 'ipod-library:///path/to/music.mp3' }}Note: Using this feature adding an entry for NSAppleMusicUsageDescription to your Info.plist file as described here Platforms: iOS Explicit mimetype for the streamProvide a member type with value (mpd/m3u8/ism) inside the source object. Sometimes is needed when URL extension does not match with the mimetype that you are expecting, as seen on the next example. (Extension is .ism -smooth streaming- but file served is on format mpd -mpeg dash-) Example: source={{ uri: 'http://host-serving-a-type-different-than-the-extension.ism/manifest(format=mpd-time-csf)', type: 'mpd' }} Other protocolsThe following other types are supported on some platforms, but aren't fully documented yet: content://, ms-appx://, ms-appdata://, assets-library:// stereoPanAdjust the balance of the left and right audio channels. Any value between 1.0 and 1.0 is accepted.
Platforms: Android MediaPlayer textTracksLoad one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format:
On iOS, sidecar text tracks are only supported for individual files, not HLS playlists. For HLS, you should include the text tracks as part of the playlist. Note: Due to iOS limitations, sidecar text tracks are not compatible with Airplay. If textTracks are specified, AirPlay support will be automatically disabled. Example: import { TextTrackType }, Video from 'react-native-video'; textTracks={[ { title: "English CC", language: "en", type: TextTrackType.VTT, // "text/vtt" uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt" }, { title: "Spanish Subtitles", language: "es", type: TextTrackType.SRT, // "application/x-subrip" uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt" } ]}Platforms: Android ExoPlayer, iOS trackIdConfigure an identifier for the video stream to link the playback context to the events emitted. Platforms: Android ExoPlayer useTextureViewControls whether to output to a TextureView or SurfaceView. SurfaceView is more efficient and provides better performance but has two limitations:
useTextureView can only be set at same time you're setting the source.
Platforms: Android ExoPlayer volumeAdjust the volume.
Platforms: all Event propsonAudioBecomingNoisyCallback function that is called when the audio is about to become 'noisy' due to a change in audio outputs. Typically this is called when audio output is being switched from an external source like headphones back to the internal speaker. It's a good idea to pause the media when this happens so the speaker doesn't start blasting sound. Payload: none Platforms: Android ExoPlayer, iOS onBandwidthUpdateCallback function that is called when the available bandwidth changes. Payload:
Example: { bitrate: 1000000 }Note: On Android ExoPlayer, you must set the reportBandwidth prop to enable this event. This is due to the high volume of events generated. Platforms: Android ExoPlayer onEndCallback function that is called when the player reaches the end of the media. Payload: none Platforms: all onExternalPlaybackChangeCallback function that is called when external playback mode for current playing video has changed. Mostly useful when connecting/disconnecting to Apple TV it's called on connection/disconnection. Payload:
Example: { isExternalPlaybackActive: true }Platforms: iOS onFullscreenPlayerWillPresentCallback function that is called when the player is about to enter fullscreen mode. Payload: none Platforms: Android ExoPlayer, Android MediaPlayer, iOS onFullscreenPlayerDidPresentCallback function that is called when the player has entered fullscreen mode. Payload: none Platforms: Android ExoPlayer, Android MediaPlayer, iOS onFullscreenPlayerWillDismissCallback function that is called when the player is about to exit fullscreen mode. Payload: none Platforms: Android ExoPlayer, Android MediaPlayer, iOS onFullscreenPlayerDidDismissCallback function that is called when the player has exited fullscreen mode. Payload: none Platforms: Android ExoPlayer, Android MediaPlayer, iOS onLoadCallback function that is called when the media is loaded and ready to play. Payload:
Example: { canPlaySlowForward: true, canPlayReverse: false, canPlaySlowReverse: false, canPlayFastForward: false, canStepForward: false, canStepBackward: false, currentTime: 0, duration: 5910.208984375, naturalSize: { height: 1080 orientation: 'landscape' width: '1920' }, audioTracks: [ { language: 'es', title: 'Spanish', type: 'audio/mpeg', index: 0 }, { language: 'en', title: 'English', type: 'audio/mpeg', index: 1 } ], textTracks: [ { title: '#1 French', language: 'fr', index: 0, type: 'text/vtt' }, { title: '#2 English CC', language: 'en', index: 1, type: 'text/vtt' }, { title: '#3 English Director Commentary', language: 'en', index: 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 onLoadStartCallback function that is called when the media starts loading. Payload:
Example: { isNetwork: true, type: '', uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8' }Platforms: all onReadyForDisplayCallback function that is called when the first video frame is ready for display. This is when the poster is removed. Payload: none
Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Web onPictureInPictureStatusChangedCallback function that is called when picture in picture becomes active or inactive.
Example: { isActive: true }Platforms: iOS onPlaybackRateChangeCallback function that is called when the rate of playback changes - either paused or starts/resumes.
Example: { playbackRate: 0, // indicates paused }Platforms: all onProgressCallback function that is called every progressUpdateInterval seconds with info about which position the media is currently playing.
Example: { currentTime: 5.2, playableDuration: 34.6, seekableDuration: 888 }Platforms: all onSeekCallback function that is called when a seek completes. Payload:
Example: { currentTime: 100.5 seekTime: 100 }Both the currentTime & seekTime are reported because the video player may not seek to the exact requested position in order to improve seek performance. Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP onRestoreUserInterfaceForPictureInPictureStopCallback function that corresponds to Apple's restoreUserInterfaceForPictureInPictureStopWithCompletionHandler. Call restoreUserInterfaceForPictureInPictureStopCompleted inside of this function when done restoring the user interface. Payload: none Platforms: iOS onTimedMetadataCallback function that is called when timed metadata becomes available Payload:
Example: { metadata: [ { value: 'Streaming Encoder', identifier: 'TRSN' }, { value: 'Internet Stream', identifier: 'TRSO' }, { value: 'Any Time You Like', identifier: 'TIT2' } ] }Support 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 MethodsMethods operate on a ref to the Video element. You can create a ref using code like: return ( |