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

Answer 2

I checked the video itself and it appears fine, and if downloaded to the desktop and opened with Chrome or Safari on a Mac will play fine.

It also plays from the Web using the link you provided above (54.169.222.113/video/62 ) fine on Chrome on a Mac but not on Safari. It will also play from the web link on and Android Tablet (Samsung Note) in the default browser and in Chrome.

The video itself plays fine from the desktop on Safri though. Doing this bypasses your site including your script and HTML and the video.js player.

Checking the videojs.com site they are using the same version of video.js (4.12.11) as you but when you look at the source theirs appears to have a different number of lines, which should not really be the case with the same version number. It may well be that they have simply added in some dev changes to test, but i think it would be worth revisiting your HTML and video.js set up again and try to match it as closely as possible to the videojs.com site (which I think you used as your starting point as it is close but not quite the same at the moment).

UPDATE

Ok - I downloaded the video from your link exactly as you provided it above, 1437658474_37_faststart.mp4, and added it as a simple static file in a local web server here.

The video played fine in the following clients which connected to the server over the network:

• Mac Safari
• Mac Chrome
• Android standard and chrome browsers
• iPhone safari

I also edited the videos.com page (locally using browser tools) and added your video and it would not play.

It appears that there is a subtle issue with your video on certain browsers which manifests itself when using videojs - the problem can be demonstrated quite easily using your site:

• The video never plays back on Safari on a MAC
• The video always plays back on Chrome on a MAC

Unless you have managed to solve the issue offline somehow (if so please let us know as this is an interesting problem!), I think it would be worth raising it on the videojs forums.

Answer 3

I solved my problem by doing two pass encoding with qtfaststart (python). At first I was using -movflags +faststart, and no idea why it didn't work. But now its working in almost all the browsers.

This is the code I used:

1st pass

ffmpeg -i mobile.mp4 -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 mobile-output.mp4

2nd pass

qtfaststart mobile-output.mp4 qt-mobile-output.mp4