Sample video showing the problem: https://gget.it/io64/h264test13576.mp4 - can you play it on Safari?
I have a video on a HTML page
<video controls><source src="/files/test.mp4"></video>
that works on PC (Firefox, Chrome, etc.) but sadly it doesn't work on iPhone Safari (which I don't have handy, so difficult to debug): instead of the video there is a grey background.
What common reasons prevent a MP4 video to be played on Safari for iPhone?
Note: I've tried various things like:
controls => controls="true" as explained in HTML5 Video tag not working in Safari , iPhone and iPad (not a duplicate)
adding playsinline
changing from <video ...><source src="..."></video> to <video ... src="...">
but the problem still exists.
Safari (also desktop) doesn't like the moov atom not being at the start of the file.
ffprobe -v trace -i h264test13576.mp4 2>&1 | grep -e 'mdat' -e 'moov'
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'mdat' parent:'root' sz: 592695 56 597025
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'moov' parent:'root' sz: 4282 592751 597025
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'mvhd' parent:'moov' sz: 108 8 4274
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'trak' parent:'moov' sz: 1943 116 4274
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'trak' parent:'moov' sz: 2105 2059 4274
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x14a704930] type:'udta' parent:'moov' sz: 118 4164 4274
This fixes it:
ffmpeg -i h264test13576.mp4 -movflags faststart -c copy updated.mp4
ffprobe -v trace -i updated.mp4 2>&1 | grep -e 'mdat' -e 'moov'
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'moov' parent:'root' sz: 4022 40 596757
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'mvhd' parent:'moov' sz: 108 8 4014
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'trak' parent:'moov' sz: 2200 116 4014
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'trak' parent:'moov' sz: 1609 2316 4014
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'udta' parent:'moov' sz: 97 3925 4014
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x140605150] type:'mdat' parent:'root' sz: 592695 4070 596757