diff --git a/__mocks__/expo-video.tsx b/__mocks__/expo-video.tsx
new file mode 100644
index 0000000000000..906a364e932dd
--- /dev/null
+++ b/__mocks__/expo-video.tsx
@@ -0,0 +1,111 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line no-restricted-imports
+import React, {forwardRef, useRef} from 'react';
+import type {ForwardedRef} from 'react';
+import {View} from 'react-native';
+import type {ViewProps} from 'react-native';
+
+type MutedChangeEventPayload = {
+    isMuted: boolean;
+};
+
+type PlayingChangeEventPayload = {
+    isPlaying: boolean;
+};
+
+type StatusChangeEventPayload = {
+    status: string;
+};
+
+type TimeUpdateEventPayload = {
+    currentTime: number;
+};
+
+type VideoPlayer = {
+    /** lightweight “state” */
+    isPlaying: boolean;
+    isMuted: boolean;
+    currentTime: number;
+
+    /** controls */
+    play: jest.Mock<void, []>;
+    pause: jest.Mock<void, []>;
+    replace: jest.Mock<void, [unknown?]>;
+    seekTo: jest.Mock<void, [number]>;
+    setIsMuted: jest.Mock<void, [boolean]>;
+
+    /** simple event API */
+    addListener: jest.Mock<{remove: () => void}, [string, (payload: unknown) => void]>;
+};
+
+function createMockPlayer(): VideoPlayer {
+    let _isPlaying = false;
+    let _isMuted = false;
+    let _currentTime = 0;
+
+    return {
+        get isPlaying() {
+            return _isPlaying;
+        },
+        get isMuted() {
+            return _isMuted;
+        },
+        get currentTime() {
+            return _currentTime;
+        },
+
+        play: jest.fn(() => {
+            _isPlaying = true;
+        }),
+        pause: jest.fn(() => {
+            _isPlaying = false;
+        }),
+        replace: jest.fn((_opts?: unknown) => {
+            // no-op; exist to satisfy code that calls it
+        }),
+        seekTo: jest.fn((time: number) => {
+            _currentTime = time;
+        }),
+        setIsMuted: jest.fn((muted: boolean) => {
+            _isMuted = muted;
+        }),
+
+        addListener: jest.fn((_event: string, _cb: (payload: unknown) => void) => {
+            // minimal, enough for code that calls .remove()
+            return {remove: () => {}};
+        }),
+    };
+}
+
+/**
+ * Mocked hook – returns a stable mock player instance.
+ * Signature accepts any args to match real API calls.
+ */
+function useVideoPlayer(..._args: unknown[]): VideoPlayer {
+    const ref = useRef<VideoPlayer | null>(null);
+    if (!ref.current) {
+        ref.current = createMockPlayer();
+    }
+    return ref.current;
+}
+
+/**
+ * Simple stand-in for the native VideoView.
+ * Accepts a `player` prop to mirror the real component.
+ */
+type VideoViewProps = ViewProps & {player?: VideoPlayer};
+
+const VideoView = forwardRef((props: VideoViewProps, ref: ForwardedRef<View>) => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <View
+        ref={ref}
+        accessibilityLabel="MockVideoView"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+));
+
+export {useVideoPlayer, VideoView};
+export type {MutedChangeEventPayload, PlayingChangeEventPayload, StatusChangeEventPayload, TimeUpdateEventPayload};
diff --git a/config/webpack/webpack.common.ts b/config/webpack/webpack.common.ts
index 117465e641d6f..93bae202d1cca 100644
--- a/config/webpack/webpack.common.ts
+++ b/config/webpack/webpack.common.ts
@@ -56,6 +56,7 @@ const includeModules = [
     '@react-native/assets',
     'expo',
     'expo-av',
+    'expo-video',
     'expo-image-manipulator',
     'expo-modules-core',
 ].join('|');
diff --git a/cspell.json b/cspell.json
index 5cc365f37ff12..d2a0a053a73d1 100644
--- a/cspell.json
+++ b/cspell.json
@@ -725,6 +725,7 @@
         "unhold",
         "Unlaminated",
         "Unmigrated",
+        "unmuting",
         "unredacted",
         "unscrollable",
         "unsubmitted",
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 6b4596498c5f9..e40d7aeb93bb5 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -173,6 +173,8 @@ PODS:
     - Yoga
   - ExpoSecureStore (14.2.4):
     - ExpoModulesCore
+  - ExpoVideo (3.0.12):
+    - ExpoModulesCore
   - ExpoStoreReview (9.0.8):
     - ExpoModulesCore
   - fast_float (8.0.0)
@@ -4135,6 +4137,7 @@ DEPENDENCIES:
   - ExpoLocation (from `../node_modules/expo-location/ios`)
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
   - ExpoSecureStore (from `../node_modules/expo-secure-store/ios`)
+  - ExpoVideo (from `../node_modules/expo-video/ios`)
   - ExpoStoreReview (from `../node_modules/expo-store-review/ios`)
   - fast_float (from `../node_modules/react-native/third-party-podspecs/fast_float.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
@@ -4349,6 +4352,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-modules-core"
   ExpoSecureStore:
     :path: "../node_modules/expo-secure-store/ios"
+  ExpoVideo:
+    :path: "../node_modules/expo-video/ios"
   ExpoStoreReview:
     :path: "../node_modules/expo-store-review/ios"
   fast_float:
@@ -4626,6 +4631,7 @@ SPEC CHECKSUMS:
   ExpoLocation: 93d7faa0c2adbd5a04686af0c1a61bc6ed3ee2f7
   ExpoModulesCore: e1b5401a7af4c7dbf4fe26b535918a72c6ed8a7b
   ExpoSecureStore: 3f1b632d6d40bcc62b4983ef9199cd079592a50a
+  ExpoVideo: 6907c4872886dce2720d3af20782eb6ee7734110
   ExpoStoreReview: 15f19e0d6cb6e00330ba1b356485bf47ef19c39a
   fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
   FBLazyVector: 941bef1c8eeabd9fe1f501e30a5220beee913886
diff --git a/package-lock.json b/package-lock.json
index 9c5479aa1074f..f10c5617d76ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,6 +74,7 @@
         "expo-modules-core": "3.0.18",
         "expo-secure-store": "~14.2.4",
         "expo-store-review": "~9.0.8",
+        "expo-video": "^3.0.12",
         "expo-task-manager": "~14.0.9",
         "fast-equals": "^5.2.2",
         "focus-trap-react": "^11.0.3",
@@ -23594,6 +23595,17 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-video": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/expo-video/-/expo-video-3.0.12.tgz",
+      "integrity": "sha512-L+E+zmNp3RxUBk2ugMSjxVposP70uIgGCZio5PiiUXme2KQ1eAEta2vcUPWrf4a+udrp6Xzr7bO1H9vkUXF3pg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-task-manager": {
       "version": "14.0.9",
       "resolved": "https://registry.npmjs.org/expo-task-manager/-/expo-task-manager-14.0.9.tgz",
diff --git a/package.json b/package.json
index 557f84ddc7f81..0d3da0b17e30d 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "test:debug": "TZ=utc NODE_OPTIONS='--inspect-brk --experimental-vm-modules' jest --runInBand",
     "perf-test": "NODE_OPTIONS=--experimental-vm-modules npx reassure",
     "typecheck": "NODE_OPTIONS=--max_old_space_size=8192 tsc",
-    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=384 --cache --cache-location=node_modules/.cache/eslint --cache-strategy content --concurrency=auto",
+    "lint": "NODE_OPTIONS=--max_old_space_size=8192 eslint . --max-warnings=398 --cache --cache-location=node_modules/.cache/eslint --cache-strategy content --concurrency=auto",
     "lint-changed": "NODE_OPTIONS=--max_old_space_size=8192 ./scripts/lintChanged.sh",
     "check-lazy-loading": "ts-node scripts/checkLazyLoading.ts",
     "lint-watch": "npx eslint-watch --watch --changed",
@@ -142,6 +142,7 @@
     "expo-location": "^19.0.7",
     "expo-modules-core": "3.0.18",
     "expo-secure-store": "~14.2.4",
+    "expo-video": "^3.0.12",
     "expo-store-review": "~9.0.8",
     "expo-task-manager": "~14.0.9",
     "fast-equals": "^5.2.2",
diff --git a/patches/expo-av/details.md b/patches/expo-av/details.md
deleted file mode 100644
index e24511e138a1d..0000000000000
--- a/patches/expo-av/details.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# `expo-av` patches
-
-### [expo-av+15.1.7+001+fix-blank-screen-android.patch](expo-av+15.1.7+001+fix-blank-screen-android.patch)
-
-- Reason:
-  
-    ```
-    This patch fixes blank modal after fullscreen video ends on Android.
-    ```
-  
-- Upstream PR/issue: The maintainer of the upstream lib isn't willing to accept fix for the lib because it's going to be replaced by another lib `expo-video`, see comment https://github.com/expo/expo/issues/19039#issuecomment-2688369708
-- E/App issue: https://github.com/Expensify/App/issues/53904
-- PR introducing patch: https://github.com/Expensify/App/pull/56302
-
-
-### [expo-av+15.1.7+002+handle-unsupported-videos-ios.patch](expo-av+15.1.7+002+handle-unsupported-videos-ios.patch)
-
-- Reason:
-  
-    ```
-    This patch handles unsupported videos in iOS.
-    ```
-  
-- Upstream PR/issue: Probably same reason as the first patch.
-- E/App issue: https://github.com/Expensify/App/issues/52673
-- PR introducing patch: https://github.com/Expensify/App/pull/57353
\ No newline at end of file
diff --git a/patches/expo-av/expo-av+15.1.7+001+fix-blank-screen-android.patch b/patches/expo-av/expo-av+15.1.7+001+fix-blank-screen-android.patch
deleted file mode 100644
index 3b3f307062509..0000000000000
--- a/patches/expo-av/expo-av+15.1.7+001+fix-blank-screen-android.patch
+++ /dev/null
@@ -1,221 +0,0 @@
-diff --git a/node_modules/expo-av/android/src/main/java/expo/modules/av/player/SimpleExoPlayerData.java b/node_modules/expo-av/android/src/main/java/expo/modules/av/player/SimpleExoPlayerData.java
-index 8835a39..87e1964 100644
---- a/node_modules/expo-av/android/src/main/java/expo/modules/av/player/SimpleExoPlayerData.java
-+++ b/node_modules/expo-av/android/src/main/java/expo/modules/av/player/SimpleExoPlayerData.java
-@@ -2,6 +2,7 @@ package expo.modules.av.player;
- 
- import android.content.Context;
- import android.net.Uri;
-+import android.os.Build;
- import android.os.Bundle;
- import android.os.Looper;
- 
-@@ -63,6 +64,8 @@ class SimpleExoPlayerData extends PlayerData
-   private boolean mIsLoading = true;
-   private final Context mReactContext;
- 
-+  private Surface mSurface = null;
-+
-   SimpleExoPlayerData(final AVManagerInterface avModule, final Context context, final Uri uri, final String overridingExtension, final Map<String, Object> requestHeaders) {
-     super(avModule, uri, requestHeaders);
-     mReactContext = context;
-@@ -228,6 +231,13 @@ class SimpleExoPlayerData extends PlayerData
- 
-   @Override
-   public void tryUpdateVideoSurface(final Surface surface) {
-+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+      if (mSimpleExoPlayer != null && mSurface != surface) {
-+        mSimpleExoPlayer.setVideoSurface(surface);
-+        mSurface = surface;
-+      }
-+      return;
-+    }
-     if (mSimpleExoPlayer != null) {
-       mSimpleExoPlayer.setVideoSurface(surface);
-     }
-diff --git a/node_modules/expo-av/android/src/main/java/expo/modules/av/video/VideoTextureView.java b/node_modules/expo-av/android/src/main/java/expo/modules/av/video/VideoTextureView.java
-index 41a5979..b378bf4 100644
---- a/node_modules/expo-av/android/src/main/java/expo/modules/av/video/VideoTextureView.java
-+++ b/node_modules/expo-av/android/src/main/java/expo/modules/av/video/VideoTextureView.java
-@@ -4,6 +4,7 @@ import android.annotation.SuppressLint;
- import android.content.Context;
- import android.graphics.Matrix;
- import android.graphics.SurfaceTexture;
-+import android.os.Build;
- import android.util.Pair;
- import android.util.Size;
- import android.view.Surface;
-@@ -20,6 +21,10 @@ public class VideoTextureView extends TextureView implements TextureView.Surface
-   private boolean mIsAttachedToWindow = false;
-   private Surface mSurface = null;
-   private boolean mVisible = true;
-+  private int mBufferWidth = 0;
-+  private int mBufferHeight = 0;
-+  private int mPositionX = 0;
-+  private int mPositionY = 0;
- 
-   public VideoTextureView(final Context themedReactContext, VideoView videoView) {
-     super(themedReactContext, null, 0);
-@@ -55,6 +60,15 @@ public class VideoTextureView extends TextureView implements TextureView.Surface
-         setTransform(matrix);
-         invalidate();
-       }
-+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+        float[] values = new float[9];
-+        matrix.getValues(values);
-+        mBufferWidth = (int)(getWidth() * values[Matrix.MSCALE_X]);
-+        mBufferHeight = (int)(getHeight() * values[Matrix.MSCALE_Y]);
-+        mPositionX = (int)(values[Matrix.MTRANS_X]);
-+        mPositionY = (int)(values[Matrix.MTRANS_Y]);
-+        mVideoView.updateSurfaceView(mVisible, mBufferWidth, mBufferHeight, mPositionX, mPositionY);
-+      }
-     }
-   }
- 
-@@ -69,6 +83,9 @@ public class VideoTextureView extends TextureView implements TextureView.Surface
-       onVisibilityChanged(this, View.INVISIBLE);
-       onVisibilityChanged(this, View.VISIBLE);
-     }
-+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+      mVideoView.updateSurfaceView(mVisible, mBufferWidth, mBufferHeight, mPositionX, mPositionY);
-+    }
-   }
- 
-   // TextureView
-@@ -76,7 +93,12 @@ public class VideoTextureView extends TextureView implements TextureView.Surface
-   @Override
-   public void onSurfaceTextureAvailable(final SurfaceTexture surfaceTexture, final int width, final int height) {
-     mSurface = new Surface(surfaceTexture);
--    mVideoView.tryUpdateVideoSurface(mSurface);
-+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+      mVideoView.tryUpdateVideoSurface();
-+      mVideoView.updateSurfaceView(mVisible, mBufferWidth, mBufferHeight, mPositionX, mPositionY);
-+    } else {
-+      mVideoView.tryUpdateVideoSurface(mSurface);
-+    }
-   }
- 
-   @Override
-@@ -86,13 +108,17 @@ public class VideoTextureView extends TextureView implements TextureView.Surface
- 
-   @Override
-   public void onSurfaceTextureUpdated(final SurfaceTexture surfaceTexture) {
--    // no-op
-+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+      mVideoView.updateSurfaceView(mVisible, mBufferWidth, mBufferHeight, mPositionX, mPositionY);
-+    }
-   }
- 
-   @Override
-   public boolean onSurfaceTextureDestroyed(final SurfaceTexture surfaceTexture) {
-     mSurface = null;
--    mVideoView.tryUpdateVideoSurface(null);
-+    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.Q) {
-+      mVideoView.tryUpdateVideoSurface(null);
-+    }
-     return true;
-   }
- 
-@@ -108,11 +134,19 @@ public class VideoTextureView extends TextureView implements TextureView.Surface
-   protected void onAttachedToWindow() {
-     super.onAttachedToWindow();
-     mIsAttachedToWindow = true;
--    mVideoView.tryUpdateVideoSurface(mSurface);
-+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+      mVideoView.tryUpdateVideoSurface();
-+      mVideoView.updateSurfaceView(mVisible, mBufferWidth, mBufferHeight, mPositionX, mPositionY);
-+    } else {
-+      mVideoView.tryUpdateVideoSurface(mSurface);
-+    }
-   }
- 
-   protected void onVisibilityChanged(View changedView, int visibility) {
-     super.onVisibilityChanged(changedView, visibility);
-     mVisible = visibility == View.VISIBLE;
-+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+      mVideoView.updateSurfaceView(mVisible, mBufferWidth, mBufferHeight, mPositionX, mPositionY);
-+    }
-   }
- }
-diff --git a/node_modules/expo-av/android/src/main/java/expo/modules/av/video/VideoView.java b/node_modules/expo-av/android/src/main/java/expo/modules/av/video/VideoView.java
-index 1acb32b..6bac2bf 100644
---- a/node_modules/expo-av/android/src/main/java/expo/modules/av/video/VideoView.java
-+++ b/node_modules/expo-av/android/src/main/java/expo/modules/av/video/VideoView.java
-@@ -2,10 +2,14 @@ package expo.modules.av.video;
- 
- import android.annotation.SuppressLint;
- import android.content.Context;
-+import android.os.Build;
- import android.os.Bundle;
- import android.util.Pair;
-+import android.view.Gravity;
- import android.view.MotionEvent;
- import android.view.Surface;
-+import android.view.SurfaceControl;
-+import android.view.SurfaceView;
- import android.widget.FrameLayout;
- 
- import androidx.annotation.NonNull;
-@@ -62,6 +66,10 @@ public class VideoView extends FrameLayout implements AudioEventHandler, Fullscr
-   private boolean mShouldShowFullscreenPlayerOnLoad = false;
-   private FullscreenVideoPlayerPresentationChangeProgressListener mFullscreenVideoPlayerPresentationOnLoadChangeListener = null;
- 
-+  private Surface mSurface;
-+  private SurfaceControl mSurfaceControl;
-+  private SurfaceView mSurfaceView;
-+
-   public VideoView(@NonNull Context context, VideoViewWrapper videoViewWrapper, AppContext appContext) {
-     super(context);
- 
-@@ -70,6 +78,13 @@ public class VideoView extends FrameLayout implements AudioEventHandler, Fullscr
-     mAVModule = appContext.getLegacyModuleRegistry().getModule(AVManagerInterface.class);
-     mAVModule.registerVideoViewForAudioLifecycle(this);
- 
-+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+      mSurfaceView = new SurfaceView(context);
-+      mSurfaceControl = new SurfaceControl.Builder().setName("ExpoAVSurfaceControl").setBufferSize(0, 0).build();
-+      mSurface = new Surface(mSurfaceControl);
-+      addView(mSurfaceView);
-+    }
-+
-     mVideoTextureView = new VideoTextureView(context, this);
-     addView(mVideoTextureView, generateDefaultLayoutParams());
- 
-@@ -387,7 +402,11 @@ public class VideoView extends FrameLayout implements AudioEventHandler, Fullscr
-         mVideoTextureView.scaleVideoSize(mPlayerData.getVideoWidthHeight(), mResizeMode);
- 
-         if (mVideoTextureView.isAttachedToWindow()) {
--          mPlayerData.tryUpdateVideoSurface(mVideoTextureView.getSurface());
-+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
-+            mPlayerData.tryUpdateVideoSurface(mSurface);
-+          } else {
-+            mPlayerData.tryUpdateVideoSurface(mVideoTextureView.getSurface());
-+          }
-         }
- 
-         if (promise != null) {
-@@ -477,6 +496,24 @@ public class VideoView extends FrameLayout implements AudioEventHandler, Fullscr
-     }
-   }
- 
-+  public void tryUpdateVideoSurface() {
-+    if (mPlayerData != null) {
-+      mPlayerData.tryUpdateVideoSurface(mSurface);
-+    }
-+  }
-+
-+  public void updateSurfaceView(boolean visible, int bufferWidth, int bufferHeight, int positionX, int positionY) {
-+    new SurfaceControl.Transaction()
-+      .reparent(mSurfaceControl, mSurfaceView.getSurfaceControl())
-+      .setBufferSize(mSurfaceControl, bufferWidth, bufferHeight)
-+      .setPosition(mSurfaceControl, 0, 0)
-+      .setVisibility(mSurfaceControl, visible && bufferWidth > 0 && bufferHeight > 0)
-+      .apply();
-+    mSurfaceView.layout(positionX, positionY, positionX + Math.max(bufferWidth, 1), positionY + Math.max(bufferHeight, 1));
-+    mSurfaceView.setLayoutParams(new FrameLayout.LayoutParams(Math.max(bufferWidth, 1), Math.max(bufferHeight, 1), Gravity.CENTER));
-+    mSurfaceView.requestLayout();
-+  }
-+
-   // AudioEventHandler
- 
-   @Override
diff --git a/patches/expo-av/expo-av+15.1.7+002+handle-unsupported-videos-ios.patch b/patches/expo-av/expo-av+15.1.7+002+handle-unsupported-videos-ios.patch
deleted file mode 100644
index b5e27e027e351..0000000000000
--- a/patches/expo-av/expo-av+15.1.7+002+handle-unsupported-videos-ios.patch
+++ /dev/null
@@ -1,22 +0,0 @@
-diff --git a/node_modules/expo-av/ios/EXAV/EXAVPlayerData.m b/node_modules/expo-av/ios/EXAV/EXAVPlayerData.m
-index 99dc808..01e4bb9 100644
---- a/node_modules/expo-av/ios/EXAV/EXAVPlayerData.m
-+++ b/node_modules/expo-av/ios/EXAV/EXAVPlayerData.m
-@@ -158,8 +158,16 @@ NSString *const EXAVPlayerDataObserverMetadataKeyPath = @"timedMetadata";
-   // unless we preload, the asset will not necessarily load the duration by the time we try to play it.
-   // http://stackoverflow.com/questions/20581567/avplayer-and-avfoundationerrordomain-code-11819
-   EX_WEAKIFY(self);
--  [avAsset loadValuesAsynchronouslyForKeys:@[ @"duration" ] completionHandler:^{
-+  [avAsset loadValuesAsynchronouslyForKeys:@[ @"isPlayable", @"duration" ] completionHandler:^{
-     EX_ENSURE_STRONGIFY(self);
-+    NSError *error = nil;
-+    AVKeyValueStatus status = [avAsset statusOfValueForKey:@"isPlayable" error:&error];
-+
-+    if (status == AVKeyValueStatusLoaded && !avAsset.isPlayable) {
-+      NSString *errorMessage = @"Load encountered an error: [AVAsset isPlayable:] returned false. The asset does not contains a playable content or is not supported by the device.";
-+      [self _finishLoadWithError:errorMessage];
-+      return;
-+    } 
- 
-     // We prepare three items for AVQueuePlayer, so when the first finishes playing,
-     // second can start playing and the third can start preparing to play.
diff --git a/patches/expo-video/details.md b/patches/expo-video/details.md
new file mode 100644
index 0000000000000..ede6026ad2a92
--- /dev/null
+++ b/patches/expo-video/details.md
@@ -0,0 +1,13 @@
+# `expo-video` patches
+
+### [expo-video+3.0.12+001+prevent_double_pause.patch](expo-video+3.0.12+001+prevent_double_pause.patch)
+
+- Reason:
+
+    ```
+    This patch edits the onPause eventListener in expo-video's videoPlayer. It still pauses all mounted videos, but now excludes the video that invoked the listener, preventing it from being paused twice.
+    ```
+
+- Upstream PR/issue: https://github.com/expo/expo/issues/40743
+- E/App issue: 🛑
+- PR Introducing Patch: https://github.com/Expensify/App/pull/66793
diff --git a/patches/expo-video/expo-video+3.0.12+001+prevent_double_pause.patch b/patches/expo-video/expo-video+3.0.12+001+prevent_double_pause.patch
new file mode 100644
index 0000000000000..d1a996d780519
--- /dev/null
+++ b/patches/expo-video/expo-video+3.0.12+001+prevent_double_pause.patch
@@ -0,0 +1,24 @@
+
+diff --git a/node_modules/expo-video/build/VideoPlayer.web.js b/node_modules/expo-video/build/VideoPlayer.web.js
+index 2c7224a..16df18b 100644
+--- a/node_modules/expo-video/build/VideoPlayer.web.js
++++ b/node_modules/expo-video/build/VideoPlayer.web.js
+@@ -305,14 +305,16 @@ export default class VideoPlayerWeb extends globalThis.expo.SharedObject {
+                 mountedVideo.play();
+             });
+         };
+-        video.onpause = () => {
++        video.onpause = (e) => {
+             this._emitOnce(video, 'playingChange', {
+                 isPlaying: false,
+                 oldIsPlaying: this.playing,
+             });
+             this.playing = false;
+             this._mountedVideos.forEach((mountedVideo) => {
+-                mountedVideo.pause();
++                if (e.target !== mountedVideo) {
++                    mountedVideo.pause();
++                }
+             });
+         };
+         video.onvolumechange = () => {
diff --git a/src/components/AttachmentPreview.tsx b/src/components/AttachmentPreview.tsx
index 84b2981a351c0..795083cdc9f65 100644
--- a/src/components/AttachmentPreview.tsx
+++ b/src/components/AttachmentPreview.tsx
@@ -1,14 +1,16 @@
 import {Str} from 'expensify-common';
-import {ResizeMode, Video} from 'expo-av';
-import React, {useMemo, useState} from 'react';
+import {useEvent} from 'expo';
+import type {SourceLoadEventPayload, VideoThumbnail} from 'expo-video';
+import {useVideoPlayer} from 'expo-video';
+import React, {useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {cleanFileName, getFileName} from '@libs/fileDownload/FileUtils';
 import variables from '@styles/variables';
 import {checkIsFileImage} from './Attachments/AttachmentView';
 import DefaultAttachmentView from './Attachments/AttachmentView/DefaultAttachmentView';
 import Icon from './Icon';
-import {Play} from './Icon/Expensicons';
 import Image from './Image';
 import PDFThumbnail from './PDFThumbnail';
 import {PressableWithFeedback} from './Pressable';
@@ -29,6 +31,7 @@ type AttachmentPreviewProps = {
 
 function AttachmentPreview({source, aspectRatio = 1, onPress, onLoadError}: AttachmentPreviewProps) {
     const styles = useThemeStyles();
+    const icons = useMemoizedLazyExpensifyIcons(['Play']);
 
     const fillStyle = aspectRatio < 1 ? styles.h100 : styles.w100;
     const [isEncryptedPDF, setIsEncryptedPDF] = useState(false);
@@ -37,6 +40,18 @@ function AttachmentPreview({source, aspectRatio = 1, onPress, onLoadError}: Atta
         return cleanFileName(rawFileName);
     }, [source]);
 
+    const [thumbnail, setThumbnail] = useState<VideoThumbnail | null>(null);
+    const videoPlayer = useVideoPlayer(source);
+
+    const {videoSource} = useEvent(videoPlayer, 'sourceLoad', {videoSource: null} as SourceLoadEventPayload);
+
+    useEffect(() => {
+        if (!videoSource) {
+            return;
+        }
+        videoPlayer.generateThumbnailsAsync(1).then((thumbnails) => setThumbnail(thumbnails.at(0) ?? null));
+    }, [videoPlayer, videoSource]);
+
     if (typeof source === 'string' && Str.isVideo(source)) {
         return (
             <PressableWithFeedback
@@ -46,21 +61,17 @@ function AttachmentPreview({source, aspectRatio = 1, onPress, onLoadError}: Atta
                 accessible
                 accessibilityLabel="Attachment Thumbnail"
             >
-                <Video
-                    style={[styles.w100, styles.h100]}
-                    source={{
-                        uri: source,
-                    }}
-                    shouldPlay={false}
-                    useNativeControls={false}
-                    resizeMode={ResizeMode.CONTAIN}
-                    isLooping={false}
-                    onError={onLoadError}
-                />
+                {!!thumbnail && (
+                    <Image
+                        source={thumbnail}
+                        style={[fillStyle, {aspectRatio}]}
+                        resizeMode="cover"
+                    />
+                )}
                 <View style={[styles.h100, styles.w100, styles.pAbsolute, styles.justifyContentCenter, styles.alignItemsCenter]}>
                     <View style={styles.videoThumbnailPlayButton}>
                         <Icon
-                            src={Play}
+                            src={icons.Play}
                             fill="white"
                             width={variables.iconSizeXLarge}
                             height={variables.iconSizeXLarge}
diff --git a/src/components/Attachments/AttachmentView/index.tsx b/src/components/Attachments/AttachmentView/index.tsx
index 33c303bf028d0..18283bf821eb8 100644
--- a/src/components/Attachments/AttachmentView/index.tsx
+++ b/src/components/Attachments/AttachmentView/index.tsx
@@ -156,9 +156,6 @@ function AttachmentView({
         }
         const videoSource = isVideo && typeof source === 'string' ? source : undefined;
         updateCurrentURLAndReportID(videoSource, reportID);
-        if (videoSource && currentlyPlayingURL === videoSource) {
-            playVideo();
-        }
     }, [file, isFocused, isInFocusedModal, isUsedInAttachmentModal, isVideo, reportID, source, updateCurrentURLAndReportID, playVideo, currentlyPlayingURL]);
 
     const [imageError, setImageError] = useState(false);
diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index ba303ad0b5eeb..9e3cb9dd0126c 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -1,4 +1,4 @@
-import type {VideoReadyForDisplayEvent} from 'expo-av';
+import type {SourceLoadEventPayload} from 'expo-video';
 import isEmpty from 'lodash/isEmpty';
 import React, {useMemo, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
@@ -13,7 +13,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {containsCustomEmoji, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragment';
 import CONST from '@src/CONST';
-import type {EmptyStateComponentProps, VideoLoadedEventType} from './types';
+import type {EmptyStateComponentProps} from './types';
 
 const VIDEO_ASPECT_RATIO = 400 / 225;
 
@@ -40,16 +40,14 @@ function EmptyStateComponent({
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const doesSubtitleContainCustomEmojiAndMore = containsCustomEmoji(subtitle ?? '') && !containsOnlyCustomEmoji(subtitle ?? '');
 
-    const setAspectRatio = (event: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
-        if (!event) {
+    const setAspectRatio = (event: SourceLoadEventPayload) => {
+        const track = event.availableVideoTracks.at(0);
+
+        if (!track) {
             return;
         }
 
-        if ('naturalSize' in event) {
-            setVideoAspectRatio(event.naturalSize.width / event.naturalSize.height);
-        } else {
-            setVideoAspectRatio(event.srcElement.videoWidth / event.srcElement.videoHeight);
-        }
+        setVideoAspectRatio(track.size.width / track.size.height);
     };
 
     const HeaderComponent = useMemo(() => {
@@ -58,9 +56,8 @@ function EmptyStateComponent({
                 return (
                     <VideoPlayer
                         url={headerMedia}
-                        videoPlayerStyle={[headerContentStyles, {aspectRatio: videoAspectRatio}]}
-                        videoStyle={styles.emptyStateVideo}
-                        onVideoLoaded={setAspectRatio}
+                        videoPlayerStyle={[headerContentStyles, styles.emptyStateVideo, {aspectRatio: videoAspectRatio}]}
+                        onSourceLoaded={setAspectRatio}
                         controlsStatus={CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW}
                         shouldUseControlsBottomMargin={false}
                         shouldPlay
diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx
index f3abf93b81498..f322ba4f02b88 100644
--- a/src/components/FeatureTrainingModal.tsx
+++ b/src/components/FeatureTrainingModal.tsx
@@ -1,5 +1,5 @@
-import type {VideoReadyForDisplayEvent} from 'expo-av';
 import type {ImageContentFit} from 'expo-image';
+import type {SourceLoadEventPayload} from 'expo-video';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {Image, InteractionManager, View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
@@ -41,13 +41,6 @@ const VIDEO_ASPECT_RATIO = 1280 / 960;
 
 const MODAL_PADDING = variables.spacing2;
 
-type VideoLoadedEventType = {
-    srcElement: {
-        videoWidth: number;
-        videoHeight: number;
-    };
-};
-
 type VideoStatus = 'video' | 'animation';
 
 type BaseFeatureTrainingModalProps = {
@@ -243,16 +236,14 @@ function FeatureTrainingModal({
         }
     }, [isOffline, isVideoStatusLocked]);
 
-    const setAspectRatio = (event: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
-        if (!event) {
+    const setAspectRatio = (event: SourceLoadEventPayload) => {
+        const track = event.availableVideoTracks.at(0);
+
+        if (!track) {
             return;
         }
 
-        if ('naturalSize' in event) {
-            setIllustrationAspectRatio(event.naturalSize.width / event.naturalSize.height);
-        } else {
-            setIllustrationAspectRatio(event.srcElement.videoWidth / event.srcElement.videoHeight);
-        }
+        setIllustrationAspectRatio(track.size.width / track.size.height);
     };
 
     const renderIllustration = useCallback(() => {
@@ -292,7 +283,7 @@ function FeatureTrainingModal({
                         <VideoPlayer
                             url={videoURL}
                             videoPlayerStyle={[styles.onboardingVideoPlayer, {aspectRatio}]}
-                            onVideoLoaded={setAspectRatio}
+                            onSourceLoaded={setAspectRatio}
                             controlsStatus={CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE}
                             shouldUseControlsBottomMargin={false}
                             shouldPlay
diff --git a/src/components/FullscreenLoadingIndicator.tsx b/src/components/FullscreenLoadingIndicator.tsx
index 9c495aa651ab0..59e582c2831d3 100644
--- a/src/components/FullscreenLoadingIndicator.tsx
+++ b/src/components/FullscreenLoadingIndicator.tsx
@@ -61,7 +61,7 @@ function FullScreenLoadingIndicator({
                     testID={testID}
                     extraLoadingContext={extraLoadingContext}
                 />
-                {showGoBackButton && (
+                {showGoBackButton && shouldUseGoBackButton && (
                     <View style={styles.loadingMessage}>
                         <View style={styles.pv4}>
                             <Text>{translate('common.thisIsTakingLongerThanExpected')}</Text>
diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx
index 1e8296815d23b..efcc7eeaff242 100644
--- a/src/components/PopoverMenu.tsx
+++ b/src/components/PopoverMenu.tsx
@@ -166,6 +166,9 @@ type PopoverMenuProps = Partial<ModalAnimationProps> & {
     /** Whether we want to avoid the safari exception of ignoring shouldCallAfterModalHide  */
     shouldAvoidSafariException?: boolean;
 
+    /** Whether to preserve focus on sub items after selection */
+    shouldMaintainFocusAfterSubItemSelect?: boolean;
+
     /** Used to locate the component in the tests */
     testID?: string;
 };
@@ -283,6 +286,7 @@ function BasePopoverMenu({
     shouldUpdateFocusedIndex = true,
     shouldUseModalPaddingStyle,
     shouldAvoidSafariException = false,
+    shouldMaintainFocusAfterSubItemSelect: shouldPreserveFocusOnSubItems = true,
     testID,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
@@ -449,7 +453,14 @@ function BasePopoverMenu({
 
     const handleModalHide = () => {
         onModalHide?.();
-        setFocusedIndex(currentMenuItemsFocusedIndex);
+        const keyPath = buildKeyPathFromIndexPath(menuItems, enteredSubMenuIndexes);
+        const resolved = resolveIndexPathByKeyPath(menuItems, keyPath);
+
+        if (resolved.found) {
+            setFocusedIndex(getSelectedItemIndex(resolved.itemsAtLeaf));
+        } else {
+            setFocusedIndex(currentMenuItemsFocusedIndex);
+        }
     };
 
     // When the menu items are changed, we want to reset the sub-menu to make sure
@@ -476,7 +487,7 @@ function BasePopoverMenu({
 
         const resolved = resolveIndexPathByKeyPath(menuItems, keyPath);
 
-        if (resolved.found) {
+        if (resolved.found && shouldPreserveFocusOnSubItems) {
             setEnteredSubMenuIndexes(resolved.indexes);
             setCurrentMenuItems(resolved.itemsAtLeaf);
             if (!isVisible) {
diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
index 828f62b61887a..a52b6cd9207ce 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.tsx
+++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -1,6 +1,6 @@
-/* eslint-disable no-underscore-dangle */
-import type {AVPlaybackStatus, VideoFullscreenUpdateEvent} from 'expo-av';
-import {ResizeMode, Video, VideoFullscreenUpdate} from 'expo-av';
+import {useEvent, useEventListener} from 'expo';
+import type {MutedChangeEventPayload, PlayingChangeEventPayload, StatusChangeEventPayload, TimeUpdateEventPayload, VideoPlayer} from 'expo-video';
+import {useVideoPlayer, VideoView} from 'expo-video';
 import debounce from 'lodash/debounce';
 import type {RefObject} from 'react';
 import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
@@ -21,11 +21,10 @@ import VideoPopoverMenu from '@components/VideoPopoverMenu';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
-import {isMobileSafari} from '@libs/Browser';
+import {isSafari} from '@libs/Browser';
 import {canUseTouchScreen as canUseTouchScreenLib} from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
-import shouldReplayVideo from './shouldReplayVideo';
-import type {VideoPlayerProps, VideoWithOnFullScreenUpdate} from './types';
+import type VideoPlayerProps from './types';
 import useHandleNativeVideoControls from './useHandleNativeVideoControls';
 import * as VideoUtils from './utils';
 import VideoErrorIndicator from './VideoErrorIndicator';
@@ -33,26 +32,22 @@ import VideoPlayerControls from './VideoPlayerControls';
 
 function BaseVideoPlayer({
     url,
-    resizeMode = ResizeMode.CONTAIN,
-    onVideoLoaded,
+    onSourceLoaded,
     isLooping = false,
     style,
     videoPlayerStyle,
-    videoStyle,
     videoControlsStyle,
     videoDuration = 0,
-    controlsStatus = CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW,
     shouldUseSharedVideoElement = false,
     shouldUseSmallVideoControls = false,
-    onPlaybackStatusUpdate,
-    onFullscreenUpdate,
-    shouldPlay,
     // TODO: investigate what is the root cause of the bug with unexpected video switching
     // isVideoHovered caused a bug with unexpected video switching. We are investigating the root cause of the issue,
     // but current workaround is just not to use it here for now. This causes not displaying the video controls when
     // user hovers the mouse over the carousel arrows, but this UI bug feels much less troublesome for now.
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     isVideoHovered = false,
+    controlsStatus = CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW,
+    shouldPlay,
     isPreview,
     reportID,
     onTap,
@@ -61,24 +56,25 @@ function BaseVideoPlayer({
     const {
         pauseVideo,
         playVideo,
+        replayVideo,
         currentlyPlayingURL,
         sharedElement,
         originalParent,
         shareVideoPlayerElements,
         currentVideoPlayerRef,
+        currentVideoViewRef,
         updateCurrentURLAndReportID,
-        videoResumeTryNumberRef,
         setCurrentlyPlayingURL,
+        mountedVideoPlayersRef,
+        playerStatus,
+        updatePlayerStatus,
     } = usePlaybackContext();
     const {isFullScreenRef} = useFullScreenContext();
-    const {isOffline} = useNetwork();
-    const [duration, setDuration] = useState(videoDuration * 1000);
-    const [position, setPosition] = useState(0);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [isLoading, setIsLoading] = useState(true);
+
+    const isOffline = useNetwork().isOffline;
+    const [duration, setDuration] = useState(videoDuration);
     const [isEnded, setIsEnded] = useState(false);
-    const [isBuffering, setIsBuffering] = useState(true);
-    const [hasError, setHasError] = useState(false);
+    const [isFirstLoad, setIsFirstLoad] = useState(true);
     // we add "#t=0.001" at the end of the URL to skip first millisecond of the video and always be able to show proper video preview when video is paused at the beginning
     const [sourceURL] = useState(() => VideoUtils.addSkipTimeTagToURL(url.includes('blob:') || url.includes('file:///') ? url : addEncryptedAuthTokenToURL(url), 0.001));
     const [isPopoverVisible, setIsPopoverVisible] = useState(false);
@@ -89,7 +85,48 @@ function BaseVideoPlayer({
         opacity: controlsOpacity.get(),
     }));
 
-    const videoPlayerRef = useRef<VideoWithOnFullScreenUpdate | null>(null);
+    /* eslint-disable no-param-reassign */
+    // According to the library docs, the player is configured by mutating the provided instance
+    const videoPlayerRef = useRef<VideoPlayer>(
+        useVideoPlayer(sourceURL, (player) => {
+            player.loop = isLooping;
+            player.muted = true;
+            player.timeUpdateEventInterval = 0.1;
+        }),
+    );
+    /* eslint-enable no-param-reassign */
+
+    const isPlaying = videoPlayerRef.current.playing;
+    const {currentTime, bufferedPosition} = useEvent(videoPlayerRef.current, 'timeUpdate', {currentTime: 0, bufferedPosition: 0} as TimeUpdateEventPayload);
+    const {status} = useEvent(videoPlayerRef.current, 'statusChange', {status: shouldUseSharedVideoElement ? playerStatus.current : 'loading'} as StatusChangeEventPayload);
+
+    const isLoading = useMemo(() => {
+        return status === 'loading';
+    }, [status]);
+
+    const hasError = useMemo(() => {
+        return status === 'error';
+    }, [status]);
+
+    const [hasErrorIconVisible, setHasErrorIconVisible] = useState(false);
+
+    useNetwork({
+        onReconnect: () => {
+            if (!(currentTime <= 0 && hasError)) {
+                return;
+            }
+            videoPlayerRef.current.replaceAsync(sourceURL);
+        },
+    });
+
+    useEffect(() => {
+        if (!(isOffline && isLoading)) {
+            return;
+        }
+        videoPlayerRef.current.replaceAsync('');
+    }, [isLoading, isOffline]);
+
+    const videoViewRef = useRef<VideoView | null>(null);
     const videoPlayerElementParentRef = useRef<View | HTMLDivElement | null>(null);
     const videoPlayerElementRef = useRef<View | HTMLDivElement | null>(null);
     const sharedVideoPlayerParentRef = useRef<View | HTMLDivElement | null>(null);
@@ -97,28 +134,51 @@ function BaseVideoPlayer({
     const canUseTouchScreen = canUseTouchScreenLib();
     const isCurrentlyURLSet = currentlyPlayingURL === url;
     const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => url.startsWith(prefix));
-    const videoStateRef = useRef<AVPlaybackStatus | null>(null);
+    const shouldShowErrorIndicator = useMemo(() => {
+        // No need to set hasError while offline, since the offline indicator is already shown.
+        // Once the user reconnects, if the video is unsupported, the error will be triggered again.
+        return hasError && !isOffline;
+    }, [hasError, isOffline]);
+    const shouldShowLoadingIndicator = useMemo(() => {
+        // We want to show LoadingIndicator when video's loading and paused, except when it's loading
+        // for the first time, then playing/loading may vary. Video should be online and without errors.
+        return isLoading && (!isPlaying || currentTime <= 0) && !isOffline && !hasError;
+    }, [currentTime, hasError, isLoading, isOffline, isPlaying]);
+    const shouldShowOfflineIndicator = useMemo(() => {
+        return isOffline && currentTime + bufferedPosition <= 0;
+    }, [bufferedPosition, currentTime, isOffline]);
     const {updateVolume, lastNonZeroVolume} = useVolumeContext();
     useHandleNativeVideoControls({
-        videoPlayerRef,
+        videoViewRef,
         isOffline,
         isLocalFile: isUploading,
     });
-    const {videoPopoverMenuPlayerRef, currentPlaybackSpeed, setCurrentPlaybackSpeed, setSource: setPopoverMenuSource} = useVideoPopoverMenuContext();
-    const {source} = videoPopoverMenuPlayerRef.current?.props ?? {};
-    const shouldUseNewRate = typeof source === 'number' || !source || source.uri !== sourceURL;
+
+    const {updateVideoPopoverMenuPlayerRef, updatePlaybackSpeed, updateSource: updatePopoverMenuSource} = useVideoPopoverMenuContext();
 
     const togglePlayCurrentVideo = useCallback(() => {
-        setIsEnded(false);
-        videoResumeTryNumberRef.current = 0;
         if (!isCurrentlyURLSet) {
             updateCurrentURLAndReportID(url, reportID);
-        } else if (isPlaying) {
+            return;
+        }
+
+        const player = videoPlayerRef.current;
+        if (isLoading || !player) {
+            return;
+        }
+
+        if (player.playing) {
             pauseVideo();
-        } else {
-            playVideo();
+            return;
+        }
+
+        if (isEnded && currentTime === duration) {
+            replayVideo();
+            return;
         }
-    }, [isCurrentlyURLSet, isPlaying, pauseVideo, playVideo, reportID, updateCurrentURLAndReportID, url, videoResumeTryNumberRef]);
+
+        playVideo();
+    }, [isCurrentlyURLSet, isLoading, isEnded, currentTime, duration, playVideo, updateCurrentURLAndReportID, url, reportID, pauseVideo, replayVideo]);
 
     const hideControl = useCallback(() => {
         if (isEnded) {
@@ -174,149 +234,78 @@ function BaseVideoPlayer({
     }, [controlStatusState, controlsOpacity, hideControl]);
 
     const showPopoverMenu = (event?: GestureResponderEvent | KeyboardEvent) => {
-        videoPopoverMenuPlayerRef.current = videoPlayerRef.current;
-        videoPlayerRef.current?.getStatusAsync().then((status) => {
-            if (!('rate' in status && status.rate)) {
-                return;
-            }
-            if (shouldUseNewRate) {
-                setCurrentPlaybackSpeed(status.rate as PlaybackSpeed);
-            }
-            setIsPopoverVisible(true);
-        });
-        setPopoverMenuSource(url);
+        updateVideoPopoverMenuPlayerRef(videoPlayerRef.current);
+        if (!videoPlayerRef.current?.playbackRate) {
+            return;
+        }
+        updatePlaybackSpeed(videoPlayerRef.current.playbackRate as PlaybackSpeed);
+        setIsPopoverVisible(true);
+
+        updatePopoverMenuSource(url);
         if (!event || !('nativeEvent' in event)) {
             return;
         }
         setPopoverAnchorPosition({horizontal: event.nativeEvent.pageX, vertical: event.nativeEvent.pageY});
     };
 
-    const hidePopoverMenu = () => {
-        setIsPopoverVisible(false);
-    };
-
-    // fix for iOS mWeb: preventing iOS native player default behavior from pausing the video when exiting fullscreen
-    const preventPausingWhenExitingFullscreen = useCallback(
-        (isVideoPlaying: boolean) => {
-            if (videoResumeTryNumberRef.current === 0 || isVideoPlaying) {
-                return;
-            }
-            if (videoResumeTryNumberRef.current === 1) {
-                playVideo();
-            }
-            videoResumeTryNumberRef.current -= 1;
-        },
-        [playVideo, videoResumeTryNumberRef],
-    );
-    const prevIsMuted = useSharedValue(true);
-    const prevVolume = useSharedValue(0);
-
-    const handlePlaybackStatusUpdate = useCallback(
-        (status: AVPlaybackStatus) => {
-            if (!status.isLoaded) {
-                preventPausingWhenExitingFullscreen(false);
-                setIsPlaying(false);
-                setIsLoading(true); // when video is ready to display duration is not NaN
-                setIsBuffering(false);
-                setDuration(videoDuration * 1000);
-                setPosition(0);
-                onPlaybackStatusUpdate?.(status);
-                return;
-            }
-            if (status.didJustFinish) {
-                setIsEnded(status.didJustFinish && !status.isLooping);
-                setControlStatusState(CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW);
-                controlsOpacity.set(1);
-            } else if (status.isPlaying && isEnded) {
-                setIsEnded(false);
-            }
-
-            // These two conditions are essential for the mute and unmute functionality to work properly during
-            // fullscreen playback on the web
-            if (prevIsMuted.get() && prevVolume.get() === 0 && !status.isMuted && status.volume === 0) {
-                updateVolume(lastNonZeroVolume.get());
-            }
-
-            if (isFullScreenRef.current && prevVolume.get() !== 0 && status.volume === 0 && !status.isMuted) {
-                currentVideoPlayerRef.current?.setStatusAsync({isMuted: true});
-            }
-            prevIsMuted.set(status.isMuted);
-            prevVolume.set(status.volume);
+    useEventListener(videoPlayerRef.current, 'mutedChange', (payload: MutedChangeEventPayload) => {
+        if (payload.muted || !payload.oldMuted) {
+            return;
+        }
+        updateVolume(lastNonZeroVolume.get());
+    });
 
-            const isVideoPlaying = status.isPlaying;
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            const currentDuration = status.durationMillis || videoDuration * 1000;
-            const currentPosition = status.positionMillis || 0;
+    useEventListener(videoPlayerRef.current, 'playingChange', (payload: PlayingChangeEventPayload) => {
+        const isVideoPlaying = payload.isPlaying;
+        if (isVideoPlaying && isEnded) {
+            setIsEnded(false);
+        }
+    });
 
-            if (shouldReplayVideo(status, isVideoPlaying, currentDuration, currentPosition) && !isEnded) {
-                videoPlayerRef.current?.setStatusAsync({positionMillis: 0, shouldPlay: true});
+    useEventListener(videoPlayerRef.current, 'statusChange', (payload: StatusChangeEventPayload) => {
+        if (payload.status === 'error') {
+            setHasErrorIconVisible(true);
+        } else {
+            updatePlayerStatus(payload.status);
+        }
+        if (payload.status !== 'readyToPlay') {
+            return;
+        }
+        isReadyForDisplayRef.current = true;
+        setHasErrorIconVisible(false);
+        if (isFirstLoad) {
+            setIsFirstLoad(false);
+            if (videoPlayerRef.current === currentVideoPlayerRef.current && !isUploading) {
+                playVideo();
             }
+        }
+    });
 
-            preventPausingWhenExitingFullscreen(isVideoPlaying);
-            setIsPlaying(isVideoPlaying);
-            setIsLoading(Number.isNaN(status.durationMillis)); // when video is ready to display duration is not NaN
-            setIsBuffering(status.isBuffering);
-            setDuration(currentDuration);
-            setPosition(currentPosition);
-
-            videoStateRef.current = status;
-            onPlaybackStatusUpdate?.(status);
-        },
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want to trigger this when isPlaying changes because isPlaying is only used inside shouldReplayVideo
-        [onPlaybackStatusUpdate, preventPausingWhenExitingFullscreen, videoDuration, isEnded],
-    );
-
-    const handleFullscreenUpdate = useCallback(
-        (event: VideoFullscreenUpdateEvent) => {
-            onFullscreenUpdate?.(event);
-
-            if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_PRESENT) {
-                // When the video is in fullscreen, we don't want the scroll to be captured by the InvertedFlatList of report screen.
-                // This will also allow the user to scroll the video playback speed.
-                if (videoPlayerElementParentRef.current && 'addEventListener' in videoPlayerElementParentRef.current) {
-                    videoPlayerElementParentRef.current.addEventListener('wheel', stopWheelPropagation);
-                }
-            }
+    useEventListener(videoPlayerRef.current, 'playToEnd', () => {
+        setIsEnded(true);
+        setControlStatusState(CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW);
+        controlsOpacity.set(1);
+    });
 
-            if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_DISMISS) {
-                if (videoPlayerElementParentRef.current && 'removeEventListener' in videoPlayerElementParentRef.current) {
-                    videoPlayerElementParentRef.current.removeEventListener('wheel', stopWheelPropagation);
-                }
-                isFullScreenRef.current = false;
-
-                // Sync volume updates in full screen mode after leaving it
-                currentVideoPlayerRef.current?.getStatusAsync?.().then((status) => {
-                    if (!('isMuted' in status)) {
-                        return;
-                    }
-                    updateVolume(status.isMuted ? 0 : status.volume || 1);
-                });
-
-                // we need to use video state ref to check if video is playing, to catch proper state after exiting fullscreen
-                // and also fix a bug with fullscreen mode dismissing when handleFullscreenUpdate function changes
-                if (videoStateRef.current && (!('isPlaying' in videoStateRef.current) || videoStateRef.current.isPlaying)) {
-                    pauseVideo();
-                    playVideo();
-                    videoResumeTryNumberRef.current = 3;
-                }
-            }
-        },
-        [isFullScreenRef, onFullscreenUpdate, pauseVideo, playVideo, videoResumeTryNumberRef, updateVolume, currentVideoPlayerRef, stopWheelPropagation],
-    );
+    useEventListener(videoPlayerRef.current, 'sourceLoad', (event) => {
+        onSourceLoaded?.(event);
+    });
 
-    const bindFunctions = useCallback(() => {
-        const currentVideoPlayer = currentVideoPlayerRef.current;
-        if (!currentVideoPlayer) {
+    useEffect(() => {
+        if (!videoPlayerRef.current.duration) {
             return;
         }
-        currentVideoPlayer._onPlaybackStatusUpdate = handlePlaybackStatusUpdate;
-        currentVideoPlayer._onFullscreenUpdate = handleFullscreenUpdate;
+        setDuration(videoPlayerRef.current.duration);
+    }, [videoPlayerRef.current.duration]);
 
-        // update states after binding
-        currentVideoPlayer.getStatusAsync().then((status) => {
-            handlePlaybackStatusUpdate(status);
-        });
-    }, [currentVideoPlayerRef, handleFullscreenUpdate, handlePlaybackStatusUpdate]);
+    useEffect(() => {
+        mountedVideoPlayersRef.current.push(url);
+        return () => {
+            const mountedVideoPlayersCurrentRef = mountedVideoPlayersRef;
+            const urlIndex = mountedVideoPlayersCurrentRef.current.indexOf(url);
+            mountedVideoPlayersCurrentRef.current.splice(urlIndex, 1);
+        };
+    }, [mountedVideoPlayersRef, url]);
 
     // use `useLayoutEffect` instead of `useEffect` because ref is null when unmount in `useEffect` hook
     // ref url: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
@@ -325,11 +314,13 @@ function BaseVideoPlayer({
             if (shouldUseSharedVideoElement || videoPlayerRef.current !== currentVideoPlayerRef.current) {
                 return;
             }
-            currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false, positionMillis: 0}).then(() => {
+            if (currentVideoPlayerRef.current) {
+                currentVideoPlayerRef.current.pause();
+                currentVideoPlayerRef.current.currentTime = 0;
                 currentVideoPlayerRef.current = null;
-            });
+            }
         },
-        [currentVideoPlayerRef, shouldUseSharedVideoElement],
+        [currentVideoPlayerRef, mountedVideoPlayersRef, shouldUseSharedVideoElement, url],
     );
 
     useEffect(() => {
@@ -343,7 +334,8 @@ function BaseVideoPlayer({
         }
 
         currentVideoPlayerRef.current = videoPlayerRef.current;
-    }, [url, currentVideoPlayerRef, isUploading, pauseVideo]);
+        currentVideoViewRef.current = videoViewRef.current;
+    }, [url, currentVideoPlayerRef, isUploading, pauseVideo, currentVideoViewRef]);
 
     const isCurrentlyURLSetRef = useRef<boolean | undefined>(undefined);
     isCurrentlyURLSetRef.current = isCurrentlyURLSet;
@@ -362,30 +354,34 @@ function BaseVideoPlayer({
     // update shared video elements
     useEffect(() => {
         // On mobile safari, we need to auto-play when sharing video element here
+        if (status !== 'error') {
+            updatePlayerStatus(status);
+        }
         shareVideoPlayerElements(
             videoPlayerRef.current,
+            videoViewRef.current,
             videoPlayerElementParentRef.current,
             videoPlayerElementRef.current,
-            isUploading || isFullScreenRef.current || (!isReadyForDisplayRef.current && !isMobileSafari()),
+            (isUploading && !isCurrentlyURLSet) || isFullScreenRef.current || !isReadyForDisplayRef.current || hasError,
             {shouldUseSharedVideoElement, url, reportID},
         );
-    }, [currentlyPlayingURL, shouldUseSharedVideoElement, shareVideoPlayerElements, url, isUploading, isFullScreenRef, reportID]);
-
-    // Call bindFunctions() through the refs to avoid adding it to the dependency array of the DOM mutation effect, as doing so would change the DOM when the functions update.
-    const bindFunctionsRef = useRef<(() => void) | null>(null);
-    const shouldBindFunctionsRef = useRef(false);
-
-    useEffect(() => {
-        bindFunctionsRef.current = bindFunctions;
-        if (shouldBindFunctionsRef.current) {
-            bindFunctions();
-        }
-    }, [bindFunctions]);
+    }, [
+        currentlyPlayingURL,
+        shouldUseSharedVideoElement,
+        shareVideoPlayerElements,
+        url,
+        isUploading,
+        reportID,
+        videoPlayerRef,
+        isFullScreenRef,
+        hasError,
+        isCurrentlyURLSet,
+        status,
+        updatePlayerStatus,
+    ]);
 
     // append shared video element to new parent (used for example in attachment modal)
     useEffect(() => {
-        shouldBindFunctionsRef.current = false;
-
         if (url !== currentlyPlayingURL || !sharedElement || isFullScreenRef.current) {
             return;
         }
@@ -398,12 +394,16 @@ function BaseVideoPlayer({
             }
             return;
         }
-
-        videoPlayerRef.current = currentVideoPlayerRef.current;
+        if (currentVideoPlayerRef.current) {
+            videoPlayerRef.current = currentVideoPlayerRef.current;
+            videoViewRef.current = currentVideoViewRef.current;
+        }
         if (currentlyPlayingURL === url && newParentRef && 'appendChild' in newParentRef) {
-            newParentRef.appendChild(sharedElement as HTMLDivElement);
-            bindFunctionsRef.current?.();
-            shouldBindFunctionsRef.current = true;
+            if (newParentRef.hasChildNodes()) {
+                newParentRef.firstElementChild?.replaceWith(sharedElement as HTMLDivElement);
+            } else {
+                newParentRef.appendChild(sharedElement as HTMLDivElement);
+            }
         }
         return () => {
             if (!originalParent || !('appendChild' in originalParent)) {
@@ -414,9 +414,13 @@ function BaseVideoPlayer({
             if (!newParentRef || !('childNodes' in newParentRef)) {
                 return;
             }
+            const mountedVideoPlayersCurrentRef = mountedVideoPlayersRef;
+            if (mountedVideoPlayersCurrentRef.current.filter((u) => u === url).length > 0) {
+                return;
+            }
             newParentRef.childNodes[0]?.remove();
         };
-    }, [currentVideoPlayerRef, currentlyPlayingURL, isFullScreenRef, originalParent, reportID, sharedElement, shouldUseSharedVideoElement, url]);
+    }, [currentVideoPlayerRef, currentVideoViewRef, currentlyPlayingURL, isFullScreenRef, mountedVideoPlayersRef, originalParent, reportID, sharedElement, shouldUseSharedVideoElement, url]);
 
     useEffect(() => {
         if (!shouldPlay) {
@@ -425,9 +429,14 @@ function BaseVideoPlayer({
         updateCurrentURLAndReportID(url, reportID);
     }, [reportID, shouldPlay, updateCurrentURLAndReportID, url]);
 
+    // ensure that video loads after page refresh on iOS Safari
     useEffect(() => {
-        videoPlayerRef.current?.setStatusAsync({isMuted: true});
-    }, []);
+        const videoElement = videoViewRef.current?.nativeRef?.current as HTMLVideoElement;
+        if (!videoElement || hasError || !isSafari() || sharedElement) {
+            return;
+        }
+        videoElement.load();
+    }, [hasError, sharedElement]);
 
     return (
         <>
@@ -482,78 +491,75 @@ function BaseVideoPlayer({
                                             videoPlayerElementParentRef.current = el;
                                         }}
                                     >
-                                        <Video
-                                            ref={videoPlayerRef}
-                                            style={[styles.w100, styles.h100, videoPlayerStyle]}
-                                            videoStyle={[styles.w100, styles.h100, videoStyle]}
-                                            source={{
-                                                // if video is loading and is offline, we want to change uri to "" to
-                                                // reset the video player after connection is back
-                                                uri: !isLoading || (isLoading && !isOffline) ? sourceURL : '',
-                                            }}
-                                            shouldPlay={shouldPlay}
-                                            useNativeControls={false}
-                                            resizeMode={resizeMode as ResizeMode}
-                                            isLooping={isLooping}
-                                            onReadyForDisplay={(e) => {
-                                                isReadyForDisplayRef.current = true;
-                                                onVideoLoaded?.(e);
-                                                if (shouldUseNewRate) {
-                                                    return;
-                                                }
-                                                videoPlayerRef.current?.setStatusAsync?.({rate: currentPlaybackSpeed});
-                                            }}
-                                            onLoad={() => {
-                                                if (hasError) {
-                                                    setHasError(false);
-                                                }
-                                                if (!isCurrentlyURLSet || isUploading) {
+                                        <VideoView
+                                            // has to be switched to fullscreenOptions={{enable: true}} when mobile Safari gets fixed
+                                            allowsFullscreen
+                                            player={videoPlayerRef.current}
+                                            style={[styles.w100, styles.h100, videoPlayerStyle, hasErrorIconVisible && {opacity: 0}]}
+                                            nativeControls={isFullScreenRef.current}
+                                            playsInline
+                                            testID={CONST.VIDEO_PLAYER_TEST_ID}
+                                            ref={videoViewRef}
+                                            contentFit="contain"
+                                            onFullscreenEnter={() => {
+                                                isFullScreenRef.current = true;
+
+                                                if (!(videoPlayerElementParentRef.current && 'addEventListener' in videoPlayerElementParentRef.current)) {
                                                     return;
                                                 }
-                                                playVideo();
+                                                // When the video is in fullscreen, we don't want the scroll to be captured by the InvertedFlatList of report screen.
+                                                // This will also allow the user to scroll the video playback speed.
+                                                videoPlayerElementParentRef.current.addEventListener('wheel', stopWheelPropagation);
                                             }}
-                                            onPlaybackStatusUpdate={handlePlaybackStatusUpdate}
-                                            onFullscreenUpdate={handleFullscreenUpdate}
-                                            onError={() => {
-                                                // No need to set hasError while offline, since the offline indicator is already shown.
-                                                // Once the user reconnects, if the video is unsupported, the error will be triggered again.
-                                                if (isOffline) {
-                                                    return;
+                                            onFullscreenExit={() => {
+                                                isFullScreenRef.current = false;
+
+                                                if (videoPlayerElementParentRef.current && 'removeEventListener' in videoPlayerElementParentRef.current) {
+                                                    videoPlayerElementParentRef.current.removeEventListener('wheel', stopWheelPropagation);
                                                 }
-                                                setHasError(true);
+
+                                                // Sync volume updates in full screen mode after leaving it
+                                                updateVolume(videoPlayerRef.current.muted ? 0 : videoPlayerRef.current.volume || 1);
                                             }}
-                                            testID={CONST.VIDEO_PLAYER_TEST_ID}
                                         />
                                     </View>
                                 )}
                             </PressableWithoutFeedback>
-                            {hasError && !isBuffering && !isOffline && <VideoErrorIndicator isPreview={isPreview} />}
-                            {((isLoading && !isOffline && !hasError) || (isBuffering && !isPlaying && !hasError)) && (
-                                <FullScreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />
-                            )}
-                            {isLoading && (isOffline || !isBuffering) && <AttachmentOfflineIndicator isPreview={isPreview} />}
-                            {controlStatusState !== CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE && !isLoading && (isPopoverVisible || isHovered || canUseTouchScreen || isEnded) && (
-                                <VideoPlayerControls
-                                    duration={duration}
-                                    position={position}
-                                    url={url}
-                                    videoPlayerRef={videoPlayerRef}
-                                    isPlaying={isPlaying}
-                                    small={shouldUseSmallVideoControls}
-                                    style={[videoControlsStyle, controlsAnimatedStyle]}
-                                    togglePlayCurrentVideo={togglePlayCurrentVideo}
-                                    controlsStatus={controlStatusState}
-                                    showPopoverMenu={showPopoverMenu}
-                                    reportID={reportID}
+                            {shouldShowErrorIndicator && <VideoErrorIndicator isPreview={isPreview} />}
+                            {shouldShowLoadingIndicator && (
+                                <FullScreenLoadingIndicator
+                                    style={[styles.opacity1, styles.bgTransparent]}
+                                    shouldUseGoBackButton={false}
                                 />
                             )}
+                            {shouldShowOfflineIndicator && <AttachmentOfflineIndicator isPreview={isPreview} />}
+                            {controlStatusState !== CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE &&
+                                !shouldShowLoadingIndicator &&
+                                !shouldShowOfflineIndicator &&
+                                !shouldShowErrorIndicator &&
+                                (isPopoverVisible || isHovered || canUseTouchScreen || isEnded) && (
+                                    <VideoPlayerControls
+                                        duration={duration || 0}
+                                        position={currentTime || 0}
+                                        url={url}
+                                        videoPlayerRef={videoPlayerRef}
+                                        videoViewRef={videoViewRef}
+                                        isPlaying={isPlaying}
+                                        small={shouldUseSmallVideoControls}
+                                        style={[videoControlsStyle, controlsAnimatedStyle]}
+                                        togglePlayCurrentVideo={togglePlayCurrentVideo}
+                                        controlsStatus={controlStatusState}
+                                        showPopoverMenu={showPopoverMenu}
+                                        reportID={reportID}
+                                    />
+                                )}
                         </View>
                     )}
                 </Hoverable>
             </PressableWithoutFeedback>
             <VideoPopoverMenu
                 isPopoverVisible={isPopoverVisible}
-                hidePopover={hidePopoverMenu}
+                hidePopover={() => setIsPopoverVisible(false)}
                 anchorPosition={popoverAnchorPosition}
             />
         </>
diff --git a/src/components/VideoPlayer/VideoPlayerControls/index.tsx b/src/components/VideoPlayer/VideoPlayerControls/index.tsx
index aaac27553d920..3efed7dad0d39 100644
--- a/src/components/VideoPlayer/VideoPlayerControls/index.tsx
+++ b/src/components/VideoPlayer/VideoPlayerControls/index.tsx
@@ -1,15 +1,13 @@
-import type {Video} from 'expo-av';
+import type {VideoPlayer, VideoView} from 'expo-video';
 import type {RefObject} from 'react';
 import React, {useCallback, useMemo, useState} from 'react';
 import type {GestureResponderEvent, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Animated from 'react-native-reanimated';
 import type {ValueOf} from 'type-fest';
-import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import IconButton from '@components/VideoPlayer/IconButton';
-import {convertMillisecondsToTime} from '@components/VideoPlayer/utils';
-import {useFullScreenContext} from '@components/VideoPlayerContexts/FullScreenContext';
+import {convertSecondsToTime} from '@components/VideoPlayer/utils';
 import {usePlaybackContext} from '@components/VideoPlayerContexts/PlaybackContext';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
@@ -29,7 +27,10 @@ type VideoPlayerControlsProps = {
     url: string;
 
     /** Ref for video player. */
-    videoPlayerRef: RefObject<Video | null>;
+    videoPlayerRef: RefObject<VideoPlayer | null>;
+
+    /** Ref for video view component. */
+    videoViewRef: RefObject<VideoView | null>;
 
     /** Is video playing. */
     isPlaying: boolean;
@@ -56,6 +57,7 @@ function VideoPlayerControls({
     position,
     url,
     videoPlayerRef,
+    videoViewRef,
     isPlaying,
     small = false,
     style,
@@ -64,11 +66,10 @@ function VideoPlayerControls({
     controlsStatus = CONST.VIDEO_PLAYER.CONTROLS_STATUS.SHOW,
     reportID,
 }: VideoPlayerControlsProps) {
-    const icons = useMemoizedLazyExpensifyIcons(['ThreeDots']);
+    const icons = useMemoizedLazyExpensifyIcons(['ThreeDots', 'Pause', 'Play', 'Fullscreen']);
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {updateCurrentURLAndReportID} = usePlaybackContext();
-    const {isFullScreenRef} = useFullScreenContext();
     const [shouldShowTime, setShouldShowTime] = useState(false);
     const iconSpacing = small ? styles.mr3 : styles.mr4;
 
@@ -77,19 +78,22 @@ function VideoPlayerControls({
     };
 
     const enterFullScreenMode = useCallback(() => {
-        isFullScreenRef.current = true;
         updateCurrentURLAndReportID(url, reportID);
-        videoPlayerRef.current?.presentFullscreenPlayer();
-    }, [isFullScreenRef, reportID, updateCurrentURLAndReportID, url, videoPlayerRef]);
+        videoViewRef.current?.enterFullscreen();
+    }, [reportID, updateCurrentURLAndReportID, url, videoViewRef]);
 
     const seekPosition = useCallback(
         (newPosition: number) => {
-            videoPlayerRef.current?.setStatusAsync({positionMillis: newPosition});
+            if (!videoPlayerRef.current) {
+                return;
+            }
+            // eslint-disable-next-line no-param-reassign
+            videoPlayerRef.current.currentTime = newPosition;
         },
         [videoPlayerRef],
     );
 
-    const durationFormatted = useMemo(() => convertMillisecondsToTime(duration), [duration]);
+    const durationFormatted = useMemo(() => convertSecondsToTime(duration), [duration]);
 
     return (
         <Animated.View
@@ -105,7 +109,7 @@ function VideoPlayerControls({
                 <View style={[styles.videoPlayerControlsButtonContainer, !small && styles.mb4]}>
                     <View style={[styles.videoPlayerControlsRow]}>
                         <IconButton
-                            src={isPlaying ? Expensicons.Pause : Expensicons.Play}
+                            src={isPlaying ? icons.Pause : icons.Play}
                             tooltipText={isPlaying ? translate('videoPlayer.pause') : translate('videoPlayer.play')}
                             onPress={togglePlayCurrentVideo}
                             style={styles.mr2}
@@ -114,7 +118,7 @@ function VideoPlayerControls({
                         />
                         {shouldShowTime && (
                             <View style={[styles.videoPlayerControlsRow]}>
-                                <Text style={[styles.videoPlayerText, styles.videoPlayerTimeComponentWidth]}>{convertMillisecondsToTime(position)}</Text>
+                                <Text style={[styles.videoPlayerText, styles.videoPlayerTimeComponentWidth]}>{convertSecondsToTime(position)}</Text>
                                 <Text style={[styles.videoPlayerText]}>/</Text>
                                 <Text style={[styles.videoPlayerText, styles.videoPlayerTimeComponentWidth]}>{durationFormatted}</Text>
                             </View>
@@ -123,7 +127,7 @@ function VideoPlayerControls({
                     <View style={[styles.videoPlayerControlsRow]}>
                         <VolumeButton style={iconSpacing} />
                         <IconButton
-                            src={Expensicons.Fullscreen}
+                            src={icons.Fullscreen}
                             tooltipText={translate('videoPlayer.fullscreen')}
                             onPress={enterFullScreenMode}
                             style={iconSpacing}
diff --git a/src/components/VideoPlayer/index.native.tsx b/src/components/VideoPlayer/index.native.tsx
index ea069c0bb4ec3..602950bfdeaa9 100644
--- a/src/components/VideoPlayer/index.native.tsx
+++ b/src/components/VideoPlayer/index.native.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import uniqueIDForVideoWithoutReport from '@components/VideoPlayerContexts/PlaybackContext/uniqueID';
 import CONST from '@src/CONST';
 import BaseVideoPlayer from './BaseVideoPlayer';
-import type {VideoPlayerProps} from './types';
+import type VideoPlayerProps from './types';
 
 function VideoPlayer({videoControlsStyle, shouldUseControlsBottomMargin = true, ...props}: VideoPlayerProps) {
     const {fakeReportID} = uniqueIDForVideoWithoutReport();
diff --git a/src/components/VideoPlayer/index.tsx b/src/components/VideoPlayer/index.tsx
index 31b250de276a3..d0c5a2eb99409 100644
--- a/src/components/VideoPlayer/index.tsx
+++ b/src/components/VideoPlayer/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import uniqueIDForVideoWithoutReport from '@components/VideoPlayerContexts/PlaybackContext/uniqueID';
 import BaseVideoPlayer from './BaseVideoPlayer';
-import type {VideoPlayerProps} from './types';
+import type VideoPlayerProps from './types';
 
 function VideoPlayer(props: VideoPlayerProps) {
     const {fakeReportID} = uniqueIDForVideoWithoutReport();
diff --git a/src/components/VideoPlayer/shouldReplayVideo.android.ts b/src/components/VideoPlayer/shouldReplayVideo.android.ts
deleted file mode 100644
index 2fae779deae20..0000000000000
--- a/src/components/VideoPlayer/shouldReplayVideo.android.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type {AVPlaybackStatusSuccess} from 'expo-av';
-
-/**
- * Whether to replay the video when users press play button
- */
-export default function shouldReplayVideo(e: AVPlaybackStatusSuccess, isPlaying: boolean, duration: number, position: number): boolean {
-    // When we upload an attachment on Android, didJustFinish is false and the duration is 0
-    // so we should return false if the duration is 0 to prevent auto-playing video when the video is uploading
-    if (!isPlaying && !e.didJustFinish && duration === position && duration !== 0) {
-        return true;
-    }
-    return false;
-}
diff --git a/src/components/VideoPlayer/shouldReplayVideo.ios.ts b/src/components/VideoPlayer/shouldReplayVideo.ios.ts
deleted file mode 100644
index 0a923d4306997..0000000000000
--- a/src/components/VideoPlayer/shouldReplayVideo.ios.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type {AVPlaybackStatusSuccess} from 'expo-av';
-
-/**
- * Whether to replay the video when users press play button
- */
-export default function shouldReplayVideo(e: AVPlaybackStatusSuccess, isPlaying: boolean, duration: number, position: number): boolean {
-    if (!isPlaying && e.isPlaying && duration === position) {
-        return true;
-    }
-    return false;
-}
diff --git a/src/components/VideoPlayer/shouldReplayVideo.ts b/src/components/VideoPlayer/shouldReplayVideo.ts
deleted file mode 100644
index 3a55562d4bd2f..0000000000000
--- a/src/components/VideoPlayer/shouldReplayVideo.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type {AVPlaybackStatusSuccess} from 'expo-av';
-
-/**
- * Whether to replay the video when users press play button
- */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function shouldReplayVideo(e: AVPlaybackStatusSuccess, isPlaying: boolean, duration: number, position: number): boolean {
-    return false;
-}
diff --git a/src/components/VideoPlayer/types.ts b/src/components/VideoPlayer/types.ts
index 2c6e924050d43..6d14f15499f1f 100644
--- a/src/components/VideoPlayer/types.ts
+++ b/src/components/VideoPlayer/types.ts
@@ -1,37 +1,85 @@
-import type {Video} from 'expo-av';
-import type {AVPlaybackStatus} from 'expo-av/build/AV';
-import type {VideoFullscreenUpdateEvent, VideoReadyForDisplayEvent} from 'expo-av/build/Video.types';
+import type {SourceLoadEventPayload} from 'expo-video';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 
-type VideoWithOnFullScreenUpdate = Video & {_onFullscreenUpdate: (event: VideoFullscreenUpdateEvent) => void};
-
 type VideoPlayerProps = {
+    /**
+     * Video source used to initialize the player.
+     */
     url: string;
-    onVideoLoaded?: (event: VideoReadyForDisplayEvent) => void;
-    resizeMode?: string;
+
+    /**
+     * Callback fired when the sourceLoad event is triggered.
+     * @param event Data containing information about the video source that finished loading.
+     */
+    onSourceLoaded?: (event: SourceLoadEventPayload) => void;
+
+    /**
+     * Whether the video should automatically replay after it ends.
+     */
     isLooping?: boolean;
-    // style for the whole video player component
+
+    /**
+     * Style applied to the entire VideoPlayer component.
+     */
     style?: StyleProp<ViewStyle>;
-    // style for the video player inside the component
+
+    /**
+     * Style applied to the VideoView inside the VideoPlayer component.
+     */
     videoPlayerStyle?: StyleProp<ViewStyle>;
-    // style for the video element inside the video player
-    videoStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Style applied to the video player controls.
+     */
     videoControlsStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Duration of the video resource, in milliseconds.
+     */
     videoDuration?: number;
+
+    /**
+     * Whether the VideoPlayer should use a shared video element.
+     */
     shouldUseSharedVideoElement?: boolean;
+
+    /**
+     * Whether the video controls should be displayed in a compact layout.
+     */
     shouldUseSmallVideoControls?: boolean;
-    shouldShowVideoControls?: boolean;
+
+    /**
+     * Whether the VideoPlayer is currently hovered.
+     */
     isVideoHovered?: boolean;
-    onFullscreenUpdate?: (event: VideoFullscreenUpdateEvent) => void;
-    onPlaybackStatusUpdate?: (status: AVPlaybackStatus) => void;
+
+    /**
+     * Whether the videoControlsStyle should include additional bottom margin.
+     */
     shouldUseControlsBottomMargin?: boolean;
+
+    /**
+     * Current status of the video controls.
+     */
     controlsStatus?: ValueOf<typeof CONST.VIDEO_PLAYER.CONTROLS_STATUS>;
+
+    /**
+     * Whether the video should play automatically after loading.
+     */
     shouldPlay?: boolean;
+
+    /**
+     * Whether the VideoPlayer is displayed inside a message preview.
+     */
     isPreview?: boolean;
+
+    /**
+     * Report ID of the video resource.
+     */
     reportID?: string;
     onTap?: (shouldShowArrows?: boolean) => void;
 };
 
-export type {VideoPlayerProps, VideoWithOnFullScreenUpdate};
+export default VideoPlayerProps;
diff --git a/src/components/VideoPlayer/useHandleNativeVideoControls/index.ts b/src/components/VideoPlayer/useHandleNativeVideoControls/index.ts
index 202937988d66b..4fb884d0e8f19 100644
--- a/src/components/VideoPlayer/useHandleNativeVideoControls/index.ts
+++ b/src/components/VideoPlayer/useHandleNativeVideoControls/index.ts
@@ -6,11 +6,9 @@ import type UseHandleNativeVideoControl from './types';
  * This hook hides the download button on the native video player in full-screen mode
  * when playing a local or offline video.
  */
-const useHandleNativeVideoControls: UseHandleNativeVideoControl = ({videoPlayerRef, isLocalFile, isOffline}) => {
+const useHandleNativeVideoControls: UseHandleNativeVideoControl = ({videoViewRef, isLocalFile, isOffline}) => {
     useEffect(() => {
-        // @ts-expect-error Property '_video' does not exist on type VideoWithOnFullScreenUpdate
-        // eslint-disable-next-line no-underscore-dangle
-        const videoElement = videoPlayerRef?.current?._nativeRef?.current?._video as HTMLVideoElement;
+        const videoElement = videoViewRef?.current?.nativeRef.current as HTMLVideoElement;
         if (!videoElement) {
             return;
         }
diff --git a/src/components/VideoPlayer/useHandleNativeVideoControls/types.ts b/src/components/VideoPlayer/useHandleNativeVideoControls/types.ts
index ea6bfd4b9a198..d1f22933c02b5 100644
--- a/src/components/VideoPlayer/useHandleNativeVideoControls/types.ts
+++ b/src/components/VideoPlayer/useHandleNativeVideoControls/types.ts
@@ -1,9 +1,20 @@
-import type {MutableRefObject} from 'react';
-import type {VideoWithOnFullScreenUpdate} from '@components/VideoPlayer/types';
+import type {VideoView} from 'expo-video';
+import type {RefObject} from 'react';
 
 type UseHandleNativeVideoControlParams = {
-    videoPlayerRef: MutableRefObject<VideoWithOnFullScreenUpdate | null>;
+    /**
+     * Reference to the VideoView component being handled.
+     */
+    videoViewRef: RefObject<VideoView | null>;
+
+    /**
+     * Whether the video source is a local file.
+     */
     isLocalFile: boolean;
+
+    /**
+     * Whether the user is currently in offline mode.
+     */
     isOffline: boolean;
 };
 type UseHandleNativeVideoControl = (params: UseHandleNativeVideoControlParams) => void;
diff --git a/src/components/VideoPlayer/utils.ts b/src/components/VideoPlayer/utils.ts
index b366d2fd4868d..20322c3858491 100644
--- a/src/components/VideoPlayer/utils.ts
+++ b/src/components/VideoPlayer/utils.ts
@@ -1,12 +1,12 @@
-import * as Browser from '@libs/Browser';
+import {isMobileWebKit} from '@libs/Browser';
 
 /**
- * Converts milliseconds to '[hours:]minutes:seconds' format
+ * Converts seconds to '[hours:]minutes:seconds' format
  */
-function convertMillisecondsToTime(milliseconds: number) {
-    const hours = Math.floor(milliseconds / 3600000);
-    const minutes = Math.floor((milliseconds / 60000) % 60);
-    const seconds = Math.floor((milliseconds / 1000) % 60)
+function convertSecondsToTime(secondsTotal: number) {
+    const hours = Math.floor(secondsTotal / 3600);
+    const minutes = Math.floor((secondsTotal / 60) % 60);
+    const seconds = Math.floor(secondsTotal % 60)
         .toFixed(0)
         .padStart(2, '0');
     return hours > 0 ? `${hours}:${String(minutes).padStart(2, '0')}:${seconds}` : `${minutes}:${seconds}`;
@@ -18,10 +18,10 @@ function convertMillisecondsToTime(milliseconds: number) {
 function addSkipTimeTagToURL(url: string, seconds: number) {
     // On iOS: mWeb (WebKit-based browser engines), we don't add the time fragment
     // because it's not supported and will throw (WebKitBlobResource error 1).
-    if (Browser.isMobileWebKit() || url.includes('#t=')) {
+    if (isMobileWebKit() || url.includes('#t=')) {
         return url;
     }
     return `${url}#t=${seconds}`;
 }
 
-export {convertMillisecondsToTime, addSkipTimeTagToURL};
+export {convertSecondsToTime, addSkipTimeTagToURL};
diff --git a/src/components/VideoPlayerContexts/PlaybackContext/index.tsx b/src/components/VideoPlayerContexts/PlaybackContext/index.tsx
index 0cbb738ebdeed..2f8cff67d9531 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext/index.tsx
+++ b/src/components/VideoPlayerContexts/PlaybackContext/index.tsx
@@ -1,6 +1,6 @@
-import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import type {VideoPlayer, VideoPlayerStatus, VideoView} from 'expo-video';
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import type {View} from 'react-native';
-import type {VideoWithOnFullScreenUpdate} from '@components/VideoPlayer/types';
 import {getReportOrDraftReport, isChatThread} from '@libs/ReportUtils';
 import Navigation from '@navigation/Navigation';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
@@ -16,6 +16,9 @@ function PlaybackContextProvider({children}: ChildrenProps) {
     const [sharedElement, setSharedElement] = useState<PlaybackContextValues['sharedElement']>(null);
     const [originalParent, setOriginalParent] = useState<OriginalParent>(null);
     const [currentRouteReportID, setCurrentRouteReportID] = useState<ProtectedCurrentRouteReportID>(NO_REPORT_ID);
+    const mountedVideoPlayersRef = useRef<string[]>([]);
+    const playerStatus = useRef<VideoPlayerStatus>('loading');
+
     const resetContextProperties = () => {
         setSharedElement(null);
         setOriginalParent(null);
@@ -31,17 +34,17 @@ function PlaybackContextProvider({children}: ChildrenProps) {
                 return;
             }
 
-            if (!url) {
-                if (currentlyPlayingURL) {
-                    video.pause();
-                }
-                return;
-            }
-
             if (currentlyPlayingURL && url !== currentlyPlayingURL) {
                 video.pause();
             }
 
+            // If there's no URL (image case), pause the player by setting currentlyPlayingURL
+            // without triggering the resetPlayerData in useEffect below
+            if (!url) {
+                setCurrentlyPlayingURL(reportID);
+                return;
+            }
+
             const report = getReportOrDraftReport(reportID);
             const isReportAChatThread = isChatThread(report);
             let reportIDtoSet;
@@ -62,9 +65,14 @@ function PlaybackContextProvider({children}: ChildrenProps) {
         [currentlyPlayingURL, video],
     );
 
+    const updatePlayerStatus = useCallback((newStatus: VideoPlayerStatus) => {
+        playerStatus.current = newStatus;
+    }, []);
+
     const shareVideoPlayerElements: PlaybackContextValues['shareVideoPlayerElements'] = useCallback(
         (
-            ref: VideoWithOnFullScreenUpdate | null,
+            videoPlayerRef: VideoPlayer | null,
+            videoViewRef: VideoView | null,
             parent: View | HTMLDivElement | null,
             child: View | HTMLDivElement | null,
             shouldNotAutoPlay: boolean,
@@ -74,7 +82,7 @@ function PlaybackContextProvider({children}: ChildrenProps) {
                 return;
             }
 
-            video.updateRef(ref);
+            video.updateRefs(videoPlayerRef, videoViewRef);
             setOriginalParent(parent);
             setSharedElement(child);
             // Prevents autoplay when uploading the attachment
@@ -118,13 +126,17 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             sharedElement,
             shareVideoPlayerElements,
             setCurrentlyPlayingURL,
-            currentVideoPlayerRef: video.ref,
+            currentVideoPlayerRef: video.playerRef,
+            currentVideoViewRef: video.viewRef,
             playVideo: video.play,
             pauseVideo: video.pause,
+            replayVideo: video.replay,
             stopVideo: video.stop,
             checkIfVideoIsPlaying: video.isPlaying,
-            videoResumeTryNumberRef: video.resumeTryNumberRef,
             resetVideoPlayerData: video.resetPlayerData,
+            mountedVideoPlayersRef,
+            playerStatus,
+            updatePlayerStatus,
         }),
         [
             updateCurrentURLAndReportID,
@@ -132,14 +144,16 @@ function PlaybackContextProvider({children}: ChildrenProps) {
             currentRouteReportID,
             originalParent,
             sharedElement,
-            video.ref,
+            shareVideoPlayerElements,
+            video.playerRef,
+            video.viewRef,
             video.play,
             video.pause,
+            video.replay,
             video.stop,
             video.isPlaying,
-            video.resumeTryNumberRef,
             video.resetPlayerData,
-            shareVideoPlayerElements,
+            updatePlayerStatus,
         ],
     );
 
diff --git a/src/components/VideoPlayerContexts/PlaybackContext/types.ts b/src/components/VideoPlayerContexts/PlaybackContext/types.ts
index 2e69aa3c4b65a..05f1788c8c29d 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext/types.ts
+++ b/src/components/VideoPlayerContexts/PlaybackContext/types.ts
@@ -1,55 +1,180 @@
-import type {AVPlaybackStatus} from 'expo-av';
+import type {VideoPlayer, VideoPlayerStatus, VideoView} from 'expo-video';
 import type {RefObject} from 'react';
 import type {View} from 'react-native';
-import type {VideoWithOnFullScreenUpdate} from '@components/VideoPlayer/types';
 
+/**
+ * Callback type for reporting the current playback status.
+ * @param isPlaying Whether the video is currently playing.
+ */
 type StatusCallback = (isPlaying: boolean) => void;
-type OriginalParent = View | HTMLDivElement | null;
-type UnloadVideo = () => void;
+
+/**
+ * Function type for stopping video playback.
+ */
 type StopVideo = () => void;
-type PlayVideoPromiseRef = RefObject<Promise<AVPlaybackStatus> | undefined>;
 
+/**
+ * Represents the original parent container of the video element.
+ * Can be a React Native View, an HTML div, or null if not set.
+ */
+type OriginalParent = View | HTMLDivElement | null;
+
+/**
+ * Metadata describing a video element instance.
+ */
 type VideoElementData = {
+    /**
+     * Whether the video player should use a shared video element.
+     */
     shouldUseSharedVideoElement: boolean;
+
+    /**
+     * The video source URL.
+     */
     url: string;
+
+    /**
+     * The report ID associated with the video, if available.
+     */
     reportID: string | undefined;
 };
 
+/**
+ * Playback-related context values available throughout the app.
+ */
 type PlaybackContextValues = {
+    /**
+     * Updates the currently tracked video URL and associated report ID.
+     * @param url The new video URL.
+     * @param reportID The new report ID.
+     */
     updateCurrentURLAndReportID: (url: string | undefined, reportID: string | undefined) => void;
+
+    /**
+     * The URL of the video currently being played, or null if none.
+     */
     currentlyPlayingURL: string | null;
+
+    /**
+     * The report ID associated with the current navigation route.
+     */
     currentRouteReportID: string | undefined;
+
+    /**
+     * The original parent container of the shared video element.
+     */
     originalParent: View | HTMLDivElement | null;
+
+    /**
+     * The shared video element container, if one exists.
+     */
     sharedElement: View | HTMLDivElement | null;
+
+    /**
+     * Updates shared video player elements across different parts of the UI.
+     * @param playerRef Reference to the VideoPlayer instance.
+     * @param viewRef Reference to the VideoView instance.
+     * @param parent Parent container for the shared video element.
+     * @param child Child container for the shared video element.
+     * @param isUploading Whether the video is currently uploading.
+     * @param videoElementData Metadata describing the video element.
+     */
     shareVideoPlayerElements: (
-        ref: VideoWithOnFullScreenUpdate | null,
+        playerRef: VideoPlayer | null,
+        viewRef: VideoView | null,
         parent: View | HTMLDivElement | null,
         child: View | HTMLDivElement | null,
         isUploading: boolean,
         videoElementData: VideoElementData,
     ) => void;
+
+    /**
+     * Sets the URL of the currently playing video.
+     */
     setCurrentlyPlayingURL: React.Dispatch<React.SetStateAction<string | null>>;
+
+    /**
+     * Array of currently mounted Video Player instances
+     */
+    mountedVideoPlayersRef: RefObject<string[]>;
+
+    /**
+     * Status of the currently used Video Player
+     */
+    playerStatus: RefObject<VideoPlayerStatus>;
+
+    /**
+     * Updates current videoPlayer status
+     * @param newStatus New videoPlayer status
+     */
+    updatePlayerStatus: (newStatus: VideoPlayerStatus) => void;
 };
 
+/**
+ * References and helper methods for managing video playback.
+ */
 type PlaybackContextVideoRefs = {
+    /**
+     * Resets the player data in the context.
+     */
     resetPlayerData: () => void;
+
+    /**
+     * Starts video playback.
+     */
     play: () => void;
+
+    /**
+     * Pauses video playback.
+     */
     pause: () => void;
+
+    /**
+     * Restarts video playback from the beginning.
+     */
+    replay: () => void;
+
+    /**
+     * Stops video playback and resets progress.
+     */
     stop: () => void;
+
+    /**
+     * Checks whether the video is currently playing.
+     * @param statusCallback Callback receiving the playback status.
+     */
     isPlaying: (statusCallback: StatusCallback) => void;
-    resumeTryNumberRef: RefObject<number>;
-    ref: RefObject<VideoWithOnFullScreenUpdate | null>;
-    updateRef: (ref: VideoWithOnFullScreenUpdate | null) => void;
+
+    /**
+     * Reference to the current VideoPlayer instance.
+     */
+    playerRef: RefObject<VideoPlayer | null>;
+
+    /**
+     * Reference to the current VideoView instance.
+     */
+    viewRef: RefObject<VideoView | null>;
+
+    /**
+     * Updates the current player and view references.
+     * @param playerRef Reference to the VideoPlayer.
+     * @param viewRef Reference to the VideoView.
+     */
+    updateRefs: (playerRef: VideoPlayer | null, viewRef: VideoView | null) => void;
 };
 
+/**
+ * Combined playback context with values and video control helpers.
+ */
 type PlaybackContext = PlaybackContextValues & {
     resetVideoPlayerData: PlaybackContextVideoRefs['resetPlayerData'];
     playVideo: PlaybackContextVideoRefs['play'];
     pauseVideo: PlaybackContextVideoRefs['pause'];
+    replayVideo: PlaybackContextVideoRefs['replay'];
     stopVideo: PlaybackContextVideoRefs['stop'];
     checkIfVideoIsPlaying: PlaybackContextVideoRefs['isPlaying'];
-    videoResumeTryNumberRef: PlaybackContextVideoRefs['resumeTryNumberRef'];
-    currentVideoPlayerRef: PlaybackContextVideoRefs['ref'];
+    currentVideoPlayerRef: PlaybackContextVideoRefs['playerRef'];
+    currentVideoViewRef: PlaybackContextVideoRefs['viewRef'];
 };
 
-export type {StatusCallback, PlaybackContextValues, OriginalParent, UnloadVideo, StopVideo, PlayVideoPromiseRef, PlaybackContextVideoRefs, PlaybackContext};
+export type {PlaybackContextVideoRefs, StopVideo, PlaybackContextValues, PlaybackContext, OriginalParent};
diff --git a/src/components/VideoPlayerContexts/PlaybackContext/usePlaybackContextVideoRefs.ts b/src/components/VideoPlayerContexts/PlaybackContext/usePlaybackContextVideoRefs.ts
index e66a4911bc5b4..7893e0c62a0de 100644
--- a/src/components/VideoPlayerContexts/PlaybackContext/usePlaybackContextVideoRefs.ts
+++ b/src/components/VideoPlayerContexts/PlaybackContext/usePlaybackContextVideoRefs.ts
@@ -1,88 +1,60 @@
-import type {AVPlaybackStatus, AVPlaybackStatusToSet} from 'expo-av';
-import {useCallback, useEffect, useMemo, useRef} from 'react';
-import Visibility from '@libs/Visibility';
-import type {PlaybackContextVideoRefs, PlayVideoPromiseRef, StopVideo, UnloadVideo} from './types';
+import {useCallback, useMemo, useRef} from 'react';
+import type {PlaybackContextVideoRefs, StopVideo} from './types';
 
 function usePlaybackContextVideoRefs(resetCallback: () => void) {
-    const currentVideoPlayerRef: PlaybackContextVideoRefs['ref'] = useRef(null);
-    const videoResumeTryNumberRef: PlaybackContextVideoRefs['resumeTryNumberRef'] = useRef(0);
-    const playVideoPromiseRef: PlayVideoPromiseRef = useRef(undefined);
-    const isPlayPendingRef = useRef(false);
+    const currentVideoPlayerRef: PlaybackContextVideoRefs['playerRef'] = useRef(null);
+    const currentVideoViewRef: PlaybackContextVideoRefs['viewRef'] = useRef(null);
+
+    const playVideo: PlaybackContextVideoRefs['play'] = useCallback(() => {
+        currentVideoPlayerRef.current?.play();
+    }, []);
 
     const pauseVideo: PlaybackContextVideoRefs['pause'] = useCallback(() => {
-        currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false});
-    }, [currentVideoPlayerRef]);
+        currentVideoPlayerRef.current?.pause();
+    }, []);
 
-    const stopVideo: StopVideo = useCallback(() => {
-        currentVideoPlayerRef.current?.setStatusAsync?.({shouldPlay: false, positionMillis: 0});
-    }, [currentVideoPlayerRef]);
+    const replayVideo: PlaybackContextVideoRefs['replay'] = useCallback(() => {
+        currentVideoPlayerRef.current?.replay();
+    }, []);
 
-    const playVideo: PlaybackContextVideoRefs['play'] = useCallback(() => {
-        if (!Visibility.isVisible()) {
-            isPlayPendingRef.current = true;
+    const stopVideo: StopVideo = useCallback(() => {
+        if (!currentVideoPlayerRef.current) {
             return;
         }
-        currentVideoPlayerRef.current?.getStatusAsync?.().then((status) => {
-            const newStatus: AVPlaybackStatusToSet = {shouldPlay: true};
-            if ('durationMillis' in status && status.durationMillis === status.positionMillis) {
-                newStatus.positionMillis = 0;
-            }
-            playVideoPromiseRef.current = currentVideoPlayerRef.current?.setStatusAsync(newStatus).catch((error: AVPlaybackStatus) => {
-                return error;
-            });
-        });
-    }, [currentVideoPlayerRef]);
-
-    const unloadVideo: UnloadVideo = useCallback(() => {
-        currentVideoPlayerRef.current?.unloadAsync?.();
+        currentVideoPlayerRef.current.pause();
+        currentVideoPlayerRef.current.currentTime = 0;
     }, [currentVideoPlayerRef]);
 
     const checkIfVideoIsPlaying: PlaybackContextVideoRefs['isPlaying'] = useCallback(
-        (statusCallback) => {
-            currentVideoPlayerRef.current?.getStatusAsync?.().then((status) => {
-                statusCallback('isPlaying' in status && status.isPlaying);
-            });
-        },
+        (statusCallback) => statusCallback(currentVideoPlayerRef.current?.playing ?? false),
         [currentVideoPlayerRef],
     );
 
     const resetVideoPlayerData: PlaybackContextVideoRefs['resetPlayerData'] = useCallback(() => {
-        // Play video is an async operation and if we call stop video before the promise is completed,
-        // it will throw a console error. So, we'll wait until the promise is resolved before stopping the video.
-        (playVideoPromiseRef.current ?? Promise.resolve()).then(stopVideo).finally(() => {
-            videoResumeTryNumberRef.current = 0;
-            resetCallback();
-            unloadVideo();
-            currentVideoPlayerRef.current = null;
-        });
-    }, [resetCallback, stopVideo, unloadVideo]);
-
-    useEffect(() => {
-        return Visibility.onVisibilityChange(() => {
-            if (!Visibility.isVisible() || !isPlayPendingRef.current) {
-                return;
-            }
-            playVideo();
-            isPlayPendingRef.current = false;
-        });
-    }, [playVideo]);
-
-    const updateCurrentVideoPlayerRef: PlaybackContextVideoRefs['updateRef'] = (ref) => {
-        currentVideoPlayerRef.current = ref;
+        stopVideo();
+        currentVideoPlayerRef.current = null;
+        currentVideoViewRef.current = null;
+        resetCallback();
+    }, [resetCallback, stopVideo]);
+
+    const updateCurrentVideoPlayerRefs: PlaybackContextVideoRefs['updateRefs'] = (playerRef, viewRef) => {
+        currentVideoPlayerRef.current = playerRef;
+        currentVideoViewRef.current = viewRef;
     };
 
     return useMemo(
         (): PlaybackContextVideoRefs => ({
-            resetPlayerData: resetVideoPlayerData,
-            isPlaying: checkIfVideoIsPlaying,
+            playerRef: currentVideoPlayerRef,
+            viewRef: currentVideoViewRef,
+            play: playVideo,
             pause: pauseVideo,
+            replay: replayVideo,
             stop: stopVideo,
-            play: playVideo,
-            ref: currentVideoPlayerRef,
-            resumeTryNumberRef: videoResumeTryNumberRef,
-            updateRef: updateCurrentVideoPlayerRef,
+            isPlaying: checkIfVideoIsPlaying,
+            resetPlayerData: resetVideoPlayerData,
+            updateRefs: updateCurrentVideoPlayerRefs,
         }),
-        [checkIfVideoIsPlaying, pauseVideo, playVideo, resetVideoPlayerData, stopVideo],
+        [checkIfVideoIsPlaying, pauseVideo, playVideo, replayVideo, resetVideoPlayerData, stopVideo],
     );
 }
 
diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
index 15833fbcc98cf..7708f8fe752ea 100644
--- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
+++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
@@ -1,8 +1,8 @@
+import type {VideoPlayer} from 'expo-video';
 import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
-import type {VideoWithOnFullScreenUpdate} from '@components/VideoPlayer/types';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -21,16 +21,23 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
     const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState<PlaybackSpeed>(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[3]);
     const {isOffline} = useNetwork();
     const isLocalFile = source && CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => source.startsWith(prefix));
-    const videoPopoverMenuPlayerRef = useRef<VideoWithOnFullScreenUpdate | null>(null);
+    const videoPopoverMenuPlayerRef = useRef<VideoPlayer>(null);
 
     const updatePlaybackSpeed = useCallback(
         (speed: PlaybackSpeed) => {
             setCurrentPlaybackSpeed(speed);
-            videoPopoverMenuPlayerRef.current?.setStatusAsync?.({rate: speed});
+            if (!videoPopoverMenuPlayerRef.current) {
+                return;
+            }
+            videoPopoverMenuPlayerRef.current.playbackRate = speed;
         },
         [videoPopoverMenuPlayerRef],
     );
 
+    const updateVideoPopoverMenuPlayerRef = (videoPlayer: VideoPlayer | null) => {
+        videoPopoverMenuPlayerRef.current = videoPlayer;
+    };
+
     const downloadAttachment = useCallback(() => {
         if (typeof source === 'number' || !source) {
             return;
@@ -67,10 +74,7 @@ function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
         return items;
     }, [icons.Download, icons.Meter, currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed, isOffline, isLocalFile]);
 
-    const contextValue = useMemo(
-        () => ({menuItems, videoPopoverMenuPlayerRef, currentPlaybackSpeed, updatePlaybackSpeed, setCurrentPlaybackSpeed, setSource}),
-        [menuItems, videoPopoverMenuPlayerRef, currentPlaybackSpeed, updatePlaybackSpeed, setCurrentPlaybackSpeed, setSource],
-    );
+    const contextValue = useMemo(() => ({menuItems, updateVideoPopoverMenuPlayerRef, updatePlaybackSpeed, updateSource: setSource}), [menuItems, updatePlaybackSpeed, setSource]);
     return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }
 
diff --git a/src/components/VideoPlayerContexts/VolumeContext.tsx b/src/components/VideoPlayerContexts/VolumeContext.tsx
index d73cd08d90b5b..80b2ee52525da 100644
--- a/src/components/VideoPlayerContexts/VolumeContext.tsx
+++ b/src/components/VideoPlayerContexts/VolumeContext.tsx
@@ -17,7 +17,8 @@ function VolumeContextProvider({children}: ChildrenProps) {
             if (!currentVideoPlayerRef.current) {
                 return;
             }
-            currentVideoPlayerRef.current.setStatusAsync({volume: newVolume, isMuted: newVolume === 0});
+            currentVideoPlayerRef.current.volume = newVolume;
+            currentVideoPlayerRef.current.muted = newVolume === 0;
 
             volume.set(newVolume);
         },
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
index c46ecd534d5c4..e5d095d849b03 100644
--- a/src/components/VideoPlayerContexts/types.ts
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -1,31 +1,81 @@
-import type {MutableRefObject} from 'react';
+import type {VideoPlayer} from 'expo-video';
+import type {RefObject} from 'react';
 import type {SharedValue} from 'react-native-reanimated';
 import type {TupleToUnion} from 'type-fest';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
-import type {VideoWithOnFullScreenUpdate} from '@components/VideoPlayer/types';
 import type CONST from '@src/CONST';
 import type {ResponsiveLayoutProperties} from './FullScreenContext';
 
 type VolumeContext = {
+    /**
+     * Updates the current volume.
+     * @param newVolume The new volume value to set.
+     */
     updateVolume: (newVolume: number) => void;
+
+    /**
+     * The current volume value.
+     */
     volume: SharedValue<number>;
+
+    /**
+     * The last non-zero volume value before mute.
+     * This value is restored after unmuting.
+     */
     lastNonZeroVolume: SharedValue<number>;
+
+    /**
+     * Toggles the mute state.
+     */
     toggleMute: () => void;
 };
 
 type VideoPopoverMenuContext = {
+    /**
+     * The items displayed in the video popover menu.
+     */
     menuItems: PopoverMenuItem[];
-    videoPopoverMenuPlayerRef: MutableRefObject<VideoWithOnFullScreenUpdate | null>;
-    currentPlaybackSpeed: PlaybackSpeed;
+
+    /**
+     * Updates the video player reference used by the popover menu.
+     * @param ref The video player ref.
+     */
+    updateVideoPopoverMenuPlayerRef: (videoPlayer: VideoPlayer | null) => void;
+
+    /**
+     * Updates the playback speed inside VideoPopoverMenuContext.
+     * @param speed The new playback speed value.
+     */
     updatePlaybackSpeed: (speed: PlaybackSpeed) => void;
-    setCurrentPlaybackSpeed: (speed: PlaybackSpeed) => void;
-    setSource: (source: string) => void;
+
+    /**
+     * Updates the video source URL inside VideoPopoverMenuContext.
+     * @param source The new source URL.
+     */
+    updateSource: (source: string) => void;
 };
 
 type FullScreenContext = {
-    isFullScreenRef: MutableRefObject<boolean>;
-    lockedWindowDimensionsRef: MutableRefObject<ResponsiveLayoutProperties | null>;
+    /**
+     * Whether the application is currently in fullscreen mode.
+     */
+    isFullScreenRef: RefObject<boolean>;
+
+    /**
+     * Window dimensions saved before entering fullscreen mode.
+     * Used to preserve UI state without triggering excessive re-renders.
+     */
+    lockedWindowDimensionsRef: RefObject<ResponsiveLayoutProperties | null>;
+
+    /**
+     * Sets the locked window dimensions.
+     * @param newResponsiveLayoutResult The window dimensions to lock.
+     */
     lockWindowDimensions: (newResponsiveLayoutResult: ResponsiveLayoutProperties) => void;
+
+    /**
+     * Clears the locked window dimensions.
+     */
     unlockWindowDimensions: () => void;
 };
 
diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
index 805e969cbef62..6253319e72a3b 100644
--- a/src/components/VideoPlayerPreview/index.tsx
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import type {VideoReadyForDisplayEvent} from 'expo-av';
+import type {SourceLoadEventPayload} from 'expo-video';
 import React, {useEffect, useState} from 'react';
 import type {GestureResponderEvent} from 'react-native';
 import {View} from 'react-native';
@@ -93,10 +93,16 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
     // We want to play the video only when the user is on the page where it was initially rendered
     const doesUserRemainOnFirstRenderRoute = useCheckIfRouteHasRemainedUnchanged(videoUrl);
 
-    // `onVideoLoaded` is passed to VideoPlayerPreview's `Video` element which is displayed only on web.
+    // `onSourceLoaded` is passed to VideoPlayerPreview's `Video` element which is displayed only on web.
     // VideoReadyForDisplayEvent type is lacking srcElement, that's why it's added here
-    const onVideoLoaded = (event: VideoReadyForDisplayEvent & {srcElement: HTMLVideoElement}) => {
-        setMeasuredDimensions({width: event.srcElement.videoWidth, height: event.srcElement.videoHeight});
+    const onSourceLoaded = (event: SourceLoadEventPayload) => {
+        const track = event.availableVideoTracks.at(0);
+
+        if (!track) {
+            return;
+        }
+
+        setMeasuredDimensions({width: track.size.width, height: track.size.height});
     };
 
     const handleOnPress = () => {
@@ -131,7 +137,7 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
                 <View style={styles.flex1}>
                     <VideoPlayer
                         url={videoUrl}
-                        onVideoLoaded={onVideoLoaded as (event: VideoReadyForDisplayEvent) => void}
+                        onSourceLoaded={onSourceLoaded}
                         videoDuration={videoDuration}
                         shouldUseSmallVideoControls
                         style={[styles.w100, styles.h100]}
diff --git a/src/components/VideoPopoverMenu/index.tsx b/src/components/VideoPopoverMenu/index.tsx
index ef623a744f4d5..1dbef6e720ec3 100644
--- a/src/components/VideoPopoverMenu/index.tsx
+++ b/src/components/VideoPopoverMenu/index.tsx
@@ -36,6 +36,7 @@ function VideoPopoverMenu({
             menuItems={menuItems}
             anchorRef={videoPlayerMenuRef}
             shouldUseScrollView
+            shouldMaintainFocusAfterSubItemSelect={false}
         />
     );
 }