MP4 files not playing in Safari on Iphones
-
I know the issue is not cloudron related but still can't resist debugging The issue is to do with range requests not being handled properly by XBackBone . https://stackoverflow.com/questions/30199261/why-wont-safari-play-file-without-extension-in-video . Seeing if the fix is trivial, otherwise we have to report it upstream.
-
I have opened an issue upstream - https://github.com/sergix44/XBackBone/issues/557
-
@girish I've confirmed, all that is needed is to remove the autoplay attribute from the video html tag and everything will work on iphones, I spun up a separate docker container on a fresh ubuntu vm and it is working after editing the template resource files that I listed above.
-
@danielreyes61 when I tested it, it was not working even without autoplay . What is your patch? Did you only remove
autoplay
in public.twig and nothing else (and clear cache) ? -
@girish oh I didn't clear the cache, I didn't fully understand that cache is created on demand, I looked in about 6 cache folders for the autoplay tag and removed it and it worked. I removed it from the audio only element and the video element as well, so to summarize: removed in twig and in cache. Did you confirm in chrome developer tools that the tag was removed? It's late in my shift and I'm getting sleepy so I'm trying to be clear. I usually skip steps when I'm writing once I get tired. Hope this makes sense.
-
@danielreyes61 I tried this again. As you said, without
autoplay
it works on iphone. But the same thing doesn't work on desktop safari though Looks like something upstream to fix. -
@girish or leave autoplay and add playsinline attribute and see if it works then.
Enable Video Autoplay
Video elements that include <video autoplay> play automatically when the video loads in Safari on macOS and iOS, only if those elements also include the playsinline attribute. -
@danielreyes61
playsinline
doesn't seem to help on desktop safari. It does play inline on iphone . Funnily, iphone shows negative values in the time slider! And seek doesn't work either. I think it's all to do with the app not doing byte range requests properly.