ffmpeg encoded videos are not playing on mobile browser

Question

I have set up a server to upload and play videos. I used django/python as the scripting language, and nginx and gunicorn as the webserver. I am using videojs as the video player.

For h264 mp4 I tried this command:

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

But its only playing on desktop browsers and not on mobile browsers (except only on firefox android browser).

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).

What am I missing? I was really hoping if you could guide me and help me to solve the problem. Thank you.

Answer 1

Unfortunately due to patent/licensing issues¹, MP4 playback is not supported natively in all browsers. That's where file format redundancy comes into play; if one file format is not able to be natively loaded by a system a backup version may be able to work.

I have found that certain browsers will be able to run files encoded with the .webm container using VP8 plus Vorbis for audio and video, respectively, out of the box while using HTML5 players.²

Citations

---

¹ https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

² https://en.wikipedia.org/wiki/HTML5_video#Multiple_sources