API
Methods

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:

<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 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

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) => {
  ...
});
We are TheWidlarzGroupPremium support →