react-native-video
Advanced tools
Comparing version 2.3.1 to 3.0.0
## Changelog | ||
### Version 3.0 | ||
* Inherit Android buildtools and SDK version from the root project [#1081](https://github.com/react-native-community/react-native-video/pull/1081) | ||
* Automatically play on ExoPlayer when the paused prop is not set [#1083](https://github.com/react-native-community/react-native-video/pull/1083) | ||
* Preserve Android MediaPlayer paused prop when backgrounding [#1082](https://github.com/react-native-community/react-native-video/pull/1082) | ||
* Support specifying headers on ExoPlayer as part of the source [#805](https://github.com/react-native-community/react-native-video/pull/805) | ||
* Prevent iOS onLoad event during seeking [#1088](https://github.com/react-native-community/react-native-video/pull/1088) | ||
* ExoPlayer playableDuration incorrect [#1089](https://github.com/react-native-community/react-native-video/pull/1089) | ||
### Version 2.3.1 | ||
@@ -4,0 +12,0 @@ * Revert PR to inherit Android SDK versions from root project. Re-add in 3.0 [#1080](https://github.com/react-native-community/react-native-video/pull/1080) |
{ | ||
"name": "react-native-video", | ||
"version": "2.3.1", | ||
"version": "3.0.0", | ||
"description": "A <Video /> element for react-native", | ||
@@ -5,0 +5,0 @@ "main": "Video.js", |
117
README.md
@@ -8,2 +8,5 @@ ## react-native-video | ||
### Version 3.0 breaking changes | ||
Version 3.0 features a number of changes to existing behavior. See [Updating](#updating) for changes. | ||
## TOC | ||
@@ -13,2 +16,3 @@ | ||
* [Usage](#usage) | ||
* [Updating](#updating) | ||
@@ -56,3 +60,3 @@ ## Installation | ||
`react-native link` don’t works properly with the tvOS target so we need to add the library manually. | ||
`react-native link` doesn’t work properly with the tvOS target so we need to add the library manually. | ||
@@ -197,4 +201,2 @@ First select your project in Xcode. | ||
onFullscreenPlayerDidDismiss={this.fullScreenPlayerDidDismiss} // Callback after fullscreen stopped | ||
onProgress={this.setTime} // Callback every ~250ms with currentTime | ||
onTimedMetadata={this.onTimedMetadata} // Callback when the stream receive some metadata | ||
style={styles.backgroundVideo} /> | ||
@@ -246,2 +248,4 @@ | ||
* [onLoadStart](#onloadstart) | ||
* [onProgress](#onprogress) | ||
* [onTimedMetadata](#ontimedmetadata) | ||
@@ -500,5 +504,5 @@ ### Methods | ||
--- | --- | ||
isNetwork | Boolean indicating if the media is being loaded from the network | ||
type | Type of the media. Not available on Windows | ||
uri | URI for the media source. Not available on Windows | ||
isNetwork | boolean | Boolean indicating if the media is being loaded from the network | ||
type | string | Type of the media. Not available on Windows | ||
uri | string | URI for the media source. Not available on Windows | ||
@@ -516,2 +520,42 @@ Example: | ||
#### onProgress | ||
Callback function that is called every progressInterval seconds with info about which position the media is currently playing. | ||
Property | Description | ||
--- | --- | ||
currentTime | number | Current position in seconds | ||
playableDuration | number | Position to where the media can be played to using just the buffer in seconds | ||
seekableDuration | number | Position to where the media can be seeked to in seconds. Typically, the total length of the media | ||
Example: | ||
``` | ||
{ | ||
currentTime: 5.2, | ||
playableDuration: 34.6, | ||
seekableDuration: 888 | ||
} | ||
``` | ||
#### onTimedMetadata | ||
Callback function that is called when timed metadata becomes available | ||
Payload: | ||
Property | Type | Description | ||
--- | --- | --- | ||
metadata | array | Array of metadata objects | ||
Example: | ||
``` | ||
{ | ||
metadata: [ | ||
{ value: 'Streaming Encoder', identifier: 'TRSN' }, | ||
{ value: 'Internet Stream', identifier: 'TRSO' }, | ||
{ value: 'Any Time You Like', identifier: 'TIT2' } | ||
] | ||
} | ||
``` | ||
Platforms: Android ExoPlayer, iOS | ||
### Methods | ||
@@ -568,11 +612,16 @@ Methods operate on a ref to the Video element. You can create a ref using code like: | ||
### Android Expansion File Usage | ||
Within your render function, assuming you have a file called | ||
"background.mp4" in your expansion file. Just add your main and (if applicable) patch version | ||
Expansions files allow you to ship assets that exceed the 100MB apk size limit and don't need to be updated each time you push an app update. | ||
This only supports mp4 files and they must not be compressed. Example command line for preventing compression: | ||
```bash | ||
zip -r -n .mp4 *.mp4 player.video.example.com | ||
``` | ||
<Video | ||
source={{uri: "background", mainVer: 1, patchVer: 0}} | ||
/> | ||
``` | ||
This will look for an .mp4 file (background.mp4) in the given expansion version. | ||
```javascript | ||
// Within your render function, assuming you have a file called | ||
// "background.mp4" in your expansion file. Just add your main and (if applicable) patch version | ||
<Video source={{uri: "background", mainVer: 1, 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 Asset System | ||
@@ -609,5 +658,45 @@ | ||
## Updating | ||
### Version 3.0 | ||
#### All platforms now auto-play | ||
Previously, on Android ExoPlayer if the paused prop was not set, the media would not automatically start playing. The only way it would work was if you set `paused={false}`. This has been changed to automatically play if paused is not set so that the behavior is consistent across platforms. | ||
#### All platforms now keep their paused state when returning from the background | ||
Previously, on Android MediaPlayer if you setup an AppState event when the app went into the background and set a paused prop so that when you returned to the app the video would be paused it would be ignored. | ||
Note, Windows does not have a concept of an app going into the background, so this doesn't apply there. | ||
#### Use Android SDK 27 by default | ||
Version 3.0 updates the Android build tools and SDK to version 27. React Native is in the process of [switchting over](https://github.com/facebook/react-native/issues/18095#issuecomment-395596130) to SDK 27 in preparation for Google's requirement that new Android apps [use SDK 26](https://android-developers.googleblog.com/2017/12/improving-app-security-and-performance.html) by August 2018. | ||
You will either need to install the version 27 SDK and version 27.0.3 buildtools or modify your build.gradle file to configure react-native-video to use the same build settings as the rest of your app as described below. | ||
##### Using app build settings | ||
You will need to create a `project.ext` section 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 you can add configuration options common to all sub-projects/modules. | ||
buildscript { | ||
... // Various other settings go here | ||
} | ||
allprojects { | ||
... // Various other settings go 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 Support Repository. | ||
## TODOS | ||
- [ ] Add support for captions | ||
- [ ] Add support for playing multiple videos in a sequence (will interfere with current `repeat` implementation) | ||
@@ -614,0 +703,0 @@ - [x] Callback to get buffering progress for remote videos |
24
Video.js
@@ -29,3 +29,26 @@ import React, {Component} from 'react'; | ||
} | ||
toTypeString(x) { | ||
switch (typeof x) { | ||
case "object": | ||
return x instanceof Date | ||
? x.toISOString() | ||
: JSON.stringify(x); // object, null | ||
case "undefined": | ||
return ""; | ||
default: // boolean, number, string | ||
return x.toString(); | ||
} | ||
} | ||
stringsOnlyObject(obj) { | ||
const strObj = {}; | ||
Object.keys(obj).forEach(x => { | ||
strObj[x] = this.toTypeString(obj[x]); | ||
}); | ||
return strObj; | ||
} | ||
seek = (time, tolerance = 100) => { | ||
@@ -206,2 +229,3 @@ if (Platform.OS === 'ios') { | ||
patchVer: source.patchVer || 0, | ||
requestHeaders: source.headers ? this.stringsOnlyObject(source.headers) : {} | ||
}, | ||
@@ -208,0 +232,0 @@ onVideoLoadStart: this._onLoadStart, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
560365
3508
704