Encode h264 with FFMPEG that works across all browsers and devices (windows/mac/iOs/Android)

Question

I want to encode images with FFMPEG to a h264 video file that will work on Windows Browsers and Mac Browsers and iOS / Android devices to display in HTML5. Is there a way to do that using one encoded file? Currently my ffmpeg string only encodes for windows/android now

Here is my current ffmpeg code:

and here is my HTML5 display code:

ffmpeg -y -r 25 -i ./images/video%04d.png -i  music.wav -shortest -vcodec libx264 -s  720x480 -strict experimental -acodec aac video_file.mp4

<video width="640" height="480"  controls="" preload="" poster="../poster.jpg">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

If I change -vcodec to mpeg4 instead of libx264 it works on iOs/MAC but not windows! Which is really confusing!

using ffmpeg version 3.0.1-static http://johnvansickle.com/ffmpeg/ Copyright (c) 2000 -2016 the FFmpeg developers

Answer 1

Since you're using a very recent version of ffmpeg, use the command below

ffmpeg -y -i ./images/video%04d.png -i music.wav -profile:v baseline -shortest -vcodec libx264 -s  720x480 -acodec aac -movflags +faststart video_file.mp4

profile is set to the lowest common denominator baseline for broad compatibility. The MOOV box is shifted to the head of the file, so the whole MP4 does not need to be downloaded before playback can start.

By default, ffmpeg assigns a framerate of 25 to image sequences, unless specified otherwise. Since Dec 2015, the native AAC encoder is no longer marked as experimental.

Both the size value of 720x480 and HTML5 video size - 640x480 - makes me think you're dealing with NTSC source material. If so, use

ffmpeg -y -framerate 30000/1001 -i ./images/video%04d.png -i music.wav -vf "scale=640x480,setsar=1' -profile:v baseline -shortest -vcodec libx264 -acodec aac -movflags +faststart video_file.mp4