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