React Native Video

https://docs.thewidlarzgroup.com/react-native-video/docs/v7/
Admin
React Native Video is a comprehensive and popular video playback library for React Native...
Tokens:81,963
Snippets:754
Trust Score:7.6
Update:1 week ago
Show doc for...
Tokens:
Raw
### useVideoPlayer(source, setup?)

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/functions/useVideoPlayer

Creates a VideoPlayer instance and manages its lifecycle. The setup function is called when the player is started loading source if initializeOnCreation is true (default), or when the player is created if initializeOnCreation is false.

```APIDOC
## Function: useVideoPlayer()

### Description
Creates a `VideoPlayer` instance and manages its lifecycle. If `initializeOnCreation` is true (default), the `setup` function will be called when the player is started loading source. If `initializeOnCreation` is false, the `setup` function will be called when the player is created. Changes made to player before initializing will be overwritten when initializing.

### Signature
```typescript
function useVideoPlayer(source, setup?): VideoPlayer;
```

### Parameters
- `source` (`VideoSource | VideoConfig`) - Required - The source of the video to play.
- `setup?` (`(player) => void`) - Optional - A function to setup the player.

### Returns
- `VideoPlayer` - The `VideoPlayer` instance.

### Defined in
hooks/useVideoPlayer.ts:30
```

--------------------------------

### Install the Package with npm

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading/getting-started

Install the Offline Video SDK package using npm.

```bash
npm install @TheWidlarzGroup/react-native-video-stream-downloader  
```

--------------------------------

### Install iOS pods

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/updating

Run pod install in the ios directory to install the required iOS dependencies.

```bash
cd ios && pod install  
```

--------------------------------

### Install @react-native-video/chapters

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/video-view/chapters

Installs the @react-native-video/chapters package required for chapters functionality.

```bash
npm install @react-native-video/chapters  
```

--------------------------------

### Basic VideoView usage with useVideoPlayer

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/video-view

Pass a VideoPlayer instance to the player prop of VideoView. The optional setup function in useVideoPlayer is called when the player is created; here it calls play() to start playback. The controls prop enables native controls.

```jsx
import React from 'react';  
import { VideoPlayer, VideoView } from 'react-native-video';  
import { StyleSheet } from 'react-native';  
  
const App = () => {  
  const player = useVideoPlayer('https://example.com/video.mp4', (_player) => {  
    // This is optional setup function that will be called when the player is created.  
    _player.play();  
  });  
  
  return (  
    <VideoView  
      style={styles.video}  
      player={player}  
      controls={true}  
    />  
  );  
};  
  
const styles = StyleSheet.create({  
  video: {  
    width: '100%',  
    height: 200,  
  },  
});  
  
export default App;  
```

--------------------------------

### Install the react-native-video skill with npx skills add

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/build-with-ai/skills

Run this command to install the skill into all detected coding agents on your machine. It auto-detects agents and writes to their skills directories; if none are detected, it prompts for installation targets. No configuration or API keys are required.

```bash
npx skills add TheWidlarzGroup/react-native-video  
```

--------------------------------

### uri example

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/type-aliases/VideoConfig

Example of setting the uri property, either with a URL string or a require() call for a local asset.

```typescript
uri: 'https://example.com/video.mp4'
// or
uri: require('./assets/video.mp4')
```

--------------------------------

### Install dependencies with npm

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/fundamentals/installation

Install the required packages: react-native-video@next and react-native-nitro-modules.

```bash
npm install react-native-video@next react-native-nitro-modules  
```

--------------------------------

### play()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Start playback of player.

```APIDOC
## play()

### Description
Start playback of player.

### Method
play

### Signature
```
play(): void;
```

### Returns
`void`
```

--------------------------------

### Example: Using WebVideoPlayer to get available audio tracks

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/interfaces/WebVideoPlayer

Shows how to cast the result of useVideoPlayer to WebVideoPlayer and call getAvailableAudioTracks(). Note that audio/video track APIs have limited browser support (~16%, Safari only, behind flags in Chrome/Firefox) and return empty arrays on unsupported browsers.

```typescript
import { useVideoPlayer, type WebVideoPlayer } from 'react-native-video';  
  
const player = useVideoPlayer(source) as WebVideoPlayer;  
const audioTracks = player.getAvailableAudioTracks();  

```

--------------------------------

### Install react-native-video v7

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/updating

Install the latest v7 release of react-native-video using npm.

```bash
npm install react-native-video@next --save  
```

--------------------------------

### VideoPlayer.preload()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/use-video-player

Ensures the media source is set and prepared (buffering started) without starting playback. If not yet initialized it will initialize first.

```APIDOC
## VideoPlayer.preload()

### Description
Ensures the media source is set and prepared (buffering started) without starting playback. If not yet initialized it will initialize first.

### Method
preload

### Parameters
None

### Returns
void
```

--------------------------------

### VideoPlayer with bufferConfig example

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player

Shows how to set bufferConfig on a VideoPlayer instance, including Android and iOS buffer durations and a live playback target offset.

```javascript
const player = new VideoPlayer({  
  source: {  
    uri: 'https://example.com/stream.m3u8',  
    bufferConfig: {  
      // Android  
      minBufferMs: 5000,  
      maxBufferMs: 10000,  
      // iOS  
      preferredForwardBufferDurationMs: 3000,  
      // Live (cross‑platform target)  
      livePlayback: { targetOffsetMs: 500 },  
    },  
  },  
});  
```

--------------------------------

### useVideoPlayer with deferred initialization

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player

Uses useVideoPlayer with initializeOnCreation set to false to defer initialization. Attach listeners in the setup function, then call initialize() or preload() later, e.g., on user tap.

```javascript
const player = useVideoPlayer({  
    source: { uri: 'https://example.com/video.mp4' },  
    initializeOnCreation: false,  
}, (instance) => {  
    // Attach listeners first  
    instance.onLoad = () => console.log('Loaded');  
});  
  
// Later (e.g. on user tap)  
await player.initialize(); // or player.preload()  
player.play();  
```

--------------------------------

### Create a VideoPlayer instance

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player

Creates a new VideoPlayer with a video source URL. The native player is allocated immediately and media preparation starts asynchronously by default.

```javascript
const player = new VideoPlayer('https://example.com/video.mp4');  
```

--------------------------------

### v7 useVideoPlayer and VideoView implementation

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/updating

Example of the v7 implementation using the useVideoPlayer hook and VideoView component, with useEvent for event handling.

```jsx
import React from 'react';  
import { useVideoPlayer, VideoView, useEvent } from 'react-native-video';  
  
const VideoPlayerV7 = () => {  
  const player = useVideoPlayer({  
    source: {  
      uri: 'https://www.w3schools.com/html/mov_bbb.mp4',  
    },  
  });  
  
  useEvent(player, 'onLoad', () => {  
    console.log('Video loaded');  
  });  
  
  useEvent(player, 'onProgress', (data) => {  
    console.log('Progress:', data.currentTime);  
  });  
  
  return (  
    <VideoView  
      player={player}  
      style={{ width: 300, height: 200 }}  
      controls={true}  
    />  
  );  
};  
```

--------------------------------

### externalSubtitles example

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/type-aliases/VideoConfig

Example of setting external subtitles with two WebVTT files, one in English and one in Spanish.

```typescript
externalSubtitles: [
  {
    uri: 'https://example.com/subtitles_en.vtt',
    label: 'English',
    type: 'vtt',
    language: 'en'
  },
  {
    uri: 'https://example.com/subtitles_es.vtt',
    label: 'Español',
    type: 'vtt',
    language: 'es'
  }
]
```

--------------------------------

### VideoView event callbacks example

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/video-view/events

Use these event callbacks to update UI or state in response to fullscreen and picture-in-picture changes. The example logs whether fullscreen or PiP is active.

```jsx
<VideoView  
  player={player}  
  onFullscreenChange={(fullscreen) => {  
    console.log(fullscreen ? 'Entered fullscreen' : 'Exited fullscreen');  
  }}  
  onPictureInPictureChange={(isInPictureInPicture) => {  
    console.log(isInPictureInPicture ? 'PiP active' : 'PiP inactive');  
  }}  
/>  
```

--------------------------------

### onLoadStart

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/interfaces/VideoPlayerEvents

Called when the video starts loading. Note: onLoadStart -> initialize the player -> onLoad.

```APIDOC
## onLoadStart

### Description
Called when the video starts loading.

### Signature
`onLoadStart: (data: onLoadStartData) => void;`

### Parameters
- `data` (onLoadStartData) - The load start data.

### Returns
`void`

### Note
onLoadStart -> initialize the player -> onLoad

```

--------------------------------

### v6 Video component implementation

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/updating

Example of the v6 implementation using the Video component with ref and event handlers.

```jsx
import React, { useRef } from 'react';  
import Video from 'react-native-video';  
  
const VideoPlayerV6 = () => {  
  const videoRef = useRef(null);  
  
  return (  
    <Video  
      source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4' }}  
      ref={videoRef}  
      style={{ width: 300, height: 200 }}  
      controls={true}  
      onLoad={() => console.log('Video loaded')}  
      onProgress={(data) => console.log('Progress:', data.currentTime)}  
    />  
  );  
};  
```

--------------------------------

### Usage example in App.tsx

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/fundamentals/installation

Minimal usage of VideoView and useVideoPlayer to play a video from a URI.

```tsx
import { VideoView, useVideoPlayer } from 'react-native-video';  
  
export default function App() {  
  const player = useVideoPlayer({  
    source: {  
      uri: 'https://www.w3schools.com/html/mov_bbb.mp4',  
    },  
  });  
  
  return <VideoView player={player} />;  
}  
```

--------------------------------

### Deferred initialization with initialize() and preload()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player

Call these methods to initialize the player later when using `initializeOnCreation: false`. `initialize()` creates the native player item without starting playback, while `preload()` also prepares the media source and kicks off buffering.

```javascript
await player.initialize();  
// or preload if you also want it prepared & ready  
await player.preload();  
```

--------------------------------

### getConfig(): DownloadConfig

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading

Gets the current global configuration.

```APIDOC
## getConfig(): DownloadConfig

### Description
Gets the current global configuration.

### Method
getConfig

### Parameters
None

### Returns
- **DownloadConfig** - with properties:
  - **updateFrequencyMS** (number) - Optional - How often to update download progress (in milliseconds)
  - **maxParallelDownloads** (number) - Optional - Maximum number of simultaneous downloads

### Example
```
import { getConfig } from "@TheWidlarzGroup/react-native-video-stream-downloader";  
  
const config = getConfig();  
```
```

--------------------------------

### Install @react-native-video/drm plugin

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/drm

Install the DRM plugin dependency using npm. This is the first step to enable DRM support in your app.

```bash
npm install @react-native-video/drm  
```

--------------------------------

### useVideoPlayer(source, setup)

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player

React hook for managing VideoPlayer lifecycle in functional components.

```APIDOC
## [METHOD] useVideoPlayer(source, setup)

### Description
React hook that simplifies managing the `VideoPlayer` lifecycle within functional components. It automatically creates a player instance when the component mounts or when the source dependency changes, and cleans up resources on unmount or source change.

### Method
useVideoPlayer

### Parameters
#### Parameters
- **source** (string | object) - Required - The video source URI or a source object.
- **setup** (function) - Optional - A setup function that receives the player instance for configuration (e.g., setting `loop`).

### Response
#### Success Response
Returns a `VideoPlayer` instance.

### Error Handling
- The hook respects `initializeOnCreation` (defaults to `true`). If set to `false`, initialization is deferred and you must call `initialize()` or `preload()` manually.
```

--------------------------------

### Example: Disable and re-enable audio session management

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/functions/setAudioSessionManagementDisabled

Shows how to disable audio session management before recording, then re-enable it after recording. This is useful when using other libraries that need to manage the AVAudioSession.

```javascript
// Disable audio session management before recording  
setAudioSessionManagementDisabled(true);  
  
// Record audio using another library...  
  
// Re-enable audio session management after recording  
setAudioSessionManagementDisabled(false);
```

--------------------------------

### Multi-Language Track Selection Example

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading/track-selection

Selects the highest quality video track, English and Spanish audio tracks, and English and Spanish subtitle tracks, then downloads them together.

```typescript
import { getAvailableTracks, downloadStream } from "@TheWidlarzGroup/react-native-video-stream-downloader";  

const tracks = await getAvailableTracks(videoUrl);  

// Select video track (highest quality)  
const videoTrack = tracks.video[0];  

// Select multiple audio tracks (English and Spanish)  
const audioTracks = tracks.audio.filter(t =>   
  t.language === "en" || t.language === "es"  
);  

// Select subtitles for both languages  
const subtitleTracks = tracks.text.filter(t =>   
  t.language === "en" || t.language === "es"  
);  

// Build track selection array  
const selectedTracks = [  
  { id: videoTrack.id, type: "video" as const },  
  ...audioTracks.map(t => ({ id: t.id, type: "audio" as const })),  
  ...subtitleTracks.map(t => ({ id: t.id, type: "text" as const })),  
];  

await downloadStream(videoUrl, {  
  tracks: selectedTracks,  
});  
```

--------------------------------

### Subscribe to onDownloadProgress event with useEvent

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading/events-downloading

Example of subscribing to the onDownloadProgress event using the useEvent hook. Logs the progress percentage for each download.

```typescript
import { useEvent } from "@TheWidlarzGroup/react-native-video-stream-downloader";  
  
useEvent("onDownloadProgress", (downloads: DownloadStatus[]) => {  
  downloads.forEach((download) => {  
    console.log(`Download ${download.id}: ${(download.progress * 100).toFixed(1)}%`);  
  });  
});  
```

--------------------------------

### Subscribe to onDownloadEnd event with useEvent

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading/events-downloading

Example of subscribing to the onDownloadEnd event using the useEvent hook. Checks the status to log whether the download completed or failed.

```typescript
import { useEvent } from "@TheWidlarzGroup/react-native-video-stream-downloader";  
  
useEvent("onDownloadEnd", (download: DownloadStatus) => {  
  if (download.status === "completed") {  
    console.log(`Download ${download.id} completed successfully`);  
  } else {  
    console.log(`Download ${download.id} failed`);  
  }  
});  
```

--------------------------------

### useVideoPlayer with DRM

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/drm

Example of creating a player with DRM configuration using the useVideoPlayer hook. The drm object includes a licenseUrl and optionally a type, with headers passed via source.headers.

```APIDOC
## useVideoPlayer with DRM

### Description
Creates a video player instance with DRM configuration. The `drm` property is passed as part of the source object to `useVideoPlayer`. If `drm.type` is omitted, it defaults to `widevine` on Android and `fairplay` on iOS/visionOS.

### Method
Hook: `useVideoPlayer`

### Parameters
#### Source Object
- **uri** (string) - Required - The video manifest URL (e.g., .mpd for Widevine, .m3u8 for FairPlay).
- **headers** (Record<string, string>) - Optional - HTTP headers sent with the video request. On iOS, these headers are also used for the default license request.
- **drm** (object) - Required - DRM configuration.
  - **type** ('widevine' | 'fairplay') - Optional - DRM type. Defaults per platform when omitted.
  - **licenseUrl** (string) - Required on Android and iOS/visionOS for default/custom flows - URL of the license (CKC) service.

### Request Example
```javascript
const player = useVideoPlayer({
  source: {
    uri: 'https://example.com/manifest.mpd',
    headers: { Authorization: 'Bearer <token>' },
    drm: {
      licenseUrl: 'https://license.example.com/widevine',
    },
  },
});
```

### Response
Returns a player instance that can be passed to a `VideoView` component.

### Notes
- Do not include authorization tokens directly in code; retrieve them at runtime via a backend method.
```

--------------------------------

### get duration()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Gets the duration of the video in seconds.

```APIDOC
## Accessor: get duration()

### Description
Returns the duration of the video in seconds (1.0 = 1 sec). Returns NaN if the duration is not available.

### Returns
- **number** - The duration in seconds.

### Implementation of
- VideoPlayerBase.duration
```

--------------------------------

### Create player with configuration object

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/use-video-player

Pass a configuration object for more control, specifying the source URI.

```javascript
const player = useVideoPlayer({  
  source: {  
    uri: 'https://www.w3schools.com/html/mov_bbb.mp4',  
  },  
});  
```

--------------------------------

### get loop()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Gets whether the player is set to loop.

```APIDOC
## Accessor: get loop()

### Description
Whether the player is looped.

### Returns
- **boolean** - Whether the player is looped.

### Implementation of
- VideoPlayerBase.loop
```

--------------------------------

### get isPlaying()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Gets whether the player is currently playing.

```APIDOC
## Accessor: get isPlaying()

### Description
Whether the player is playing.

### Note
- This is a read-only property.
- To pause/resume the player, you need to use play and pause methods.

### Returns
- **boolean** - Whether the player is playing.

### Implementation of
- VideoPlayerBase.isPlaying
```

--------------------------------

### get ignoreSilentSwitchMode()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Gets the silent switch mode of the player.

```APIDOC
## Accessor: get ignoreSilentSwitchMode()

### Description
Controls the silent switch mode of the player.

### Note
- This is only supported on iOS.
- `auto` - uses default behavior for player.
- `ignore` - ignore the silent switch.
- `obey` - obey the silent switch.

### Returns
- **IgnoreSilentSwitchMode** - The current silent switch mode.

### Implementation of
- VideoPlayerBase.ignoreSilentSwitchMode
```

--------------------------------

### Initialize player with VideoPlayer class constructor

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player

Creates VideoPlayer instances directly using the class constructor with a URL string, a VideoSource object, or a VideoConfig object. Requires manual lifecycle management; call release() when the player is no longer needed.

```javascript
import { VideoPlayer } from 'react-native-video';  
  
// Using a URL string  
const player = new VideoPlayer('https://example.com/video.mp4');  
  
// Using a VideoSource object  
const playerWithSource = new VideoPlayer({ uri: 'https://example.com/video.mp4' });  
  
// Using a VideoConfig object  
const playerWithConfig = new VideoPlayer({  
  source: { uri: 'https://example.com/video.mp4' },  
  // other configurations  
});  

```

--------------------------------

### get disableAudioSessionManagement()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Gets whether internal audio session management is disabled.

```APIDOC
## Accessor: get disableAudioSessionManagement()

### Description
Disables the internal audio session management for this player. When disabled, react-native-video will not configure or activate the AVAudioSession, allowing other libraries (like audio recording libraries) to manage it.

### Default
- `false`

### Platform
- iOS

### Returns
- **boolean** - Whether audio session management is disabled.

### Implementation of
- VideoPlayerBase.disableAudioSessionManagement
```

--------------------------------

### initialize()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Manually initialize the player. You don't need to call this method manually, unless you set `initializeOnCreation` to false in VideoConfig.

```APIDOC
## initialize()

### Description
Manually initialize the player. You don't need to call this method manually, unless you set `initializeOnCreation` to false in VideoConfig.

### Method
initialize

### Signature
```
initialize(): Promise<void>;
```

### Returns
`Promise<void>`
```

--------------------------------

### getConfig - Get current download configuration

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading

Gets the current global configuration for downloads.

```typescript
import { getConfig } from "@TheWidlarzGroup/react-native-video-stream-downloader";  
  
const config = getConfig();  

```

--------------------------------

### get status(): VideoPlayerStatus

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Gets the current status of the player. Returns a VideoPlayerStatus value.

```APIDOC
## get status(): VideoPlayerStatus

### Description
Gets the current status of the player.

### Method
Get accessor

### Signature
```typescript
get status(): VideoPlayerStatus;
```

### Returns
- `VideoPlayerStatus` - The status of the player.

### Implementation of
`VideoPlayerBase.status`
```

--------------------------------

### get currentTime()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Gets the current playback time in seconds. Returns NaN if not available.

```APIDOC
## Accessor: get currentTime()

### Description
Returns the current time of the video in seconds (1.0 = 1 sec). Returns NaN if the current time is not available.

### Returns
- **number** - The current time in seconds.

### Implementation of
- VideoPlayerBase.currentTime
```

--------------------------------

### Initialize VideoPlayer with URL string, VideoSource, and VideoConfig

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player

Shows three ways to create a VideoPlayer instance: with a URL string, a VideoSource object, and a VideoConfig object. The native media item initializes asynchronously by default unless initializeOnCreation is set to false. When using the VideoPlayer class directly, you must manually call release() to free native resources.

```typescript
import { VideoPlayer } from 'react-native-video';  
  
// Using a URL string  
const player = new VideoPlayer('https://example.com/video.mp4');  
  
// Using a VideoSource object  
const playerWithSource = new VideoPlayer({ uri: 'https://example.com/video.mp4' });  
  
// Using a VideoConfig object  
const playerWithConfig = new VideoPlayer({  
  source: { uri: 'https://example.com/video.mp4' },  
  // other configurations  
});  
```

--------------------------------

### Initialize player with useVideoPlayer hook

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player

Creates a VideoPlayer instance using the useVideoPlayer hook with a video source. Recommended for most use cases as it automatically manages the player lifecycle between component mount and unmount.

```javascript
import { useVideoPlayer } from 'react-native-video';  
  
const player = useVideoPlayer({  
  source: {  
    uri: 'https://www.w3schools.com/html/mov_bbb.mp4',  
  },  
});  

```

--------------------------------

### Install iOS Pods for React Native CLI

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/fundamentals/installation

If using React Native CLI, install CocoaPods dependencies for iOS.

```bash
cd ios && pod install && cd ..  
```

--------------------------------

### setConfig(config: DownloadConfig): void

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading

Sets global configuration for downloads.

```APIDOC
## setConfig(config: DownloadConfig): void

### Description
Sets global configuration for downloads.

### Method
setConfig

### Parameters
- **config** (DownloadConfig) - Required - Configuration with the following properties:
  - **updateFrequencyMS** (number) - Optional - How often to update download progress (in milliseconds)
  - **maxParallelDownloads** (number) - Optional - Maximum number of simultaneous downloads

### Returns
- **void** - No return value

### Example
```
import { setConfig } from "@TheWidlarzGroup/react-native-video-stream-downloader";  
  
setConfig({  
  updateFrequencyMS: 1000,  
  maxParallelDownloads: 3,  
});  
```
```

--------------------------------

### getDownloadsStatus: Get status of all downloads

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading

Gets the status of all downloads (active, queued, completed, etc.). Returns an array of DownloadStatus objects.

```typescript
import { getDownloadsStatus } from "@TheWidlarzGroup/react-native-video-stream-downloader";  
  
const allStatuses = await getDownloadsStatus();  
```

--------------------------------

### initialize()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player

Initializes the player asynchronously. Used when deferred initialization is needed.

```APIDOC
## [METHOD] initialize()

### Description
Initializes the player asynchronously. This is used when `initializeOnCreation` is set to `false`.

### Method
initialize

### Parameters
None.

### Response
#### Success Response
Returns a Promise that resolves when initialization is complete.

### Error Handling
- Rejects with `VideoRuntimeError` (or raw error) on failure.
- If an `onError` listener is attached, the error is also delivered to `onError`.
- If superseded by a newer `initialize()`/`preload()`/`replaceSourceAsync()` call, rejects with `player/cancelled` or `source/cancelled` (not reported to `onError`).
```

--------------------------------

### get volume(): number

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Gets the current volume of the video. Volume ranges from 0.0 (0%) to 1.0 (100%). If muted, returns 0.0.

```APIDOC
## get volume(): number

### Description
Gets the volume of the video (0.0 = 0%, 1.0 = 100%). If the player is muted, the volume will be 0.0.

### Method
Get accessor

### Signature
```typescript
get volume(): number;
```

### Returns
- `number` - The volume of the video.

### Implementation of
`VideoPlayerBase.volume`
```

--------------------------------

### getDownloadStatus: Get status of a specific download

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading

Gets the current status of a specific download. Returns DownloadStatus or null if not found. Requires the download identifier.

```typescript
import { getDownloadStatus } from "@TheWidlarzGroup/react-native-video-stream-downloader";  
  
const status = await getDownloadStatus(downloadId);  
```

--------------------------------

### Create player with source string

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/use-video-player

Simplest way to use the hook: pass a video source URL directly.

```javascript
import { useVideoPlayer } from 'react-native-video';  
  
const player = useVideoPlayer('https://www.w3schools.com/html/mov_bbb.mp4');  
```

--------------------------------

### VideoPlayer.play()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/use-video-player

Starts or resumes video playback.

```APIDOC
## VideoPlayer.play()

### Description
Starts or resumes video playback.

### Method
play

### Parameters
None

### Returns
void
```

--------------------------------

### selectedTrack

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Get the currently selected text track.

```APIDOC
## selectedTrack

### Description
Get the currently selected text track.

### Get Signature
```
get selectedTrack(): TextTrack | undefined;
```

### Get Returns
`TextTrack` | `undefined` - The currently selected text track, or undefined if none is selected.

### Implementation of
`VideoPlayerBase.selectedTrack`
```

--------------------------------

### getAvailableTextTracks()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Get all available text tracks for the current source.

```APIDOC
## getAvailableTextTracks()

### Description
Get all available text tracks for the current source.

### Method
getAvailableTextTracks

### Signature
```
getAvailableTextTracks(): TextTrack[];
```

### Returns
`TextTrack[]` - Array of available text tracks
```

--------------------------------

### Set chapters with setChapters()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/video-view/chapters

Sets chapters for the video player with optional configuration for marker color, tooltip, and timer display.

```javascript
import { setChapters } from '@react-native-video/chapters';  
  
const chapters = [  
  { title: "Introduction", timeMs: 0 },  
  { title: "Main Content", timeMs: 30000 }, // 30 seconds  
  { title: "Conclusion", timeMs: 120000 },  // 2 minutes  
];  
  
setChapters(chapters, {  
  markersColor: "#FF6B35",  
  showTooltip: true,  
  showTimer: true,  
});  
```

--------------------------------

### Run Expo project on iOS and Android

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/fundamentals/installation

Commands to run the Expo project on iOS and Android after prebuild.

```bash
npx expo run:ios # run on iOS  
npx expo run:android # run on Android  
```

--------------------------------

### VideoPlayer.initialize()

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/use-video-player

Manually initialize the underlying native player item when initializeOnCreation was set to false. No-op if already initialized.

```APIDOC
## VideoPlayer.initialize()

### Description
Manually initialize the underlying native player item when initializeOnCreation was set to false. No-op if already initialized.

### Method
initialize

### Parameters
None

### Returns
void
```

--------------------------------

### setConfig(config: DownloadConfig): void

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading

Sets the global download configuration. This method does not return a value.

```APIDOC
## setConfig(config: DownloadConfig): void

### Description
Sets the global download configuration. This method does not return a value.

### Method
setConfig

### Parameters
- **config** (DownloadConfig) - Required - The download configuration to set.

### Returns
void
```

--------------------------------

### Configure react-native-video Expo plugin in app.config.js

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/fundamentals/configuration/with-expo

Add the plugin to the plugins array in app.config.js with the same options as the app.json example.

```javascript
export default {
  plugins: [
    [
      'react-native-video',
      {
        enableAndroidPictureInPicture: true,
        enableBackgroundAudio: true,
        androidExtensions: {
          useExoplayerDash: true,
          useExoplayerHls: true,
        },
      },
    ],
  ],
};
```

--------------------------------

### Property: selectedTrack?

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/interfaces/WebVideoPlayer

Type declaration for the optional selectedTrack property. Gets the currently selected text track, or undefined if none is selected.

```typescript
readonly optional selectedTrack?: TextTrack;  

```

--------------------------------

### new VideoPlayer(source)

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/classes/VideoPlayer

Creates a new VideoPlayer instance with the given source.

```APIDOC
## Constructor: new VideoPlayer(source)

### Description
Creates a new VideoPlayer instance with the specified source.

### Parameters
- **source** (VideoSource | VideoConfig | VideoPlayerSource) - Required - The video source or configuration.

### Returns
- **VideoPlayer** - The new VideoPlayer instance.

### Overrides
- VideoPlayerEvents.constructor
```

--------------------------------

### setChapters(chapters, options?)

Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/video-view/chapters

Sets the chapters for the video player. Accepts an array of chapter objects with title and time in milliseconds, and an optional configuration object for marker appearance and behavior.

```APIDOC
## setChapters(chapters, options?)

### Description
Sets the chapters for the video player.

### Method
setChapters

### Parameters
#### chapters (Array<{ title: string, timeMs: number }>) - Required
- **title** (string) - Chapter title
- **timeMs** (number) - Chapter time in milliseconds

#### options (object) - Optional
- **markersColor** (string) - Color of the chapter markers (default: platform default)
- **showTooltip** (boolean) - Whether to show tooltip when hovering over markers (default: true)
- **showTimer** (boolean) - Whether to show timer on markers (default: true)

### Request Example
```javascript
import { setChapters } from '@react-native-video/chapters';

const chapters = [
  { title: "Introduction", timeMs: 0 },
  { title: "Main Content", timeMs: 30000 },
  { title: "Conclusion", timeMs: 120000 },
];

setChapters(chapters, {
  markersColor: "#FF6B35",
  showTooltip: true,
  showTimer: true,
});
```

### Response
No return value.
```
Tokens:
Raw