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.

Feigned

possibly answered here: https://mcmap.net/q/2031707/-safari-won-39-t-play-html5-video – Customhouse

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.

Felike

First: Is there a good explanation somewhere on why the file plays directly in Firefox but not in the video tag? Second, I used the mp4 format since it was streamable and it was simply a problem of copying the file from the phone to the server, avoiding lengthy transcoding. Third: I don't care not the optimal format, it's for personal use only :) – Feigned

1: I don't have a reference, but it will boil down to trying to applying strict rules within an HTML5 document to be standards compliant (even though the spec doesn't define which formats should be supported, MP4, WebM Ogg are de facto). When you open a file directly and the browser is being used as a general file viewer, it just tries to be as compatible as possible. 2: MP4 (with h.264 and aac or mp3) is a good choice. Unfortunately this file is not MP4, even if the phone is giving it that file extension. Looks like your phone is lying to you. 3: Fair enough. – Felike

BTW, as the codecs used within the file are h.264 and aac that data can be transmuxed (copied) into an MP4 container without transcoding. That's quick. The ffmpeg command above does that. – Felike

Answer 2

Try convert by cmd:

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

new file works great on my FF.

Juncture

Yeah, I had to convert the files in the end... thanks. – Feigned

Answer 3

As Firefox & some other browsers can't play some codecs, you must convert your videos to common formats, means mp4 & ogg. If you have 2 copy for each video with these formats, you can play all of your videos on most of modern browser.

But you said you don't want to re-encode the videos, So you can convert them automatically. there's some packages for this propose, like :

fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg

ffmpeg.js : https://github.com/Kagami/ffmpeg.js/tree/master

videoconverter : https://www.npmjs.com/package/videoconverter

meanwhile if you want to use fluent-ffmpeg, you must have ffmpeg installed on your server. So you can use one of these packages to install ffmpeg automatically :

ffmpeg-installer : https://www.npmjs.com/package/@ffmpeg-installer/ffmpeg

ffmpeg-static : https://github.com/eugeneware/ffmpeg-static

Jo

Thank you for your input. I ended up re-encoding the videos before uploading, but it's good to know that it is possible to re-encode them on the fly. – Feigned