[expo-av] passing asset from media-library as video src fails playback

[castdrian]

Minimal reproducible example

https://github.com/castdrian/mw-native/tree/feat-providers-video

What platform(s) does this occur on?

Android, iOS

Did you reproduce this issue in a development build?

Yes

Summary

passing an Asset object from expo-media-library as video source to expo-av, despite being documented in the types as working, does not play the file but instead complains that the resource could not be found

Environment

System:
OS: macOS 14.4
Shell: 5.9 - /bin/zsh
Binaries:
Node: 21.7.1 - /opt/homebrew/bin/node
npm: 10.5.0 - /opt/homebrew/bin/npm
Managers:
CocoaPods: 1.15.2 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 23.4, iOS 17.4, macOS 14.4, tvOS 17.4, visionOS 1.1, watchOS 10.4
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11330709
Xcode: 15.3/15E204a - /usr/bin/xcodebuild
npmPackages:
@expo/metro-config: ^0.17.3 => 0.17.3
Expo Workflow: managed

Expo Doctor Diagnostics

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for issues with metro config
✔ Check for common project setup issues
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check npm/ yarn versions
✔ Check native tooling versions
✔ Check that packages match versions required by installed Expo SDK
✔ Check Expo config (app.json/ app.config.js) schema

➡ [tamagui] built config and components (271ms):

    Config     ./.tamagui/tamagui.config.cjs
    Components ./.tamagui/tamagui-components.config.cjs

✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

[Kudo]

hi there!

the repro is a complex app. could you elaborate for the following questions?

• how to start the repro?
• after the app start, what's the step to trigger the error?
• where's the relevant code in the repro?

[castdrian]

hi there!

the repro is a complex app. could you elaborate for the following questions?

• how to start the repro?
• after the app start, what's the step to trigger the error?
• where's the relevant code in the repro?

hi, yes mb, the repro is simple to do, build & launch application, head to the downloads tab, click the test local playback button

relevant code parts are:

• video component https://github.com/castdrian/mw-native/blob/feat-providers-video/apps/expo/src/components/player/VideoPlayer.tsx
• initializing player with asset object as source https://github.com/castdrian/mw-native/blob/800f0c3481d150afc1c5e3cb09230ce9d664c7e7/apps/expo/src/components/player/VideoPlayer.tsx#L143-L149

additionally it seems to not throw an unhandled exception anymore but just infinitely load instead

[Kudo]

@castdrian thanks for sharing the info.

the reason is that Asset.uri in your case returns in ph://, e.g. ph://1DA22615-FB96-41B4-B8C1-123534CA32E8. this is not expo-av supported scheme. you should local file uri instead. i'm not familar how your project is structured, but this should work

diff --git a/apps/expo/src/components/player/ControlsOverlay.tsx b/apps/expo/src/components/player/ControlsOverlay.tsx
index 981f47b..e2d8960 100644
--- a/apps/expo/src/components/player/ControlsOverlay.tsx
+++ b/apps/expo/src/components/player/ControlsOverlay.tsx
@@ -14,7 +14,7 @@ export const ControlsOverlay = ({ isLoading }: { isLoading: boolean }) => {
     >
       <Header />
       {!isLoading && <MiddleControls />}
-      <BottomControls />
+      {/* <BottomControls /> */}
     </View>
   );
 };
diff --git a/apps/expo/src/components/player/VideoPlayer.tsx b/apps/expo/src/components/player/VideoPlayer.tsx
index 1b38259..7fb767f 100644
--- a/apps/expo/src/components/player/VideoPlayer.tsx
+++ b/apps/expo/src/components/player/VideoPlayer.tsx
@@ -11,6 +11,7 @@ import Animated, {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ResizeMode, Video } from "expo-av";
 import * as Haptics from "expo-haptics";
+import * as MediaLibrary from "expo-media-library";
 import * as NavigationBar from "expo-navigation-bar";
 import { useRouter } from "expo-router";
 import * as StatusBar from "expo-status-bar";
@@ -142,7 +143,12 @@ export const VideoPlayer = () => {
   useEffect(() => {
     const initializePlayer = async () => {
       if (asset) {
-        setVideoSrc(asset);
+        const assetInfo = await MediaLibrary.getAssetInfoAsync(asset);
+        setVideoSrc({
+           ...asset,
+          // @ts-ignore
+          localUri: assetInfo.localUri,
+        });
         setIsLoading(false);
         return;
       }
@@ -248,7 +254,7 @@ export const VideoPlayer = () => {
       >
         <Video
           ref={setVideoRef}
-          source={videoSrc}
+          source={{...videoSrc, uri: videoSrc?.localUri}}
           shouldPlay={state === "playing"}
           resizeMode={resizeMode}
           volume={volume.value}

[castdrian]

thank you very much, using the localuri did indeed resolve the issue