Hello guys. I’m running into a super frustrating issue with video playback in my React app built with Capacitor, and I’m hoping someone here has seen this before.
The setup:
- React 17.0.2 app
- Capacitor 6 (all plugins at v6)
- Using
@capacitor/iosfor iOS builds - Video module that plays files from an S3 bucket
What’s happening:
- Web version and Android build: Works perfectly
- iOS build (physical device): Video plays for exactly 10 seconds, freezes for 1-2 seconds, plays another 10 seconds, repeat…
Weird thing is it works fine on iOS simulators (iOS 15.6), but fails on actual devices (also iOS 15). No console errors in Safari Web Inspector either - just silent stuttering.
What I’ve tried:
- Tried both
react-playerlibrary and plain HTML5<video>tag - Tried different S3 URLs
- Checked network - videos load fine, no CORS issues
- No media-related Capacitor plugins installed that might interfere
My capacitor.config.ts looks like this:
import type { CapacitorConfig } from "@capacitor/cli";
const config: CapacitorConfig = {
appId: "com.my.app",
appName: "My App",
webDir: "out",
plugins: {
pushNotifications: {
presentationOptions: ["badge", "sound", "alert"],
},
CapacitorHttp: {
enabled: true,
},
SplashScreen: {
launchShowDuration: 500,
launchAutoHide: true,
launchFadeOutDuration: 0,
backgroundColor: "#532A9A",
androidSplashResourceName: "splash",
androidScaleType: "CENTER_CROP",
showSpinner: true,
androidSpinnerStyle: "large",
iosSpinnerStyle: "small",
spinnerColor: "#999999",
splashFullScreen: true,
splashImmersive: true,
layoutName: "launch_screen",
useDialog: true,
},
},
};
The pattern is too consistent to be a network issue - every 10 seconds on the dot. Makes me think it’s something with:
- iOS’s media buffering behavior
- Power saving/thermal throttling (though 10 seconds seems too short for that)
- Some background process interfering
Has anyone hit this “10-second stutter” pattern before with Capacitor on iOS? I’m scratching my head here because it works everywhere except physical iOS devices.
Quick questions:
- Are there known issues with iOS 15 and Capacitor video playback?
- Should I be using a specific video codec for iOS?
- Are there any Xcode project settings I might be missing?
- Do you need to see the React code to play the video?
Any pointers would be massively appreciated! Even just knowing where to look for logs or what to test next would help.
Thanks.