MP4 files not playing in Safari on Iphones

[danielreyes61]

I believe the autoplay feature in the templates are causing the issue. I tried to edit the templates to disable / remove the autoplay feature but it says the system is read-only. Any ideas?

code/resources/templates/upload/public.twig:91: <audio id="player" autoplay controls loop preload="auto">
code/resources/templates/upload/public.twig <video id="player" autoplay controls loop preload="auto">
code/resources/cache/twig/6f/XXXXXXXXXXXXXXXXXXXXXXXX.php:284: <audio id="player" autoplay controls loop preload="auto">
code/resources/cache/twig/6f/XXXXXXXXXXXXXXXXXXXXXXX.php:306: <video id="player" autoplay controls loop preload="auto">

Find occurrences : grep -Rnw -e "autoplay"

[danielreyes61]

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. For more information on inline playback, see Enable Inline Video Playback.

By default, autoplay executes only if the video doesn’t contain an audio track, or if the video element includes the muted attribute. Video playback pauses if the element gains an audio track, becomes unmuted without user interaction, or if the video is no longer onscreen (either by CSS or due to the user scrolling the page). The video doesn’t pause unless the user clicks or taps the video. This same expectation applies to WebRTC one-way video conferencing. For more information on WebRTC playback controls, see Add WebRTC Playback Controls.

Autoplay video when the user expects it to autoplay in your website. For example, autoplay video in interfaces where video playback is the purpose of the webpage, like a video-sharing or hosting website.

Source: https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari/

[girish]

@danielreyes61 I tested this one a iphone and can confirm mp4 does not play. But I could not play the mp4's in https://samplelib.com/sample-mp4.html either . So, seems like some iphone issue. It's not my iphone so I didn't test this further.

[girish]

Mmmm, that's interesting. The videos on that page do not load on my Chrome/Firefox on linux either. If I download the file and play them via vlc or some other media player, they work fine!

Edit: see below

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