Files
2025-07-24 17:31:01 +02:00

353 lines
6.6 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
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);
});
```