### Install react-native-video v7
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/updating
Install the next version of react-native-video to begin the upgrade process.
```bash
npm install react-native-video@next --save
```
--------------------------------
### Install Chapters Package
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/video-view/chapters
Install the chapters package using npm. This is the first step to enable chapter functionality.
```bash
npm install @react-native-video/chapters
```
--------------------------------
### Function: useVideoPlayer()
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 based on the initializeOnCreation flag.
```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 made before initializing will be overwritten when initializing.
### Parameters
#### Path 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
```
--------------------------------
### Install Offline Video SDK Package
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
After updating the package, install the necessary pods for iOS.
```bash
cd ios && pod install
```
--------------------------------
### Initialize useVideoPlayer with a configuration object
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/use-video-player
Provide a configuration object to useVideoPlayer for more control over the player's setup, including the video source URI.
```javascript
const player = useVideoPlayer({
source: {
uri: 'https://www.w3schools.com/html/mov_bbb.mp4',
},
});
```
--------------------------------
### Deferred Initialization with useVideoPlayer
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player
To defer player initialization, set `initializeOnCreation` to false. You can then manually initialize the player later, for example, in response to a user interaction. Listeners can be attached during the deferred initialization setup.
```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();
```
--------------------------------
### v7 Video Player Implementation with Hooks
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/updating
Example of a video player component using the new v7 implementation with the useVideoPlayer hook and VideoView.
```javascript
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 (
);
};
```
--------------------------------
### Configure and Run with React Native CLI
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/fundamentals/installation
For React Native CLI projects, install iOS pods by navigating to the 'ios' directory and running 'pod install'. Then, run the project on iOS or Android using 'npx react-native run-ios' or 'npx react-native run-android'.
```bash
cd ios && pod install && cd ..
```
```bash
npx react-native run-ios # run on iOS
```
```bash
npx react-native run-android # run on Android
```
--------------------------------
### Create and Manage VideoPlayer Instance
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/functions/useVideoPlayer
Use this hook to create a VideoPlayer instance. The setup function is called on initialization, and changes made before initialization will be overwritten.
```typescript
function useVideoPlayer(source, setup?): VideoPlayer;
```
--------------------------------
### Deferred Initialization with initialize()
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player
Use `initialize()` when you have deferred player creation and need to explicitly create and attach the native player item or media source. This method prepares the player without starting playback.
```javascript
player.initialize()
```
--------------------------------
### Interface: onLoadStartData
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/api-reference/interfaces/onLoadStartData
The onLoadStartData interface provides information about the video source and its type when the video playback starts.
```APIDOC
## Interface: onLoadStartData
### Description
Provides information about the video source and its type when playback is about to start.
### Properties
#### source
- **source** (VideoPlayerSourceBase) - The source object of the video.
Defined in: types/Events.ts:187
#### sourceType
- **sourceType** (SourceType) - The type of the video source.
Defined in: types/Events.ts:183
Note: `local` for local files, `network` for network sources.
```
--------------------------------
### Install React Native Video Dependencies
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/fundamentals/installation
Use npm to install the necessary packages for React Native Video and its dependencies. Ensure you are using the '@next' tag for v7.
```bash
npm install react-native-video@next react-native-nitro-modules
```
--------------------------------
### Basic Plugin Template for Android
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/plugins/examples
Implement a basic plugin for Android by extending ReactNativeVideoPlugin. This example shows how to hook into player creation and destruction, and override video sources.
```kotlin
class MyPlugin : ReactNativeVideoPlugin("MyPlugin") {
override fun onPlayerCreated(player: WeakReference) {
Log.d("MyPlugin", "Player created with uri ${player.get()?.source.uri}")
}
override fun onPlayerDestroyed(player: WeakReference) {
Log.d("MyPlugin", "Player destroyed")
}
override fun overrideSource(source: NativeVideoPlayerSource): NativeVideoPlayerSource {
Log.d("MyPlugin", "Overriding source with uri ${source.uri}")
return source
}
}
// Usage
val plugin = MyPlugin() // Automatically registered
```
--------------------------------
### Basic Plugin Template for iOS
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/plugins/examples
Implement a basic plugin for iOS by extending ReactNativeVideoPlugin. This example demonstrates custom logic for player creation and destruction, and source overriding.
```swift
class MyPlugin: ReactNativeVideoPlugin {
init() {
super.init(name: "MyPlugin")
}
override func onPlayerCreated(player: Weak) {
// Custom logic when player is created
}
override func onPlayerDestroyed(player: Weak) {
// Custom cleanup when player is destroyed
}
override func overrideSource(source: NativeVideoPlayerSource) async -> NativeVideoPlayerSource {
// Modify source if needed
return source
}
}
// Usage
let plugin = MyPlugin() // Automatically registered
```
--------------------------------
### Get Current Download Configuration
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading
Retrieves the current global configuration settings for downloads.
```javascript
import { getConfig } from "@TheWidlarzGroup/react-native-video-stream-downloader";
const config = getConfig();
```
--------------------------------
### Example: Multi-Language Track Selection
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/downloading/track-selection
Demonstrates selecting multiple audio and subtitle tracks for different languages, along with the primary video track, for a comprehensive download. This requires filtering available tracks by language.
```javascript
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,
});
```
--------------------------------
### Preloading Media with preload()
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/player/video-player
Call `preload()` to prepare the player item and start buffering content ahead of an upcoming `play()` call. This ensures the media source is set and buffering is initiated.
```javascript
player.preload()
```
--------------------------------
### Android-Specific Registry Methods Signatures
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/plugins/registry
Provides example signatures for Android-specific methods to customize ExoPlayer sources, media items, and caching behavior.
```kotlin
internal fun overrideMediaDataSourceFactory(
source: NativeVideoPlayerSource,
mediaDataSourceFactory: DataSource.Factory
): DataSource.Factory
internal fun overrideMediaSourceFactory(
source: NativeVideoPlayerSource,
mediaSourceFactory: MediaSource.Factory,
mediaDataSourceFactory: DataSource.Factory
): MediaSource.Factory
internal fun overrideMediaItemBuilder(
source: NativeVideoPlayerSource,
mediaItemBuilder: MediaItem.Builder
): MediaItem.Builder
internal fun shouldDisableCache(source: NativeVideoPlayerSource): Boolean
```
--------------------------------
### v6 Video Player Implementation
Source: https://docs.thewidlarzgroup.com/react-native-video/docs/v7/updating
Example of a video player component using the v6 implementation of react-native-video.
```javascript
import React, { useRef } from 'react';
import Video from 'react-native-video';
const VideoPlayerV6 = () => {
const videoRef = useRef(null);
return (