railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: cleanup documentation

Browse Source
This commit is contained in:
olivier bouillet 2022-06-15 22:51:04 +02:00
parent de2c4a5524
commit 466d7c3170
6 changed files with 79 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.github/ISSUE_TEMPLATE.md vendored
View File

@ -10,8 +10,7 @@ Describe what you wanted to happen
### Platform ### Platform
Which player are you experiencing the problem on: Which player are you experiencing the problem on:
* iOS * iOS
* Android ExoPlayer * Android
* Android MediaPlayer
* Windows UWP * Windows UWP
* Windows WPF * Windows WPF

5
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@ -18,12 +18,11 @@ assignees: ''
## Platform ## Platform
<!-- <!--
Platform where your bug is happening. If Android, report if using Android or Android Exoplayer Platform where your bug is happening.
--> -->
Which player are you experiencing the problem on: Which player are you experiencing the problem on:
* iOS * iOS
* Android ExoPlayer * Android
* Android MediaPlayer
* Windows UWP * Windows UWP
* Windows WPF * Windows WPF

173
API.md
View File

@ -111,14 +111,7 @@ Or if you have trouble, make the following additions to the given files manually
#### **android/settings.gradle** #### **android/settings.gradle**
The newer ExoPlayer library will work for most people. Add player source in build configuration
```gradle
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:
```gradle ```gradle
include ':react-native-video' include ':react-native-video'
@ -302,29 +295,29 @@ var styles = StyleSheet.create({
|[allowsExternalPlayback](#allowsexternalplayback) |iOS | |[allowsExternalPlayback](#allowsexternalplayback) |iOS |
|[audioOnly](#audioonly)|All | |[audioOnly](#audioonly)|All |
|[automaticallyWaitsToMinimizeStalling](#automaticallyWaitsToMinimizeStalling) | iOS|\ |[automaticallyWaitsToMinimizeStalling](#automaticallyWaitsToMinimizeStalling) | iOS|\
|[backBufferDurationMs](#backBufferDurationMs)| Android Exoplayer| |[backBufferDurationMs](#backBufferDurationMs)| Android |
|[bufferConfig](#bufferconfig)|Android ExoPlayer| |[bufferConfig](#bufferconfig)|Android|
|[contentStartTime](#contentStartTime)| Android Exoplayer| |[contentStartTime](#contentStartTime)| Android |
|[controls](#controls)|Android ExoPlayer, iOS, react-native-dom| |[controls](#controls)|Android, iOS, react-native-dom|
|[currentPlaybackTime](#currentPlaybackTime)|Android Exoplayer| |[currentPlaybackTime](#currentPlaybackTime)|Android|
|[disableFocus](#disableFocus)|Android Exoplayer, iOS| |[disableFocus](#disableFocus)|Android, iOS|
|[disableDisconnectError](#disableDisconnectError)|Android Exoplayer| |[disableDisconnectError](#disableDisconnectError)|Android|
|[filter](#filter)|iOS| |[filter](#filter)|iOS|
|[filterEnabled](#filterEnabled)|iOS| |[filterEnabled](#filterEnabled)|iOS|
|[fullscreen](#fullscreen)|iOS| |[fullscreen](#fullscreen)|iOS|
|[fullscreenAutorotate](#fullscreenautorotate)|iOS| |[fullscreenAutorotate](#fullscreenautorotate)|iOS|
|[fullscreenOrientation](#fullscreenorientation)|iOS| |[fullscreenOrientation](#fullscreenorientation)|iOS|
|[headers](#headers)|Android ExoPlayer| |[headers](#headers)|Android|
|[hideShutterView](#hideshutterview)|Android ExoPlayer| |[hideShutterView](#hideshutterview)|Android|
|[id](#id)|react-native-dom| |[id](#id)|react-native-dom|
|[ignoreSilentSwitch](#ignoresilentswitch)|iOS| |[ignoreSilentSwitch](#ignoresilentswitch)|iOS|
|[maxBitRate](#maxbitrate)|Android ExoPlayer, iOS| |[maxBitRate](#maxbitrate)|Android, iOS|
|[minLoadRetryCount](#minLoadRetryCount)|Android ExoPlayer| |[minLoadRetryCount](#minLoadRetryCount)|Android|
|[mixWithOthers](#mixWithOthers)|iOS| |[mixWithOthers](#mixWithOthers)|iOS|
|[muted](#muted)|All| |[muted](#muted)|All|
|[paused](#paused)|All| |[paused](#paused)|All|
|[pictureInPicture](#pictureinpicture)|iOS| |[pictureInPicture](#pictureinpicture)|iOS|
|[playInBackground](#playinbackground)|Android ExoPlayer, Android MediaPlayer, iOS| |[playInBackground](#playinbackground)|Android, iOS|
|[playWhenInactive](#playwheninactive)|iOS| |[playWhenInactive](#playwheninactive)|iOS|
|[poster](#poster)|All| |[poster](#poster)|All|
|[posterResizeMode](#posterresizemode)|All| |[posterResizeMode](#posterresizemode)|All|
@ -333,17 +326,16 @@ var styles = StyleSheet.create({
|[progressUpdateInterval](#progressupdateinterval)|All| |[progressUpdateInterval](#progressupdateinterval)|All|
|[rate](#rate)|All| |[rate](#rate)|All|
|[repeat](#repeat)|All| |[repeat](#repeat)|All|
|[reportBandwidth](#reportbandwidth)|Android ExoPlayer| |[reportBandwidth](#reportbandwidth)|Android|
|[resizeMode](#resizemode)|Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP| |[resizeMode](#resizemode)|Android, iOS, Windows UWP|
|[selectedAudioTrack](#selectedaudiotrack)|Android ExoPlayer, iOS| |[selectedAudioTrack](#selectedaudiotrack)|Android, iOS|
|[selectedTextTrack](#selectedtexttrack)|Android ExoPlayer, iOS| |[selectedTextTrack](#selectedtexttrack)|Android, iOS|
|[selectedVideoTrack](#selectedvideotrack)|Android ExoPlayer| |[selectedVideoTrack](#selectedvideotrack)|Android|
|[source](#source)|All| |[source](#source)|All|
|[stereoPan](#stereopan)|Android MediaPlayer| |[textTracks](#texttracks)|Android, iOS|
|[textTracks](#texttracks)|Android ExoPlayer, iOS| |[trackId](#trackId)|Android|
|[trackId](#trackId)|Android ExoPlayer| |[useTextureView](#usetextureview)|Android|
|[useTextureView](#usetextureview)|Android ExoPlayer| |[useSecureView](#useSecureView)|Android|
|[useSecureView](#useSecureView)|Android Exoplayer|
|[volume](#volume)|All| |[volume](#volume)|All|
|[localSourceEncryptionKeyScheme](#localSourceEncryptionKeyScheme)|All| |[localSourceEncryptionKeyScheme](#localSourceEncryptionKeyScheme)|All|
@ -351,31 +343,31 @@ var styles = StyleSheet.create({
### Event props ### Event props
| Name |Plateforms Support | | Name |Plateforms Support |
|--|--| |--|--|
|[onAudioBecomingNoisy](#onaudiobecomingnoisy)|Android ExoPlayer, iOS| |[onAudioBecomingNoisy](#onaudiobecomingnoisy)|Android, iOS|
|[onBandwidthUpdate](#onbandwidthupdate)|Android ExoPlayer| |[onBandwidthUpdate](#onbandwidthupdate)|Android|
|[onBuffer](#onbuffer)|Android ExoPlayer, iOS| |[onBuffer](#onbuffer)|Android, iOS|
|[onEnd](#onend)|All| |[onEnd](#onend)|All|
|[onExternalPlaybackChange](#onexternalplaybackchange)|iOS| |[onExternalPlaybackChange](#onexternalplaybackchange)|iOS|
|[onFullscreenPlayerWillPresent](#onfullscreenplayerwillpresent)|Android ExoPlayer, Android MediaPlayer, iOS| |[onFullscreenPlayerWillPresent](#onfullscreenplayerwillpresent)|Android, iOS|
|[onFullscreenPlayerDidPresent](#onfullscreenplayerdidpresent)|Android ExoPlayer, Android MediaPlayer, iOS| |[onFullscreenPlayerDidPresent](#onfullscreenplayerdidpresent)|Android, iOS|
|[onFullscreenPlayerWillDismiss](#onfullscreenplayerwilldismiss)|Android ExoPlayer, Android MediaPlayer, iOS| |[onFullscreenPlayerWillDismiss](#onfullscreenplayerwilldismiss)|Android, iOS|
|[onFullscreenPlayerDidDismiss](#onfullscreenplayerdiddismiss)|Android ExoPlayer, Android MediaPlayer, iOS| |[onFullscreenPlayerDidDismiss](#onfullscreenplayerdiddismiss)|Android, iOS|
|[onLoad](#onload)|All| |[onLoad](#onload)|All|
|[onLoadStart](#onloadstart)|All| |[onLoadStart](#onloadstart)|All|
|[onReadyForDisplay](#onreadyfordisplay)|Android ExoPlayer, Android MediaPlayer, iOS, Web| |[onReadyForDisplay](#onreadyfordisplay)|Android, iOS, Web|
|[onPictureInPictureStatusChanged](#onpictureinpicturestatuschanged)|iOS| |[onPictureInPictureStatusChanged](#onpictureinpicturestatuschanged)|iOS|
|[onPlaybackRateChange](#onplaybackratechange)|All| |[onPlaybackRateChange](#onplaybackratechange)|All|
|[onProgress](#onprogress)|All| |[onProgress](#onprogress)|All|
|[onSeek](#onseek)|Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP| |[onSeek](#onseek)|Android, iOS, Windows UWP|
|[onRestoreUserInterfaceForPictureInPictureStop](#onrestoreuserinterfaceforpictureinpicturestop)|iOS| |[onRestoreUserInterfaceForPictureInPictureStop](#onrestoreuserinterfaceforpictureinpicturestop)|iOS|
|[onTimedMetadata](#ontimedmetadata)|Android ExoPlayer, Android MediaPlayer, iOS| |[onTimedMetadata](#ontimedmetadata)|Android, iOS|
### Methods ### Methods
| Name |Plateforms Support | | Name |Plateforms Support |
|--|--| |--|--|
|[dismissFullscreenPlayer](#dismissfullscreenplayer)|Android ExoPlayer, Android MediaPlayer, iOS| |[dismissFullscreenPlayer](#dismissfullscreenplayer)|Android, iOS|
|[presentFullscreenPlayer](#presentfullscreenplayer)|Android ExoPlayer, Android MediaPlayer, iOS| |[presentFullscreenPlayer](#presentfullscreenplayer)|Android, iOS|
|[save](#save)|iOS| |[save](#save)|iOS|
|[restoreUserInterfaceForPictureInPictureStop](#restoreuserinterfaceforpictureinpicturestop)|iOS| |[restoreUserInterfaceForPictureInPictureStop](#restoreuserinterfaceforpictureinpicturestop)|iOS|
|[seek](#seek)|All| |[seek](#seek)|All|
@ -409,7 +401,7 @@ Platforms: iOS
#### backBufferDurationMs #### backBufferDurationMs
The number of milliseconds of buffer to keep before the current position. This allows rewinding without rebuffering within that duration. The number of milliseconds of buffer to keep before the current position. This allows rewinding without rebuffering within that duration.
Platforms: Android ExoPlayer Platforms: Android
#### bufferConfig #### bufferConfig
Adjust the buffer settings. This prop takes an object with one or more of the properties listed below. Adjust the buffer settings. This prop takes an object with one or more of the properties listed below.
@ -436,12 +428,12 @@ bufferConfig={{
}} }}
``` ```
Platforms: Android ExoPlayer Platforms: Android
#### currentPlaybackTime #### currentPlaybackTime
When playing an HLS live stream with a `EXT-X-PROGRAM-DATE-TIME` tag configured, then this property will contain the epoch value in msec. When 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 Platforms: Android, iOS
#### controls #### controls
Determines whether to show player controls. Determines whether to show player controls.
@ -453,30 +445,28 @@ Note on iOS, controls are always shown when in fullscreen mode.
### contentStartTime ### contentStartTime
The start time in ms for SSAI content. This determines at what time to load the video info like resolutions. Use this only when you have SSAI stream where ads resolution is not the same as content resolution. The start time in ms for SSAI content. This determines at what time to load the video info like resolutions. Use this only when you have SSAI stream where ads resolution is not the same as content resolution.
For Android MediaPlayer, you will need to build your own controls or use a package like [react-native-video-controls](https://github.com/itsnubix/react-native-video-controls) or [react-native-video-player](https://github.com/cornedor/react-native-video-player). Note on Android, native controls are available by default. If needed, you can also add your controls or use a package like [react-native-video-controls].
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, iOS, react-native-dom
Platforms: Android ExoPlayer, iOS, react-native-dom
#### disableFocus #### disableFocus
Determines whether video audio should override background music/audio in Android devices. Determines whether video audio should override background music/audio in Android devices.
* ** false (default)** - Override background audio/music * ** false (default)** - Override background audio/music
* **true** - Let background audio/music from other apps play * **true** - Let background audio/music from other apps play
Platforms: Android Exoplayer Platforms: Android
#### disableDisconnectError #### disableDisconnectError
Determines if the player needs to throw an error when connection is lost or not Determines if the player needs to throw an error when connection is lost or not
* **false (default)** - Player will throw an error when connection is lost * **false (default)** - Player will throw an error when connection is lost
* **true** - Player will keep trying to buffer when network connect is lost * **true** - Player will keep trying to buffer when network connect is lost
Platforms: Android Exoplayer Platforms: Android
### DRM ### DRM
To setup DRM please follow [this guide](./DRM.md) To setup DRM please follow [this guide](./DRM.md)
Platforms: Android Exoplayer, iOS Platforms: Android, iOS
#### filter #### filter
Add video filter Add video filter
@ -548,7 +538,7 @@ source={{
}} }}
``` ```
Platforms: Android ExoPlayer Platforms: Android
#### hideShutterView #### hideShutterView
Controls whether the ExoPlayer shutter view (black screen while loading) is enabled. Controls whether the ExoPlayer shutter view (black screen while loading) is enabled.
@ -556,7 +546,7 @@ Controls whether the ExoPlayer shutter view (black screen while loading) is enab
* **false (default)** - Show shutter view * **false (default)** - Show shutter view
* **true** - Hide shutter view * **true** - Hide shutter view
Platforms: Android ExoPlayer Platforms: Android
#### id #### id
Set the DOM id element so you can use document.getElementById on web platforms. Accepts string values. Set the DOM id element so you can use document.getElementById on web platforms. Accepts string values.
@ -586,7 +576,7 @@ Example:
maxBitRate={2000000} // 2 megabits maxBitRate={2000000} // 2 megabits
``` ```
Platforms: Android ExoPlayer, iOS Platforms: Android, iOS
#### minLoadRetryCount #### minLoadRetryCount
Sets 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. Sets 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.
@ -598,7 +588,7 @@ Example:
minLoadRetryCount={5} // retry 5 times minLoadRetryCount={5} // retry 5 times
``` ```
Platforms: Android ExoPlayer Platforms: Android
#### mixWithOthers #### mixWithOthers
Controls how Audio mix with other apps. Controls how Audio mix with other apps.
@ -638,7 +628,7 @@ To use this feature on iOS, you must:
* [Enable Background Audio](https://developer.apple.com/library/archive/documentation/Audio/Conceptual/AudioSessionProgrammingGuide/AudioSessionBasics/AudioSessionBasics.html#//apple_ref/doc/uid/TP40007875-CH3-SW3) in your Xcode project * [Enable Background Audio](https://developer.apple.com/library/archive/documentation/Audio/Conceptual/AudioSessionProgrammingGuide/AudioSessionBasics/AudioSessionBasics.html#//apple_ref/doc/uid/TP40007875-CH3-SW3) in your Xcode project
* Set the ignoreSilentSwitch prop to "ignore" * Set the ignoreSilentSwitch prop to "ignore"
Platforms: Android ExoPlayer, Android MediaPlayer, iOS Platforms: Android, iOS
#### playWhenInactive #### playWhenInactive
Determine whether the media should continue playing when notifications or the Control Center are in front of the video. Determine whether the media should continue playing when notifications or the Control Center are in front of the video.
@ -693,8 +683,6 @@ Speed at which the media should play.
Platforms: all Platforms: all
Note: For Android MediaPlayer, rate is only supported on Android 6.0 and higher devices.
#### repeat #### repeat
Determine whether to repeat the video when the end is reached Determine whether to repeat the video when the end is reached
* **false (default)** - Don't repeat the video * **false (default)** - Don't repeat the video
@ -708,7 +696,7 @@ Determine whether to generate onBandwidthUpdate events. This is needed due to th
* **false (default)** - Don't generate onBandwidthUpdate events * **false (default)** - Don't generate onBandwidthUpdate events
* **true** - Generate onBandwidthUpdate events * **true** - Generate onBandwidthUpdate events
Platforms: Android ExoPlayer Platforms: Android
#### resizeMode #### resizeMode
Determines how to resize the video when the frame doesn't match the raw video dimensions. Determines how to resize the video when the frame doesn't match the raw video dimensions.
@ -717,7 +705,7 @@ Determines how to resize the video when the frame doesn't match the raw video di
* **"cover"** - Scale the video uniformly (maintain the video's 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). * **"cover"** - Scale the video uniformly (maintain the video's 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 height independently, This may change the aspect ratio of the src. * **"stretch"** - Scale width and height independently, This may change the aspect ratio of the src.
Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP Platforms: Android, iOS, Windows UWP
#### selectedAudioTrack #### selectedAudioTrack
Configure which audio track, if any, is played. Configure which audio track, if any, is played.
@ -747,7 +735,7 @@ Type | Value | Description
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. 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 Platforms: Android, iOS
#### selectedTextTrack #### selectedTextTrack
Configure which text track (caption or subtitle), if any, is shown. Configure which text track (caption or subtitle), if any, is shown.
@ -779,7 +767,7 @@ Both iOS & Android (only 4.4 and higher) offer Settings to enable Captions for h
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. 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 Platforms: Android, iOS
#### selectedVideoTrack #### selectedVideoTrack
Configure 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. Configure 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.
@ -808,7 +796,7 @@ Type | Value | Description
If a track matching the specified Type (and Value if appropriate) is unavailable, ABR will be used. If a track matching the specified Type (and Value if appropriate) is unavailable, ABR will be used.
Platforms: Android ExoPlayer Platforms: Android
#### source #### source
Sets the media source. You can pass an asset loaded via require or an object with a uri. Sets the media source. You can pass an asset loaded via require or an object with a uri.
@ -853,7 +841,7 @@ 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. 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 Platforms: Android, possibly others
###### iPod Library (ipod-library://) ###### iPod Library (ipod-library://)
@ -885,14 +873,6 @@ The following other types are supported on some platforms, but aren't fully docu
`content://, ms-appx://, ms-appdata://, assets-library://` `content://, ms-appx://, ms-appdata://, assets-library://`
#### stereoPan
Adjust the balance of the left and right audio channels. Any value between –1.0 and 1.0 is accepted.
* **-1.0** - Full left
* **0.0 (default)** - Center
* **1.0** - Full right
Platforms: Android MediaPlayer
#### textTracks #### textTracks
Load one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format: Load one or more "sidecar" text tracks. This takes an array of objects representing each track. Each object should have the format:
@ -900,7 +880,7 @@ Property | Description
--- | --- --- | ---
title | Descriptive name for the track title | Descriptive name for the track
language | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language language | 2 letter [ISO 639-1 code](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) representing the language
type | Mime type of the track<br> * TextTrackType.SRT - SubRip (.srt)<br> * TextTrackType.TTML - TTML (.ttml)<br> * TextTrackType.VTT - WebVTT (.vtt)<br>iOS only supports VTT, Android ExoPlayer supports all 3 type | Mime type of the track<br> * TextTrackType.SRT - SubRip (.srt)<br> * TextTrackType.TTML - TTML (.ttml)<br> * TextTrackType.VTT - WebVTT (.vtt)<br>iOS only supports VTT, Android supports all 3
uri | URL for the text track. Currently, only tracks hosted on a webserver are supported 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 as part of the playlist. 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.
@ -928,12 +908,12 @@ textTracks={[
``` ```
Platforms: Android ExoPlayer, iOS Platforms: Android, iOS
#### trackId #### trackId
Configure an identifier for the video stream to link the playback context to the events emitted. Configure an identifier for the video stream to link the playback context to the events emitted.
Platforms: Android ExoPlayer Platforms: Android
#### useTextureView #### useTextureView
Controls whether to output to a TextureView or SurfaceView. Controls whether to output to a TextureView or SurfaceView.
@ -947,7 +927,7 @@ useTextureView can only be set at same time you're setting the source.
* **true (default)** - Use a TextureView * **true (default)** - Use a TextureView
* **false** - Use a SurfaceView * **false** - Use a SurfaceView
Platforms: Android ExoPlayer Platforms: Android
#### useSecureView #### useSecureView
Force the output to a SurfaceView and enables the secure surface. Force the output to a SurfaceView and enables the secure surface.
@ -959,7 +939,7 @@ SurfaceView is is the only one that can be labeled as secure.
* **true** - Use security * **true** - Use security
* **false (default)** - Do not use security * **false (default)** - Do not use security
Platforms: Android ExoPlayer Platforms: Android
#### volume #### volume
Adjust the volume. Adjust the volume.
@ -989,7 +969,7 @@ Callback function that is called when the audio is about to become 'noisy' due t
Payload: none Payload: none
Platforms: Android ExoPlayer, iOS Platforms: Android, iOS
#### onBandwidthUpdate #### onBandwidthUpdate
Callback function that is called when the available bandwidth changes. Callback function that is called when the available bandwidth changes.
@ -1007,9 +987,9 @@ Example:
} }
``` ```
Note: On Android ExoPlayer, you must set the [reportBandwidth](#reportbandwidth) prop to enable this event. This is due to the high volume of events generated. Note: On Android, you must set the [reportBandwidth](#reportbandwidth) prop to enable this event. This is due to the high volume of events generated.
Platforms: Android ExoPlayer Platforms: Android
#### onBuffer #### onBuffer
Callback function that is called when the player buffers. Callback function that is called when the player buffers.
@ -1027,7 +1007,7 @@ Example:
} }
``` ```
Platforms: Android ExoPlayer, iOS Platforms: Android, iOS
#### onEnd #### onEnd
Callback function that is called when the player reaches the end of the media. Callback function that is called when the player reaches the end of the media.
@ -1059,28 +1039,28 @@ Callback function that is called when the player is about to enter fullscreen mo
Payload: none Payload: none
Platforms: Android ExoPlayer, Android MediaPlayer, iOS Platforms: Android, iOS
#### onFullscreenPlayerDidPresent #### onFullscreenPlayerDidPresent
Callback function that is called when the player has entered fullscreen mode. Callback function that is called when the player has entered fullscreen mode.
Payload: none Payload: none
Platforms: Android ExoPlayer, Android MediaPlayer, iOS Platforms: Android, iOS
#### onFullscreenPlayerWillDismiss #### onFullscreenPlayerWillDismiss
Callback function that is called when the player is about to exit fullscreen mode. Callback function that is called when the player is about to exit fullscreen mode.
Payload: none Payload: none
Platforms: Android ExoPlayer, Android MediaPlayer, iOS Platforms: Android, iOS
#### onFullscreenPlayerDidDismiss #### onFullscreenPlayerDidDismiss
Callback function that is called when the player has exited fullscreen mode. Callback function that is called when the player has exited fullscreen mode.
Payload: none Payload: none
Platforms: Android ExoPlayer, Android MediaPlayer, iOS Platforms: Android, iOS
#### onLoad #### onLoad
Callback function that is called when the media is loaded and ready to play. Callback function that is called when the media is loaded and ready to play.
@ -1169,7 +1149,7 @@ Example:
} }
``` ```
Platforms: Android ExoPlayer Platforms: Android
#### onReadyForDisplay #### onReadyForDisplay
Callback function that is called when the first video frame is ready for display. This is when the poster is removed. Callback function that is called when the first video frame is ready for display. This is when the poster is removed.
@ -1177,10 +1157,9 @@ Callback function that is called when the first video frame is ready for display
Payload: none Payload: none
* iOS: [readyForDisplay](https://developer.apple.com/documentation/avkit/avplayerviewcontroller/1615830-readyfordisplay?language=objc) * iOS: [readyForDisplay](https://developer.apple.com/documentation/avkit/avplayerviewcontroller/1615830-readyfordisplay?language=objc)
* Android: [MEDIA_INFO_VIDEO_RENDERING_START](https://developer.android.com/reference/android/media/MediaPlayer#MEDIA_INFO_VIDEO_RENDERING_START) * Android [STATE_READY](https://exoplayer.dev/doc/reference/com/google/android/exoplayer2/Player.html#STATE_READY)
* Android ExoPlayer [STATE_READY](https://exoplayer.dev/doc/reference/com/google/android/exoplayer2/Player.html#STATE_READY)
Platforms: Android ExoPlayer, Android MediaPlayer, iOS, Web Platforms: Android, iOS, Web
#### onPictureInPictureStatusChanged #### onPictureInPictureStatusChanged
Callback function that is called when picture in picture becomes active or inactive. Callback function that is called when picture in picture becomes active or inactive.
@ -1256,7 +1235,7 @@ Example:
Both the currentTime & seekTime are reported because the video player may not seek to the exact requested position in order to improve seek performance. 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 Platforms: Android, iOS, Windows UWP
#### onRestoreUserInterfaceForPictureInPictureStop #### onRestoreUserInterfaceForPictureInPictureStop
Callback function that corresponds to Apple's [`restoreUserInterfaceForPictureInPictureStopWithCompletionHandler`](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). Call `restoreUserInterfaceForPictureInPictureStopCompleted` inside of this function when done restoring the user interface. Callback function that corresponds to Apple's [`restoreUserInterfaceForPictureInPictureStopWithCompletionHandler`](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). Call `restoreUserInterfaceForPictureInPictureStopCompleted` inside of this function when done restoring the user interface.
@ -1285,9 +1264,7 @@ Example:
} }
``` ```
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, iOS
Platforms: Android ExoPlayer, Android MediaPlayer, iOS
### Methods ### Methods
Methods operate on a ref to the Video element. You can create a ref using code like: Methods operate on a ref to the Video element. You can create a ref using code like:
@ -1308,7 +1285,7 @@ Example:
this.player.dismissFullscreenPlayer(); this.player.dismissFullscreenPlayer();
``` ```
Platforms: Android ExoPlayer, Android MediaPlayer, iOS Platforms: Android, iOS
#### presentFullscreenPlayer #### presentFullscreenPlayer
`presentFullscreenPlayer()` `presentFullscreenPlayer()`
@ -1317,14 +1294,14 @@ Put the player in fullscreen mode.
On iOS, this displays the video in a fullscreen view controller with controls. 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. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video. On Android, this puts the navigation controls in fullscreen mode. It is not a complete fullscreen implementation, so you will still need to apply a style that makes the width and height match your screen dimensions to get a fullscreen video.
Example: Example:
``` ```
this.player.presentFullscreenPlayer(); this.player.presentFullscreenPlayer();
``` ```
Platforms: Android ExoPlayer, Android MediaPlayer, iOS Platforms: Android, iOS
#### save #### save
`save(): Promise` `save(): Promise`
@ -1539,7 +1516,7 @@ android {
``` ```
#### ExoPlayer no longer detaches #### 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 detach the view, allowing the video to continue playing in a background tab. This matches the behavior for iOS. Android MediaPlayer will crash if it detaches when switching routes, so its behavior has not been changed. 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 detach the view, allowing the video to continue playing in a background tab. This matches the behavior for iOS.
#### useTextureView now defaults to true #### useTextureView now defaults to true
The SurfaceView, which ExoPlayer has been using by default has a number of quirks that people are unaware of and often cause issues. This includes not supporting animations or scaling. It also causes strange behavior if you overlay two videos on top of each other, because the SurfaceView will [punch a hole](https://developer.android.com/reference/android/view/SurfaceView) through other views. Since TextureView doesn't have these issues and behaves in the way most developers expect, it makes sense to make it the default. The SurfaceView, which ExoPlayer has been using by default has a number of quirks that people are unaware of and often cause issues. This includes not supporting animations or scaling. It also causes strange behavior if you overlay two videos on top of each other, because the SurfaceView will [punch a hole](https://developer.android.com/reference/android/view/SurfaceView) through other views. Since TextureView doesn't have these issues and behaves in the way most developers expect, it makes sense to make it the default.

1
Video.js
View File

@ -473,7 +473,6 @@ Video.propTypes = {
bufferForPlaybackAfterRebufferMs: PropTypes.number, bufferForPlaybackAfterRebufferMs: PropTypes.number,
maxHeapAllocationPercent: PropTypes.number, maxHeapAllocationPercent: PropTypes.number,
}), }),
stereoPan: PropTypes.number,
rate: PropTypes.number, rate: PropTypes.number,
pictureInPicture: PropTypes.bool, pictureInPicture: PropTypes.bool,
playInBackground: PropTypes.bool, playInBackground: PropTypes.bool,

2
examples/basic/android/settings.gradle
View File

@ -1,5 +1,5 @@
rootProject.name = 'VideoPlayer' rootProject.name = 'VideoPlayer'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':react-native-video' include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer') project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
include ':app' include ':app'

1
package.json
View File

@ -30,7 +30,6 @@
"xbasic": "yarn --cwd examples/basic" "xbasic": "yarn --cwd examples/basic"
}, },
"files": [ "files": [
"android-exoplayer",
"android", "android",
"dom", "dom",
"ios", "ios",