react-native-video

In react-native-video v7, the architecture has shifted from a component-with-props model to a player-object model.

Key concepts:

• VideoPlayer: Created via useVideoPlayer(source, setup?) or new VideoPlayer(source). This instance owns all playback state and controls.
• <VideoView />: An optional display surface that binds to a player. You can perform audio-only playback without using a view.
• Events: Handled via subscriptions on the player instance (using useEvent or player.addEventListener) rather than JSX callback props. Note that the VideoView maintains its own specific events for fullscreen and PiP lifecycles.

import { useVideoPlayer, VideoView, useEvent } from 'react-native-video';

const player = useVideoPlayer({ uri: 'https://example.com/master.m3u8' });
useEvent(player, 'onProgress', ({ currentTime }) => {});
return <VideoView player={player} controls style={{ flex: 1 }} />;

In version 6, react-native-video is implemented as a single imperative <Video> component. You manage the player using three primary mechanisms:

1. Props: Configure the player state (e.g., source, paused, resizeMode).
2. Ref: Control the player imperatively using a VideoRef (e.g., calling .seek()).
3. Callback Props: Handle player events (e.g., onProgress).

New Architecture Support (v6): Version 6 supports the React Native New Architecture via the interop layer.

• Requires React Native $\ge$ 0.72.
• If using React Native versions below 0.74, you must register Video as a legacy component in your react-native.config.js file.

import Video, { VideoRef } from 'react-native-video';
import { useRef } from 'react';

const ref = useRef<VideoRef>(null);

// Usage example
<Video
  ref={ref}
  source={{ uri: 'https://example.com/master.m3u8' }}
  paused={false}
  controls
  resizeMode="contain"
  onProgress={({ currentTime }) => {}}
/>;

// Imperative control via ref
// ref.current?.seek(30);

React Native Video supports the web platform using video.js (v10). It provides the same useVideoPlayer and VideoView API used on iOS and Android, supporting HLS, subtitles, fullscreen, Picture-in-Picture, and media session controls.

Setup

To enable web support, configure your project based on your environment:

• With Expo: Follow the Expo Web documentation.
• Without Expo (Bare React Native): Follow the React Native Web multi-platform guide.

React Native Video manages video.js internally, so no extra CSS imports or manual video.js configuration is required.

import { useVideoPlayer, VideoView } from 'react-native-video';

function Player() {
  const player = useVideoPlayer({
    uri: 'https://example.com/video.mp4',
  });

  return (
    <VideoView
      player={player}
      controls
      style={{ width: '100%', aspectRatio: 16 / 9 }}
    />
  );
}

Plugins auto-register when they are instantiated. You must instantiate your plugin early in the application lifecycle to ensure it is active when the player is created.

Android: Instantiate the plugin in MainApplication.kt inside onCreate().

iOS: Instantiate the plugin in AppDelegate.swift inside didFinishLaunchingWithOptions.

// Android: MainApplication.kt
class MainApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        AnalyticsPlugin() // Auto-registers via init block
    }
}

// iOS: AppDelegate.swift
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    private var analyticsPlugin: AnalyticsPlugin?
    
    func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        analyticsPlugin = AnalyticsPlugin() // Auto-registers via init
        return true
    }
}

To integrate custom analytics on iOS, extend ReactNativeVideoPlugin and override onPlayerCreated to set up observers for the AVPlayer. Use Key-Value Observing (KVO) for playback status and rate, and addPeriodicTimeObserver for position tracking. For detailed network and frame metrics, observe .AVPlayerItemNewAccessLogEntry notifications to access the AVPlayerItemAccessLog.

Key metrics available:

• Bitrate, Stalls, Dropped frames, Bytes: Extracted from AVPlayerItem.accessLog().
• Playback status: Observed via player.status (KVO).
• Play/Pause: Observed via player.rate (KVO).
• Buffer status: Observed via playerItem.isPlaybackLikelyToKeepUp.

import AVFoundation

class AnalyticsPlugin: ReactNativeVideoPlugin {
    
    // MARK: - Properties
    
    private weak var currentPlayer: AVPlayer?
    private var rateObserver: NSKeyValueObservation?
    private var statusObserver: NSKeyValueObservation?
    private var timeObserver: Any?
    
    // MARK: - Init
    
    init() {
        super.init(name: "MyAnalytics")
    }
    
    // MARK: - Plugin Lifecycle
    
    override func onPlayerCreated(player: Weak<NativeVideoPlayer>) {
        guard let nativePlayer = player.value else { return }
        currentPlayer = nativePlayer.player
        
        setupPlaybackObservers(for: nativePlayer.player)
        setupQualityTracking(for: nativePlayer.playerItem)
    }
    
    override func onPlayerDestroyed(player: Weak<NativeVideoPlayer>) {
        removeAllObservers()
        flushAnalytics()
    }
    
    // MARK: - Setup
    
    private func setupPlaybackObservers(for player: AVPlayer) {
        rateObserver = player.observe(\.rate) { [weak self] p, _ in
            self?.trackEvent(p.rate > 0 ? "play" : "pause")
        }
        
        statusObserver = player.observe(\.status) { [weak self] p, _ in
            if p.status == .readyToPlay {
                self?.trackEvent("ready")
            } else if p.status == .failed {
                self?.trackEvent("error", params: ["message": p.error?.localizedDescription ?? ""])
            }
        }
        
        timeObserver = player.addPeriodicTimeObserver(
            forInterval: CMTime(seconds: 10, preferredTimescale: 1),
            queue: .main
        ) { [weak self] time in
            self?.trackMetric("position", value: time.seconds)
        }
    }
    
    private func setupQualityTracking(for playerItem: AVPlayerItem?) {
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(handleAccessLog),
            name: .AVPlayerItemNewAccessLogEntry,
            object: playerItem
        )
    }
    
    @objc private func handleAccessLog(_ notification: Notification) {
        guard let item = notification.object as? AVPlayerItem,
              let event = item.accessLog()?.events.last else {
            return
        }
        
        trackMetric("bitrate", value: event.indicatedBitrate)
        trackMetric("stalls", value: Double(event.numberOfStalls))
        trackMetric("dropped_frames", value: Double(event.numberOfDroppedVideoFrames))
    }
    
    private func removeAllObservers() {
        if let observer = timeObserver {
            currentPlayer?.removeTimeObserver(observer)
        }
        rateObserver?.invalidate()
        statusObserver?.invalidate()
        NotificationCenter.default.removeObserver(self)
        
        currentPlayer = nil
        timeObserver = nil
    }
    
    // MARK: - Analytics
    
    private func trackEvent(_ name: String, params: [String: Any] = [:]) {
        // Send to your analytics backend
    }
    
    private func trackMetric(_ name: String, value: Double) {
        // Send to your analytics backend
    }
    
    private func flushAnalytics() {
        // Flush pending analytics
    }
}