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

feat: move docs to github pages (#3296)

Browse Source 
* feat(docs): setup nextra

* feat(docs): add pages

* docs: update introduction page

* docs: fix typos

* docs: fix links

* docs: update README

* docs: sync with master

* docs: remove old docs

* fix(ci/docs): fix typos

* fix(ci/docs): fix docs setup

* fix(docs): update next config

* chore(ci/docs): clean up

* chore(docs): add meta tags

* chore: apply review changes

* docs: move drm into api section

* docs: fix next config

* docs: fix links

* docs: add methods section

* chore: sync with main

* docs: add missing onAudio events
This commit is contained in:
Krzysztof Moch
2023-10-26 08:54:14 +02:00
committed by GitHub
parent 0f8467f51d
commit 85e30f0335
32 changed files with 2289 additions and 1992 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/pages/other/_meta.json Normal file
View File

@@ -0,0 +1,5 @@
{
"caching": "Caching",
"misc": "Misc",
"debug": "Debugging"
}

22
docs/pages/other/caching.md Normal file
View File

@@ -0,0 +1,22 @@
# Caching
Caching is currently only supported on `iOS` platforms with a CocoaPods setup.
## Technology
The cache is backed by [SPTPersistentCache](https://github.com/spotify/SPTPersistentCache) and [DVAssetLoaderDelegate](https://github.com/vdugnist/DVAssetLoaderDelegate).
## How Does It Work
The caching is based on the url of the asset.
SPTPersistentCache is a LRU ([Least Recently Used](https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU))) cache.
## Restrictions
Currently, caching is only supported for URLs that end in a `.mp4`, `.m4v`, or `.mov` extension. In future versions, URLs that end in a query string (e.g. test.mp4?resolution=480p) will be support once dependencies allow access to the `Content-Type` header. At this time, HLS playlists (.m3u8) and videos that sideload text tracks are not supported and will bypass the cache.
You will also receive warnings in the Xcode logs by using the `debug` mode. So if you are not 100% sure if your video is cached, check your Xcode logs!
By default files expire after 30 days and the maximum cache size is 100mb.
In a future release the cache might have more configurable options.

47
docs/pages/other/debug.md Normal file
View File

@@ -0,0 +1,47 @@
# Debugging
## HTTP playback doesn't work or Black Screen on Release build (Android)
If your video work on Debug mode, but on Release you see only black screen, please, check the link to your video. If you use 'http' protocol there, you will need to add next string to your AndroidManifest.xml file. [Details here](https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic)
```xml
<application
...
android:usesCleartextTraffic="true"
>
```
## Decoder Issue (Android)
Devices have a maximum of simultaneous possible playback. It means you have reach this limit. Exoplayer returns: 'Unable to instantiate decoder'
**known issue**: This issue happen really often in debug mode.
## You cannot play clean content (all OS)
Here are the steps to consider before opening a ticket in issue tracker
## Check you can access to remote file
Ensure you can download to manifest / content file with a browser for example
## Check another player can read the content
Usually clear playback can be read with all Video player. Then you should ensure content can be played without any issue with another player ([VideoLan/VLC](https://www.videolan.org/vlc/) is a good reference implementation)
## You cannot play protected content (all OS)
## Protected content gives error (token error / access forbidden)
If content is protected with an access token or any other http header, ensure you can access to you data with a wget call or a rest client app. You need to provide all needed access token / authentication parameters.
## Everything seems correct but content cannot be accessed
You need to record network trace to ensure communications with server is correct.
[Charles proxy](https://www.charlesproxy.com/) is a simple and useful tool to sniff all http/https calls.
With this tool you should be able to analyze what is going on with network. You will see all access to content and DRM, audio / video chunks, ...
Then try to compare exchanges with previous tests you made.
## It's still not working
You can try to open a ticket now !

78
docs/pages/other/misc.md Normal file
View File

@@ -0,0 +1,78 @@
# Miscellaneous
## iOS App Transport Security
- By default, iOS will only load encrypted (https) urls. If you want to load content from an unencrypted (http) source, you will need to modify your Info.plist file and add the following entry:
![App Transport Security](../../assets/AppTransportSecuritySetting.png)
For more detailed info check this [article](https://cocoacasts.com/how-to-add-app-transport-security-exception-domains)
</details>
## Audio Mixing
At some point in the future, react-native-video will include an Audio Manager for configuring how videos mix with other apps playing sounds on the device.
On iOS, if you would like to allow other apps to play music over your video component, make the following change:
**AppDelegate.m**
```objective-c
#import <AVFoundation/AVFoundation.h> // import
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil]; // allow
...
}
```
You can also use the [ignoreSilentSwitch](#ignoresilentswitch) prop.
</details>
## Android Expansion File Usage
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
```
```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
The asset system [introduced in RN `0.14`](http://www.reactnative.com/react-native-v0-14-0-released/) allows loading image resources shared across iOS and Android without touching native code. As of RN `0.31` [the same is true](https://github.com/facebook/react-native/commit/91ff6868a554c4930fd5fda6ba8044dbd56c8374) of mp4 video assets for Android. As of [RN `0.33`](https://github.com/facebook/react-native/releases/tag/v0.33.0) iOS is also supported. Requires `react-native-video@0.9.0`.
```javascript
<Video
source={require('../assets/video/turntable.mp4')}
/>
```
## Play in background on iOS
To enable audio to play in background on iOS the audio session needs to be set to `AVAudioSessionCategoryPlayback`. See [Apple documentation][3] for additional details. (NOTE: there is now a ticket to [expose this as a prop]( https://github.com/react-native-community/react-native-video/issues/310) )
## Examples
- See an [Example integration][1] in `react-native-login` *note that this example uses an older version of this library, before we used `export default` -- if you use `require` you will need to do `require('react-native-video').default` as per instructions above.*
- Try the included [VideoPlayer example][2] yourself:
```sh
git clone git@github.com:react-native-community/react-native-video.git
cd react-native-video/example
npm install
open ios/VideoPlayer.xcodeproj
```
Then `Cmd+R` to start the React Packager, build and run the project in the simulator.
- [Lumpen Radio](https://github.com/jhabdas/lumpen-radio) contains another example integration using local files and full screen background video.