69a7bc2d26
* docs: enable Android PIP * chore: change comments * feat(android): implement Android PictureInPicture * refactor: minor refactor code and apply lint * fix: rewrite pip action intent code for Android14 * fix: remove redundant codes * feat: add isInPictureInPicture flag for lifecycle handling - activity provide helper method for same purpose, but this flag makes code simple * feat: add pipFullscreenPlayerView for makes PIP include video only * fix: add manifest value checker for prevent crash * docs: add pictureInPicture prop's Android guide * fix: sync controller visibility * refactor: refining variable name * fix: check multi window mode when host pause - some OS version call onPause on multi-window mode * fix: handling when onStop is called while in multi-window mode * refactor: enhance PIP util codes * fix: fix FullscreenPlayerView constructor * refactor: add enterPictureInPictureOnLeave prop and pip methods - remove pictureInPicture boolean prop - add enterPictureInPictureOnLeave boolean prop - add enterPictureInPicture method - add exitPictureInPicture method * fix: fix lint error * fix: prevent audio play in background without playInBackground prop * fix: fix onDetachedFromWindow * docs: update docs for pip * fix(android): sync pip controller with external controller state - for media session * fix(ios): fix pip active fn variable reference * refactor(ios): refactor code * refactor(android): refactor codes * fix(android): fix lint error * refactor(android): refactor android pip logics * fix(android): fix flickering issue when stop picture in picture * fix(android): fix import * fix(android): fix picture in picture with fullscreen mode * fix(ios): fix syntax error * fix(android): fix Fragment managed code * refactor(android): remove redundant override lifecycle * fix(js): add PIP type definition for codegen * fix(android): fix syntax * chore(android): fix lint error * fix(ios): fix enter background handler * refactor(ios): remove redundant code * fix(ios): fix applicationDidEnterBackground for PIP * fix(android): fix onPictureInPictureStatusChanged * fix(ios): fix RCTPictureInPicture * refactor(android): Ignore exception for some device ignore pip checker - some device ignore PIP availability check, so we need to handle exception to prevent crash * fix(android): add hideWithoutPlayer fn into Kotlin ver * refactor(android): remove redundant code * fix(android): fix pip ratio to be calculated with correct ratio value * fix(android): fix crash issue when unmounting in PIP mode * fix(android): fix lint error * Update android/src/main/java/com/brentvatne/react/VideoManagerModule.kt * fix(android): fix lint error * fix(ios): fix lint error * fix(ios): fix lint error * feat(expo): add android picture in picture config within expo plugin * fix: Replace Fragment with androidx.activity - remove code that uses Fragment, which is a tricky implementation * fix: fix lint error * fix(android): disable auto enter when player released * fix(android): fix event handler to check based on Activity it's bound to --------- Co-authored-by: jonghun <jonghun@toss.im> Co-authored-by: Olivier Bouillet <62574056+freeboub@users.noreply.github.com>
286 lines
8.7 KiB
Plaintext
286 lines
8.7 KiB
Plaintext
import PlatformsList from '../../components/PlatformsList/PlatformsList.tsx';
|
|
|
|
# Methods
|
|
|
|
This page shows the list of available methods
|
|
|
|
### `dismissFullscreenPlayer`
|
|
|
|
<PlatformsList types={['Android', 'iOS', 'web']} />
|
|
|
|
`dismissFullscreenPlayer(): Promise<void>`
|
|
|
|
Take the player out of fullscreen mode.
|
|
|
|
> [!WARNING]
|
|
> deprecated, use setFullScreen method instead
|
|
|
|
### `pause`
|
|
|
|
<PlatformsList types={['Android', 'iOS', 'web']} />
|
|
|
|
`pause(): Promise<void>`
|
|
|
|
Pause the video.
|
|
|
|
### `presentFullscreenPlayer`
|
|
|
|
<PlatformsList types={['Android', 'iOS', 'web']} />
|
|
|
|
`presentFullscreenPlayer(): Promise<void>`
|
|
|
|
Put the player in fullscreen mode.
|
|
|
|
On iOS, this displays the video in a fullscreen view controller with controls.
|
|
|
|
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.
|
|
|
|
> [!WARNING]
|
|
> deprecated, use setFullScreen method instead
|
|
|
|
### `resume`
|
|
|
|
<PlatformsList types={['Android', 'iOS', 'web']} />
|
|
|
|
`resume(): Promise<void>`
|
|
|
|
Resume the video.
|
|
|
|
### `restoreUserInterfaceForPictureInPictureStopCompleted`
|
|
|
|
<PlatformsList types={['iOS']} />
|
|
|
|
`restoreUserInterfaceForPictureInPictureStopCompleted(restored)`
|
|
|
|
This function corresponds to the completion handler in Apple's [restoreUserInterfaceForPictureInPictureStop](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). IMPORTANT: This function must be called after `onRestoreUserInterfaceForPictureInPictureStop` is called.
|
|
|
|
### `save`
|
|
|
|
<PlatformsList types={['iOS']} />
|
|
|
|
`save(): Promise<{ uri: string }>`
|
|
|
|
Save video to your Photos with current filter prop. Returns promise.
|
|
|
|
Notes:
|
|
|
|
- Currently only supports highest quality export
|
|
- Currently only 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 as well. (Checkout video-caching example)
|
|
- If the video is has not began buffering (e.g. there is no internet connection) then the save function will throw an error.
|
|
- If the video is buffering then the save function promise will return after the video has finished buffering and processing.
|
|
|
|
Future:
|
|
|
|
- Will support multiple qualities through options
|
|
- Will support more formats in the future through options
|
|
- Will support custom directory and file name through options
|
|
|
|
### `enterPictureInPicture`
|
|
|
|
<PlatformsList types={['Android', 'iOS']} />
|
|
|
|
`enterPictureInPicture()`
|
|
|
|
To use this feature on Android with Expo, you must set 'enableAndroidPictureInPicture' true within expo plugin config (app.json)
|
|
|
|
```json
|
|
"plugins": [
|
|
[
|
|
"react-native-video",
|
|
{
|
|
"enableAndroidPictureInPicture": true,
|
|
}
|
|
]
|
|
]
|
|
```
|
|
|
|
To use this feature on Android with Bare React Native, you must:
|
|
|
|
- [Declare PiP support](https://developer.android.com/develop/ui/views/picture-in-picture#declaring) in your AndroidManifest.xml
|
|
- setting `android:supportsPictureInPicture` to `true`
|
|
|
|
```xml
|
|
<activity
|
|
android:name=".MainActivity"
|
|
...
|
|
android:supportsPictureInPicture="true">
|
|
```
|
|
|
|
NOTE: Foreground picture in picture is not supported on Android due to limitations of react native (Single Activity App). So, If you call `enterPictureInPicture`, application will switch to background on Android.
|
|
NOTE: Video ads cannot start when you are using the PIP on iOS (more info available at [Google IMA SDK Docs](https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side/picture_in_picture?hl=en#starting_ads)). If you are using custom controls, you must hide your PIP button when you receive the `STARTED` event from `onReceiveAdEvent` and show it again when you receive the `ALL_ADS_COMPLETED` event.
|
|
|
|
### `exitPictureInPicture`
|
|
|
|
<PlatformsList types={['Android', 'iOS']} />
|
|
|
|
`exitPictureInPicture()`
|
|
|
|
Exits the active picture in picture; if it is not active, the function call is ignored.
|
|
|
|
### `restoreUserInterfaceForPictureInPictureStopCompleted`
|
|
|
|
<PlatformsList types={['iOS']} />
|
|
|
|
`restoreUserInterfaceForPictureInPictureStopCompleted(restored)`
|
|
|
|
This function corresponds to the completion handler in Apple's [restoreUserInterfaceForPictureInPictureStop](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc). IMPORTANT: This function must be called after `onRestoreUserInterfaceForPictureInPictureStop` is called.
|
|
|
|
### `seek`
|
|
|
|
<PlatformsList types={['All']} />
|
|
|
|
`seek(seconds)`
|
|
|
|
Seek to the specified position represented by seconds. seconds is a float value.
|
|
|
|
`seek()` can only be called after the `onLoad` event has fired. Once completed, the [onSeek](./events#onseek) event will be called.
|
|
|
|
#### Exact seek
|
|
|
|
<PlatformsList types={['iOS']} />
|
|
|
|
By default iOS seeks within 100 milliseconds of the target position. If you need more accuracy, you can 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 can cause seeks to take longer. If you want to seek exactly, set tolerance to 0.
|
|
|
|
### `setVolume`
|
|
|
|
<PlatformsList types={['Android', 'iOS', 'web']} />
|
|
|
|
`setVolume(value): Promise<void>`
|
|
|
|
This function will change the volume exactly like [volume](./props#volume) property. default value and range are the same then.
|
|
|
|
### `getCurrentPosition`
|
|
|
|
<PlatformsList types={['Android', 'iOS', 'web']} />
|
|
|
|
`getCurrentPosition(): Promise<number>`
|
|
|
|
This function retrieves and returns the precise current position of the video playback, measured in seconds.
|
|
This function will throw an error if player is not initialized.
|
|
|
|
|
|
### `setSource`
|
|
|
|
<PlatformsList types={['Android', 'iOS']} />
|
|
|
|
`setSource(source: ReactVideoSource): Promise<void>`
|
|
|
|
This function will change the source exactly like [source](./props#source) property.
|
|
Changing source with this function will overide source provided as props.
|
|
|
|
### `setFullScreen`
|
|
|
|
<PlatformsList types={['Android', 'iOS', 'web']} />
|
|
|
|
`setFullScreen(fullscreen): Promise<void>`
|
|
|
|
If you set it to `true`, the player enters fullscreen mode. If you set it to `false`, the player exits fullscreen mode.
|
|
|
|
On iOS, this displays the video in a fullscreen view controller with controls.
|
|
|
|
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.
|
|
|
|
### `nativeHtmlVideoRef`
|
|
|
|
<PlatformsList types={['web']} />
|
|
|
|
A ref to the underlying html video element. This can be used if you need to integrate a 3d party, web only video library (like hls.js, shaka, video.js...).
|
|
|
|
|
|
### Example Usage
|
|
|
|
```tsx
|
|
const videoRef = useRef<VideoRef>(null);
|
|
|
|
const someCoolFunctions = async () => {
|
|
if (!videoRef.current) {
|
|
return;
|
|
}
|
|
|
|
// present or dismiss fullscreen player
|
|
videoRef.current.presentFullscreenPlayer();
|
|
videoRef.current.dismissFullscreenPlayer();
|
|
|
|
// pause or resume the video
|
|
videoRef.current.pause();
|
|
videoRef.current.resume();
|
|
|
|
// save video to your Photos with current filter prop
|
|
const response = await videoRef.current.save();
|
|
const path = response.uri;
|
|
|
|
// seek to the specified position represented by seconds
|
|
videoRef.current.seek(200);
|
|
// or on iOS you can seek with tolerance
|
|
videoRef.current.seek(200, 10);
|
|
};
|
|
|
|
return (
|
|
<Video
|
|
ref={videoRef}
|
|
source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
|
|
/>
|
|
);
|
|
```
|
|
|
|
## Static methods
|
|
|
|
### `getWidevineLevel`
|
|
|
|
<PlatformsList types={['Android']} />
|
|
|
|
Indicates whether the widevine level supported by device.
|
|
|
|
Possible values are:
|
|
|
|
- 0 - unable to determine widevine support (typically not supported)
|
|
- 1, 2, 3 - Widevine level supported
|
|
|
|
### `isCodecSupported`
|
|
|
|
<PlatformsList types={['Android', 'web']} />
|
|
|
|
Indicates whether the provided codec is supported level supported by device.
|
|
|
|
parameters:
|
|
|
|
- `mimetype`: mime type of codec to query
|
|
- `width`, `height`: resolution to query
|
|
|
|
Possible results:
|
|
|
|
- `hardware` - codec is supported by hardware
|
|
- `software` - codec is supported by software only
|
|
- `unsupported` - codec is not supported
|
|
|
|
### `isHEVCSupported`
|
|
|
|
<PlatformsList types={['Android']} />
|
|
|
|
Helper which Indicates whether the provided HEVC/1920\*1080 is supported level supported by device. It uses isCodecSupported internally.
|
|
|
|
### Example Usage
|
|
|
|
```tsx
|
|
import { VideoDecoderProperties } from 'react-native-video';
|
|
|
|
VideoDecoderProperties.getWidevineLevel().then((level) => {
|
|
...
|
|
});
|
|
|
|
VideoDecoderProperties.isCodecSupported('video/hevc', 1920, 1080).then((support) => {
|
|
...
|
|
});
|
|
|
|
VideoDecoderProperties.isHEVCSupported().then((support) => {
|
|
...
|
|
});
|
|
```
|