Html Question posted in
Some basic documentation can be found here.

Html – MP4 video not playing on Safari iPhone

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:

but the problem still exists.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Additional information: the answer mp4 H264 video won't play in iPhone safari gives a hint about the reasons why Safari won't play this video:

    Some software (many versions of OBS, for example) chooses to put the movie box metadata last.

    Apple’s implementation of the player on iOS apparently requires the movie box metadata to be at the front of the file, after the header


  2. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search