<video> 标签中的 MP4 视频无法在 Firefox 上播放，如果直接打开则播放

Question

我有一个小型家庭服务器，可以托管多个项目，其中包括一些 MP4 示例视频。

我一直在使用一个简单的 <video> 标签来播放视频，它适用于 Firefox、Chrome 和 Internet Explorer。

但是，由于某些未知原因，几个月前我的服务器开始锁定，因此我决定重新安装 OS。我已经从硬盘驱动器中抢救了以前的安装，并且我有 re-used（可能的话）各种组件的配置文件。

一切正常，除了现在 Firefox 在使用 <video> 标签时拒绝播放 MP4 视频，只显示 No video with supported format and MIME type found 消息。直接打开文件（Viev video 在 Firefox 中）有效，因为视频可以正确播放。

Chrome（最新版本）和 Internet Explorer（最新的 W7 版本，不确定具体数字是多少）工作正常。

因为我没有换浏览器，只换了服务器software/configuration，我怀疑问题出在服务器上。

我四处搜索，发现了一些建议，比如将正确的 mime 添加到 Apache 的 .htaccess 文件中，并检查 header 中的可能指示。除了 re-encoding 视频之外，我遵循了所有似乎值得遵循的想法，但 none 奏效了。

更多事实：

我正在使用崩溃前播放视频的同一浏览器和机器来尝试现在播放视频。
This video 玩的很好，我看不出和我的有什么区别。
这是我机器上的示例视频：http://silviu.audiozone.ro（斜线）recording.html - 请原谅我使用的糟糕混淆。

这是服务器在尝试播放视频标签中的文件时返回的header：

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

这是服务器在尝试直接播放文件时返回的header（通过访问它的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

我看不出这里有什么重大差异。

此外，我找到了一个较早的答案（从 2012 年 12 月开始），该答案表明由于一些版税问题，Firefox 不播放 <video> 标签中的 MP4 文件，但由于视频用于播放和HTML5 video sample 播放得很好，我怀疑情况已不再如此。

我不想 re-encode 我的视频，考虑到它们过去在 Firefox 中运行得很好。

Answer 1

Firefox 在控制台的错误消息中告诉您问题。它是 3GP 格式而不是 MP4:

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

您可以使用 ffprobe 证实这一点。我截断了输出。

  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

重要的部分是compatible_brands: isom3gp4。 3GP 是一种类似于 MP4 的文件格式，因为它们都基于 ISO base media format 但它们并不相同。可以播放两者的浏览器和应用程序可能不会介意文件不是内容类型中指定的格式 header。

我认为 Firefox 可能已经能够播放这些文件直到版本 41，基于我看到的其他提到的与显然在它之前播放的文件相同的错误更新。所以我敢打赌那是变化而不是你服务器上的东西。

将视频和音频传输到 MP4 容器中会产生可播放的文件（尽管高比特率和 high h.264 配置文件不适合网络传输，但这是另一回事）。

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

顺便说一下，当您直接打开文件时，我不会将浏览器播放的内容作为同一浏览器中 video 元素中播放内容的代表。他们的行为往往不同。

Answer 2

由于 Firefox 和其他一些浏览器无法播放某些编解码器，您必须将视频转换为常见格式，例如 mp4 和 ogg。如果这些格式的每个视频都有 2 个副本，则可以在大多数现代浏览器上播放所有视频。

但是你说你不想重新编码视频，所以你可以自动转换它们。这个提议有一些包，比如：

流利的 ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg

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

视频转换器： https://www.npmjs.com/package/videoconverter

同时如果你想使用fluent-ffmpeg，你必须在你的服务器上安装ffmpeg。所以你可以使用这些包之一来自动安装 ffmpeg :

ffmpeg 安装程序： https://www.npmjs.com/package/@ffmpeg-installer/ffmpeg

ffmpeg-静态： https://github.com/eugeneware/ffmpeg-static

Answer 3

尝试通过 cmd 转换：

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

新文件在我的 FF 上运行良好。

<video> 标签中的 MP4 视频无法在 Firefox 上播放，如果直接打开则播放

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

html

video

firefox

mp4

html5-video