MP4 video not playing on Firefox in the <video> tag, plays if directly opened

Question

I have a small home server that hosts several items, among them a few MP4 sample videos.

I've been using a simple <video> tag to play the videos, and it worked well for for Firefox, Chrome and Internet Explorer.

However, for some unknown reason my server started locking up a few months back, so I have decided to reinstall the OS. I have salvaged the previous installation from the hard drive and I have re-used (where possible) the configuration files for various components.

Everything worked just fine, Except that now Firefox refuses to play the MP4 videos when using the <video> tag, showing only the No video with supported format and MIME type found message. Opening the file directly (Viev video in Firefox) works, as the video get played correctly.

Chrome (latest version) and Internet Explorer (latest W7 version, not sure what the exact number is) are working just fine.

Since I have not changed the browser, but only the server software/configuration, I suspect that the issue lies solely on the server.

I have searched around, and I have found several suggestions, like adding the correct mime to the Apache's .htaccess files and checking the headers for possible indications. I have followed every idea that seemed worth following, short of re-encoding the video, but none worked.

More facts:

• I am using the same browser and machine that played the videos before the crash to try and play the videos now.
• This video plays just fine, and I don't see any difference between it and mine.
• Here is a sample video from my machine: http://silviu.audiozone.ro (slash) recording.html - please excuse the poor obfuscation that I have used.

This is the header returned by the server when attempting to play the file from the video tag:

Accept-Ranges: bytes
Connection: Keep-Alive
Content-Length: 17709423
Content-Range: bytes 0-17709422/17709423
Content-Type: video/mp4
Date: Fri, 18 Dec 2015 15:00:20 GMT
Etag: "20081-10e394f-5272d4fd62880;17709423"
Keep-Alive: timeout=5, max=99
Last-Modified: Fri, 18 Dec 2015 14:54:10 GMT
Server: Apache/2.2.22 (Debian)
X-Mod-H264-Streaming: version=2.2.7

This is the header returned by the server when attempting play the file directly (by accessing it's URL):

Accept-Ranges: bytes
Connection: Keep-Alive
Content-Length: 17709423
Content-Type: video/mp4
Date: Fri, 18 Dec 2015 15:45:00 GMT
Etag: "20081-10e394f-5272d4fd62880;17709423"
Keep-Alive: timeout=5, max=100
Last-Modified: Fri, 18 Dec 2015 14:54:10 GMT
Server: Apache/2.2.22 (Debian)
X-Mod-H264-Streaming: version=2.2.7

I don't see any major differences here.

Furthermore, I have found an older answer (from December 2012) that indicated that Firefox does not play MP4 files in the <video> tag due to some royalties issue, but since the videos used to play and the HTML5 video sample plays just fine, I suspect this is no longer the case.

I'd rather not re-encode my videos, considering that they worked just fine in Firefox in the past.

Answer 1

Firefox tells you the problem in the error message in the console. It's 3GP format rather than MP4:

HTTP "Content-Type" of "video/3gpp" is not supported. Load of media resource ...recording.mp4 failed.

You can corroborate that with ffprobe. I've truncated the output.

  Metadata:
    major_brand     : isom
    minor_version   : 0
    compatible_brands: isom3gp4
    creation_time   : 2015-12-18 14:54:58
    location        : +44.4413+026.0771/
    location-eng    : +44.4413+026.0771/
  Duration: 00:00:08.22, start: 0.000000, bitrate: 17235 kb/s
    Stream #0:0(eng): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 1920x1080, 17106 kb/s, 30.05 fps, 30 tbr, 90k tbn, 180k tbc (default)
    Metadata:
      creation_time   : 2015-12-18 14:54:58
      handler_name    : VideoHandle
    Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 123 kb/s (default)
    Metadata:
      creation_time   : 2015-12-18 14:54:58
      handler_name    : SoundHandle

The important part is compatible_brands: isom3gp4. 3GP is a similar file format to MP4 in that they are both based on the ISO base media format but they're not the same. Browsers and applications that can play both might not mind that the file isn't the format specified in the content type header.

I think Firefox may have been able to play these files until version 41, based on other mentions I've seen of the same error with files which apparently were playing before it updated. So I'd bet that's the change rather than something on your server.

Transmuxing the video and audio into an MP4 container results in a playable file (albeit the high bitrate and high h.264 profile aren't ideal for web delivery, but that's a different story).

ffmpeg -i recording.mp4 -codec copy output.mp4

By the way, I wouldn't take what a browser plays when you open the file directly as representative of what will in a video element in the same browser. They often behave differently.

Answer 2

Try convert by cmd:

ffmpeg -i origin.mp4 -vcodec libx264 -pix_fmt yuv420p new.mp4

new file works great on my FF.