MP4 files not playing in Safari on Iphones

[girish]

This is ... crazy. The file loads fine on Chrome/Firefox on linux if I load the file directly. So, this is something related to video tag and h264. Curiously, the video tag works just fine in Android's Chrome and Firefox .

[girish]

OK, so it seems on the desktop , the full file has to be "downloaded" before it can start playing. I can confirm that the site works fine everywhere. It only doesn't work on iphone - this I don't know why.

[girish]

@danielreyes61 I could reproduce this issue with the mp4 at https://mobamotion.mobatek.net/samples/sample-mp4-video.html . Maybe the earlier site I mentioned has some other mp4 issue. But with the file in think link, the page loads fine and plays the video on safari. But via xbackbone, it does not work.

[robi]

It depends on the era of the codecs used in the encoding of the mp4 and which browser has decode support for them.

[girish]

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.

[girish]

I have opened an issue upstream - https://github.com/sergix44/XBackBone/issues/557

[danielreyes61]

@girish thank you

[danielreyes61]

@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.

[girish]

@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) ?

[danielreyes61]

@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]

@girish I wonder if editing the files after cache is generated is the trick?

[danielreyes61]

@girish after editing the files, I restarted the docker container too.

[girish]

@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.

[danielreyes61]

@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.

[girish]

@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.