mirror of
https://github.com/zoriya/react-native-video.git
synced 2026-06-25 02:49:10 +00:00
353 lines
6.6 KiB
Plaintext
353 lines
6.6 KiB
Plaintext
---
|
||
sidebar_position: 3
|
||
title: Methods
|
||
description: React Native Video Component Methods
|
||
---
|
||
|
||
import PlatformsList from "@site/src/components/PlatformsList/PlatformsList.tsx";
|
||
|
||
# Methods
|
||
|
||
This page shows the list of available methods.
|
||
|
||
## Details
|
||
|
||
### `dismissFullscreenPlayer`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
dismissFullscreenPlayer(): Promise<void>
|
||
```
|
||
|
||
Exits fullscreen mode.
|
||
|
||
> **Deprecated:** Use `setFullScreen(false)` instead.
|
||
|
||
---
|
||
|
||
### `pause`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
pause(): Promise<void>
|
||
```
|
||
|
||
Pauses the video.
|
||
|
||
---
|
||
|
||
### `presentFullscreenPlayer`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
presentFullscreenPlayer(): Promise<void>
|
||
```
|
||
|
||
Enters fullscreen mode.
|
||
|
||
- On **iOS**, this opens a fullscreen view controller with controls.
|
||
- On **Android**, this makes the player fullscreen but requires styling to match screen dimensions.
|
||
|
||
> **Deprecated:** Use `setFullScreen(true)` instead.
|
||
|
||
---
|
||
|
||
### `resume`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
resume(): Promise<void>
|
||
```
|
||
|
||
Resumes video playback.
|
||
|
||
---
|
||
|
||
### `restoreUserInterfaceForPictureInPictureStopCompleted`
|
||
|
||
<PlatformsList types={["iOS"]} />
|
||
|
||
```tsx
|
||
restoreUserInterfaceForPictureInPictureStopCompleted(restored);
|
||
```
|
||
|
||
Must be called after `onRestoreUserInterfaceForPictureInPictureStop`.
|
||
Corresponds to Apple's [`restoreUserInterfaceForPictureInPictureStop`](https://developer.apple.com/documentation/avkit/avpictureinpicturecontrollerdelegate/1614703-pictureinpicturecontroller?language=objc).
|
||
|
||
---
|
||
|
||
### `save`
|
||
|
||
<PlatformsList types={["iOS"]} />
|
||
|
||
```tsx
|
||
save(): Promise<{ uri: string }>
|
||
```
|
||
|
||
Saves the video to the user's **Photos app** with the current filter.
|
||
|
||
#### Notes:
|
||
|
||
- Supports **MP4** export only.
|
||
- Exports to the **cache directory** with a generated UUID filename.
|
||
- Requires **internet connection** if the video is not already buffered.
|
||
- Video remains in the **Photos app** until manually deleted.
|
||
- Works with **cached videos**.
|
||
|
||
#### Future improvements:
|
||
|
||
- Support for **multiple quality options**.
|
||
- Support for **more formats**.
|
||
- Support for **custom directory and filename**.
|
||
|
||
---
|
||
|
||
### `enterPictureInPicture`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
enterPictureInPicture();
|
||
```
|
||
|
||
Activates Picture-in-Picture (PiP) mode.
|
||
|
||
#### Android setup:
|
||
|
||
For **Expo**, enable PiP in `app.json`:
|
||
|
||
```json
|
||
"plugins": [
|
||
[
|
||
"react-native-video",
|
||
{
|
||
"enableAndroidPictureInPicture": true
|
||
}
|
||
]
|
||
]
|
||
```
|
||
|
||
For **Bare React Native**, update `AndroidManifest.xml`:
|
||
|
||
```xml
|
||
<activity
|
||
android:name=".MainActivity"
|
||
android:supportsPictureInPicture="true">
|
||
</activity>
|
||
```
|
||
|
||
> **Note:**
|
||
>
|
||
> - On **Android**, entering PiP moves the app to the **background**.
|
||
> - On **iOS**, **video ads cannot start** in PiP mode ([Google IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/ios/client-side/picture_in_picture?hl=en#starting_ads)).
|
||
|
||
---
|
||
|
||
### `exitPictureInPicture`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
exitPictureInPicture();
|
||
```
|
||
|
||
Exits Picture-in-Picture (PiP) mode.
|
||
|
||
---
|
||
|
||
### `seek`
|
||
|
||
<PlatformsList types={["All"]} />
|
||
|
||
```tsx
|
||
seek(seconds: number)
|
||
```
|
||
|
||
Seeks to the specified position (**in seconds**).
|
||
|
||
#### Notes:
|
||
|
||
- **Must be called after** `onLoad`.
|
||
- Triggers the [`onSeek`](./events#onseek) event.
|
||
|
||
#### **iOS Exact Seek:**
|
||
|
||
```tsx
|
||
seek(seconds, tolerance: number)
|
||
```
|
||
|
||
- Default **tolerance**: ±100ms.
|
||
- Set `tolerance = 0` for **precise seeking**.
|
||
|
||
---
|
||
|
||
### `setVolume`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
setVolume(value: number): Promise<void>
|
||
```
|
||
|
||
Changes the **volume** level. Same behavior as the [`volume`](./props#volume) prop.
|
||
|
||
---
|
||
|
||
### `getCurrentPosition`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
getCurrentPosition(): Promise<number>
|
||
```
|
||
|
||
Returns the **current playback position** in seconds.
|
||
|
||
> **Throws an error** if the player is not initialized.
|
||
|
||
---
|
||
|
||
### `setSource`
|
||
|
||
<PlatformsList types={["Android", "iOS"]} />
|
||
|
||
```tsx
|
||
setSource(source: ReactVideoSource): Promise<void>
|
||
```
|
||
|
||
Updates the media source **dynamically**.
|
||
|
||
> **Note:** This **overrides** the `source` prop.
|
||
|
||
---
|
||
|
||
### `setFullScreen`
|
||
|
||
<PlatformsList types={["Android", "iOS", "web"]} />
|
||
|
||
```tsx
|
||
setFullScreen(fullscreen: boolean): Promise<void>
|
||
```
|
||
|
||
Toggles fullscreen mode.
|
||
|
||
- `true` → Enters fullscreen.
|
||
- `false` → Exits fullscreen.
|
||
|
||
---
|
||
|
||
### `nativeHtmlVideoRef`
|
||
|
||
<PlatformsList types={["web"]} />
|
||
|
||
A **reference to the native HTML `<video>` element**.
|
||
Useful for integrating **third-party** video libraries like **hls.js, shaka, video.js, etc.**.
|
||
|
||
---
|
||
|
||
### **Example Usage**
|
||
|
||
```tsx
|
||
const videoRef = useRef<VideoRef>(null);
|
||
|
||
const handleVideoControls = async () => {
|
||
if (!videoRef.current) return;
|
||
|
||
// Fullscreen controls
|
||
videoRef.current.presentFullscreenPlayer();
|
||
videoRef.current.dismissFullscreenPlayer();
|
||
|
||
// Playback controls
|
||
videoRef.current.pause();
|
||
videoRef.current.resume();
|
||
|
||
// Save video
|
||
const response = await videoRef.current.save();
|
||
console.log("Saved video path:", response.uri);
|
||
|
||
// Seek to 200s (or with tolerance on iOS)
|
||
videoRef.current.seek(200);
|
||
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"]} />
|
||
|
||
```tsx
|
||
getWidevineLevel(): Promise<number>
|
||
```
|
||
|
||
Returns the **Widevine DRM level**:
|
||
|
||
- **0** → Unknown / Not supported.
|
||
- **1, 2, 3** → Supported Widevine levels.
|
||
|
||
---
|
||
|
||
### `isCodecSupported`
|
||
|
||
<PlatformsList types={["Android", "web"]} />
|
||
|
||
```tsx
|
||
isCodecSupported(mimetype: string, width: number, height: number): Promise<'hardware' | 'software' | 'unsupported'>
|
||
```
|
||
|
||
Checks if the given **video codec** is supported.
|
||
|
||
| Result | Meaning |
|
||
| ------------- | -------------------------------- |
|
||
| `hardware` | Hardware decoding supported |
|
||
| `software` | Only software decoding available |
|
||
| `unsupported` | Codec **not supported** |
|
||
|
||
---
|
||
|
||
### `isHEVCSupported`
|
||
|
||
<PlatformsList types={["Android"]} />
|
||
|
||
```tsx
|
||
isHEVCSupported(): Promise<boolean>
|
||
```
|
||
|
||
Checks if **HEVC (H.265)** is supported at **1920×1080 resolution**.
|
||
|
||
> Uses `isCodecSupported` internally.
|
||
|
||
---
|
||
|
||
### Static Methods Example Usage
|
||
|
||
```tsx
|
||
import { VideoDecoderProperties } from "react-native-video";
|
||
|
||
VideoDecoderProperties.getWidevineLevel().then((level) => {
|
||
console.log("Widevine Level:", level);
|
||
});
|
||
|
||
VideoDecoderProperties.isCodecSupported("video/hevc", 1920, 1080).then(
|
||
(support) => {
|
||
console.log("HEVC Support:", support);
|
||
}
|
||
);
|
||
|
||
VideoDecoderProperties.isHEVCSupported().then((support) => {
|
||
console.log("HEVC 1080p Support:", support);
|
||
});
|
||
```
|