I'm encountering an issue using react native expo-av at my IOS device. For some reason, the video i want is not playing. But, when i use the video given on the expo documentation which is https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4, it is working.
The video i want to play but encountering an issue: https://player.vimeo.com/video/949579770?h=897cd5e78
Error logs:YYYYYYYY {"error": "The server is not correctly configured. - The AVPlayerItem instance has failed with the error code -11850 and domain \"AVFoundationErrorDomain\".", "isLoaded": false}
Here is the sample snippet:
import { Video, ResizeMode } from "expo-av";
<Video
source={{
uri: "https://player.vimeo.com/video/949579770?h=897cd5e781.mp4" (with or without .mp4, still not working),
}}
className="w-52 h-72 rounded-[35px] mt-3 bg-white/30"
resizeMode={ResizeMode.CONTAIN}
useNativeControls
shouldPlay
onPlaybackStatusUpdate={(status) => console.log("YYYYYYYY", status)}
onLoad={(status) => console.log("XXXXXXXXXXXXXXX", status)}
/>
Badly need help, is it regarding on the video itself i want to play? I'm following the youtube course on JS mastery react native. Because on tutorial side, his work is working
Thank you so much
device: windows 11 node version: v20.14.0 Typescript?: Yes package.json:
{
"name": "aora",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll",
"lint": "expo lint"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.0.2",
"expo": "~51.0.24",
"expo-av": "^14.0.6",
"expo-constants": "~16.0.2",
"expo-font": "~12.0.9",
"expo-linking": "~6.3.1",
"expo-router": "~3.5.20",
"expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1",
"expo-system-ui": "~3.0.7",
"expo-web-browser": "~13.0.3",
"nativewind": "^2.0.11",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.3",
"react-native-animatable": "^1.4.0",
"react-native-appwrite": "^0.4.0",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1",
"react-native-url-polyfill": "^2.0.0",
"react-native-web": "~0.19.10"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/jest": "^29.5.12",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.7",
"jest": "^29.2.1",
"jest-expo": "~51.0.3",
"react-test-renderer": "18.2.0",
"tailwindcss": "^3.3.2",
"typescript": "~5.3.3"
},
"private": true
}
Actual image when i played the video i want :
I will repeat, but when using the bunny.mp4, it is working and playing
I encountered the same error while taking the course. After researching, I discovered that the error occurs because AVFoundation cannot recognize the media format from the Vimeo link.
I found a solution that works: instead of using the Vimeo links provided by JSMastery, use direct video URLs. These are links that lead directly to the video file itself, rather than to a webpage displaying the video.
I hope this information helps you resolve the issue!