Hi everyone, I'm facing an issue playing a video from an AWS S3 URL in an OutSystems ODC mobile application on iOS.
I'm using an HTML <video> tag with the S3 URL as the src. The video plays successfully on the Android app, and the exact same S3 URL also plays correctly when opened directly in Safari on the same iPhone. However, the video does not play inside the iOS mobile app. I've verified that the S3 URL is valid, served over HTTPS, and the object has the correct Content-Type (video/mp4). I've also added the S3 domain to the application's Content Security Policy (CSP) and tried attributes such as playsinline, webkit-playsinline, and preload="metadata", but the issue remains. Has anyone encountered this behavior before? Any suggestions or guidance would be greatly appreciated.
Hi everyone,
I found the root cause. It was caused by the CSP configuration—I needed to add https:// to the media-src directive. Thank you for your helps
@Alexander Ng ,
Are these videos generated / compressed through FFmpeg?
Hi @Mihai Melencu , No, it's a normal video. After uploading the video to Amazon S3, I receive a presigned URL. I then use that presigned URL as the src of an HTML <video> element to play the video. This works correctly on Android and the same presigned URL also plays in Safari on iOS. However, the video does not play inside my OutSystems ODC iOS mobile app.
In that case please check this discussion: Video from URL can be played in Android device but not in iOS device | OutSystems .
Thank your for your suggestion but unforturnately, I'm using Capacitor framework and Capacitor alreasy sets allowInlineMediaPlayback: true as default If I'm not wrong.
@Alexander Ng : Looks like it is a CORS issue. Can you set the bucket's AllowedOrigins to *and test ?
hi @Siya , yes I did it. But actually I can get the url and can play the video in Safari browser. The issue is I dont know why I cant play it on HTML <video> tag.
Could you please create a test mobile application with a single page which plays this video and deploy as PWA and see if it works on iPhone ?
I have tested on PWA and it's working fine.
Thanks for the confirmation. Could you please try connect iPhone to a Mac and check a couple of things via Safari's Web Inspector ?
Hi @Alexander Ng ,
I am able to use the Video UI component from OutSystemsUI in the mobile application to play a MP4 video on android as well as IOS for ODC.
Can you try using this OutSystems component if possible in your current implementation.
Regards,
Ishan
Hi, I did try and also used some sample Urls also for testing, but still couldnt play. I'm using Mobile UI and Capacitor framework. So dont know if are there any issue related to MobileUI.
Even while using the MobileUI, you can use the video UI component from "manage dependency > Video component in OutSystemsUI".
For me its unclear if the RCA is related to capacitor framework.
Hi, the root cause from CSP config. I needed to add the "https://xxx" to the media-src directive to fix the issue. Thank you for your time.