Methods
This page shows the list of available methods
dismissFullscreenPlayer
Platforms: Android | iOS | web
dismissFullscreenPlayer(): Promise<void>
Take the player out of fullscreen mode.
[!WARNING] deprecated, use setFullScreen method instead
pause
Platforms: Android | iOS | web
pause(): Promise<void>
Pause the video.
presentFullscreenPlayer
Platforms: 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
Platforms: Android | iOS | web
resume(): Promise<void>
Resume the video.
restoreUserInterfaceForPictureInPictureStopCompleted
Platform: iOS
restoreUserInterfaceForPictureInPictureStopCompleted(restored)
This function corresponds to the completion handler in Apple's restoreUserInterfaceForPictureInPictureStop (opens in a new tab). IMPORTANT: This function must be called after onRestoreUserInterfaceForPictureInPictureStop
is called.
save
Platform: 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
Platforms: Android | iOS
enterPictureInPicture()
To use this feature on Android with Expo, you must set 'enableAndroidPictureInPicture' true within expo plugin config (app.json)
"plugins": [
[
"react-native-video",
{
"enableAndroidPictureInPicture": true,
}
]
]
To use this feature on Android with Bare React Native, you must:
- Declare PiP support (opens in a new tab) in your AndroidManifest.xml
- setting
android:supportsPictureInPicture
totrue
<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 (opens in a new tab)). 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
Platforms: Android | iOS
exitPictureInPicture()
Exits the active picture in picture; if it is not active, the function call is ignored.
restoreUserInterfaceForPictureInPictureStopCompleted
Platform: iOS
restoreUserInterfaceForPictureInPictureStopCompleted(restored)
This function corresponds to the completion handler in Apple's restoreUserInterfaceForPictureInPictureStop (opens in a new tab). IMPORTANT: This function must be called after onRestoreUserInterfaceForPictureInPictureStop
is called.
seek
Platforms: 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 event will be called.
Exact seek
Platform: 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
Platforms: Android | iOS | web
setVolume(value): Promise<void>
This function will change the volume exactly like volume property. default value and range are the same then.
getCurrentPosition
Platforms: 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
Platforms: Android | iOS
setSource(source: ReactVideoSource): Promise<void>
This function will change the source exactly like source property. Changing source with this function will overide source provided as props.
setFullScreen
Platforms: 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
Platform: 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
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
Platform: 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
Platforms: Android | web
Indicates whether the provided codec is supported level supported by device.
parameters:
mimetype
: mime type of codec to querywidth
,height
: resolution to query
Possible results:
hardware
- codec is supported by hardwaresoftware
- codec is supported by software onlyunsupported
- codec is not supported
isHEVCSupported
Platform: Android
Helper which Indicates whether the provided HEVC/1920*1080 is supported level supported by device. It uses isCodecSupported internally.
Example Usage
import { VideoDecoderProperties } from 'react-native-video';
VideoDecoderProperties.getWidevineLevel().then((level) => {
...
});
VideoDecoderProperties.isCodecSupported('video/hevc', 1920, 1080).then((support) => {
...
});
VideoDecoderProperties.isHEVCSupported().then((support) => {
...
});