bug: HTML5 video suddenly stop displaying on IOS

[AdamSGit]

Bug Report

Capacitor Version

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 5.5.1 @capacitor/core: 5.5.1 @capacitor/android: 5.5.1 @capacitor/ios: 5.5.1

Installed Dependencies:

@capacitor/cli: 5.4.1 @capacitor/core: 5.4.1 @capacitor/android: 5.4.1 @capacitor/ios: 5.4.1

[success] iOS looking great! 👌 [success] Android looking great! 👌

Platform(s)

IOS (constated on ios 16 and 17)

Current Behavior

This issue is the same as #6622, which was closed without valid reason, regarding a potentially important bug that seem to affect a lot of devs. I invite you to refer to the previous issue for additionals details. Anyway :

When using an html5 video tag on a capacitor app, on IOS, it initially works. After some time, the video stop displaying. Restarting the device bring the video back. The moment video stop displaying seem to vary. It happend twice with my setup the past days, when exporting debug app to my iphone.

Expected Behavior

The video displaying normally

Code Reproduction

Unless there is specific setup that is causing this, which I doubt given the number of people constating the issue, a plain simple video tag such as <video type="video/mp4" src="/video.mp4" autoplay loop muted playsinline></video> should do, when exporting to ios and playing around.

edit : reproduction repo https://github.com/AdamSGit/capacitor-issue-7066

Other Technical Details

npm --version output: 9.7.2

node --version output: 20.5

pod --version output (iOS issues only): 1.13.0

[ionitron-bot[bot]]

This issue needs more information before it can be addressed. In particular, the reporter needs to provide a minimal sample app that demonstrates the issue. If no sample app is provided within 15 days, the issue will be closed. Please see the Contributing Guide for how to create a Sample App. Thanks! Ionitron 💙

[AdamSGit]

Please find reproduction repository here : https://github.com/AdamSGit/capacitor-issue-7066

So, actually easier to reproduce than I thought. Steps :

• Add ios platform
• Sync
• Build the app on a real device (didn't tested with emulator)
• The app open on device. Initially video show.
• Unplug cable and stop xcode debugging (not sure if it's important, just what I did)
• Close the app on iphone
• Open it again
• Bug should happend, video not displaying anymore

I got the bug to reproduce the first time I closed / reopened the app, but it might take more tries on your side

[drakedeatonuk]

I've wrestled with this quite a lot and have never found a solution that results in the html video player playing reliably 100% of the time.

[AdamSGit]

Do you have more element on the nature of the issue ?

[drakedeatonuk]

you can try listening out for all of the different events that the html video element emits for more information. I think I for more consistency waiting for one of the events to fire before trying to play the video. solution I ultimately went with was that if the video failed to load I would instead display a static image... worked fine for my usecase, though I'd still like to see solution where the video just works consistently.

[jbgtmartin]

I have the same issue, which seems to be the same as https://github.com/ionic-team/capacitor/issues/6790 as well.

Some more details about what I found

• Reproduced on iOS 16.2 (iPad 6th gen), iOS 17.2 (iPad 10th gen), iOS 17.3 beta (iPad 10th gen)
• The video always works the first time after restarting the iPad
• In most cases, the video stops working after restarting the app. Sometimes though I have to restart it 3 or 4 times
• On iOS 17.2 (but not on 16.2), if I open the iOS photo gallery after I encountered the issue in the app, videos don't play (for instance I have a video that I just shot using the iPad's camera, it's broken as well)
• I have a similar app that uses Cordova, with cordova-plugin-ionic-webview@2. It works fine, maybe because the app is served from the http:// scheme instead of capacitor://?

When I look at the network tab

When the video works

Range request seem to work normally.

When the video does not work

First range requests seem to be the same, but there are only 7 of them (I guess because the video never starts?)

[yannickBona]

@markemer any solution to this?

I can't manage to reproduce videos on my native IOS application, haven't tried Android yet. Web works fine.

[jbgtmartin]

I did some more testing (using the code repro from https://github.com/ionic-team/capacitor/issues/6790).

• I could reproduce the issue pretty easily on iPad OS 17.2, 17.3, and 17.4 beta.2
• I could not reproduce it on iPad OS 17.4 beta 3 and iPad OS 17.4 beta 4

So it seems it has been fixed by Apple, but I couldn't find any information about what the issue was on Apple side, to make sure that it's really fixed. If someone who knows where to look (maybe the Webkit bug tracker?) can find more information about this I'm interested to see more details!

[benmarsh]

Looking at dates here;

Broken: iOS 17.3.0 - released Jan 22nd iPadOS 17.4b2 - released Feb 7th

Works: iOS 17.3.1 - released Feb 8th iPadOS 17.4b3 - released Feb 13th

Maybe possible a regression bug was fixed upstream after Feb 8th?

I had a look at the Webkit Bug tracker too but similarly I can't see anything recent that related to custom schemes / protocols... fingers crossed it's now resolved.

[jcesarmobile]

This is a recurrent Apple bug, they seem to fix it and then add it back and fix it again. Last time I searched in the webkit repository and issue tracker and couldn't find anything that would indicate the video being broken or fixed.

I confirm that I can't reproduce on 17.4, so seems to be fixed again. But it's not a Capacitor issue and there is nothing we can do about it. If it happens again, please, report it to apple on https://bugs.webkit.org/

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.