Uploaded videos are not playing in mobile browser but are playing on desktop broswer

Question

I have set up a server (gunicorn and nginx) to upload videos using Python/Django, and watch them in the browser. The video player I am using is videojs. All the videos are h.264 mp4. And the video size are between 5-40 MB.

The video uploads fine and I can watch the uploaded video on the desktop and laptop browser too.

The problem is that I can't watch the same videos (which are playing on the desktop browser) on the mobile devices.

I get this error:

This video could not be loaded, either because the server or network failed or because the format is not supported.

What is wrong?

Update

However I tested the mobile browsers with webm videos in the mobile and Opera and Chrome plays the video perfectly. This is the command I used for webm:

ffmpeg -i test2.mov -codec:v libvpx -quality good -cpu-used 0 -b:v 600k -maxrate 600k -bufsize 1200k -qmin 10 -qmax 42 -vf scale=-1:480 -threads 4 -codec:a vorbis -b:a 128k -strict -2 test2_webmmm.webm

And this for h.264 mp4 (only working firefox):

ffmpeg -i inputfile.avi -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -b:a 96k output.mp4

Update

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'faststart.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf56.40.100
  Duration: 00:03:36.56, start: 0.046440, bitrate: 350 kb/s
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yu
v420p, 640x360 [SAR 1:1 DAR 16:9], 249 kb/s, 23.98 fps, 23.98 tbr, 24k tbn, 47.9
5 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, flt
p, 96 kb/s (default)
    Metadata:
      handler_name    : SoundHandler

Update

Here are some points that I gathered along the way:

1. Some of the videos which I downloaded from YouTube and uploaded it on the server without encoding are playing nicely on all the browsers.
2. However if I encode the same video (YouTube video) and upload it on the server, it does not play on the mobile devices but only on desktop browsers.
3. Videos which I took from my mobile (Samsung s4 and iPhone 6), and encode it with ffmpeg are not playing on the mobile browsers, only on desktop browsers.
4. But, the URL of the same videos (which I took from mobile) which are hosted on Amazon s3 are playing nicely on all the browsers (even the non encoded videos).

Answer 1

What official documentation tells:

Streaming and AAC Player Compatibility

By default when encoding AAC files using libfdk_aac the metadata ('moov' atom) is written after the audio stream ('mdat' atom) at the end of the file. In order to enable streaming of the encoded file the 'moov' atom has to be moved before the 'mdat' atom. In addition some AAC player implementations have issues decoding such files.

FFmpeg offers the option '-movflags +faststart' covering that functionality which can be used during encoding:

ffmpeg -i input.wav -c:a libfdk_aac -movflags +faststart output.m4a

Existing m4a files can be modified with the "qt-faststart' program which is distributed with FFmpeg in the 'tools' directory

qt-faststart input.m4a output.m4a

So you can try this:

ffmpeg -i inputfile.avi -codec:v libx264 -profile:v baseline -preset slow -b:v 250k -maxrate 250k -bufsize 500k -vf scale=-1:360 -threads 0 -codec:a libfdk_aac -movflags +faststart output.mp4