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

Posted

技术标签:

【中文标题】MP4 视频在 <video> 标签中无法在 Firefox 上播放，如果直接打开则播放【英文标题】：MP4 video not playing on Firefox in the <video> tag, plays if directly opened 【发布时间】：2016-03-25 09:19:17 【问题描述】：

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

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

但是，由于某种未知原因，几个月前我的服务器开始锁定，所以我决定重新安装操作系统。我已经从硬盘驱动器中挽救了以前的安装，并且我已经（在可能的情况下）重新使用了各种组件的配置文件。

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

Chrome（最新版本）和 Internet Explorer（最新 W7 版本，不确定具体数字是多少）运行良好。

由于我没有更改浏览器，而只是更改了服务器软件/配置，我怀疑问题仅出在服务器上。

我四处搜索，发现了一些建议，例如将正确的 mime 添加到 Apache 的 .htaccess 文件中并检查标头是否有可能的迹象。我遵循了所有似乎值得遵循的想法，除了重新编码视频，但没有一个奏效。

更多事实：

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

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

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

这是尝试直接播放文件时服务器返回的标头（通过访问它的 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 不会播放 &lt;video&gt; 标签中的 MP4 文件，但由于视频用于播放并且 HTML5 video sample 播放很好，我怀疑不再是这种情况了。

考虑到它们过去在 Firefox 中运行良好，我宁愿不重新编码我的视频。

【问题讨论】：

可能在这里回答：***.com/a/34235450/5641669 【参考方案1】：

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

不支持“video/3gpp”的 HTTP“Content-Type”。加载媒体资源 ...recording.mp4 失败。

您可以使用 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，但它们并不相同。可以同时播放的浏览器和应用程序可能不会介意文件不是内容类型标头中指定的格式。

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

将视频和音频转换成 MP4 容器会生成一个可播放的文件（尽管高比特率和 high h.264 配置文件并不适合网络交付，但那是另一回事）。

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

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

【讨论】：

第一：关于为什么文件直接在 Firefox 中播放而不是在视频标签中播放，是否有一个很好的解释？其次，我使用了 mp4 格式，因为它是可流式传输的，而且只是将文件从手机复制到服务器的问题，避免了冗长的转码。第三：我不在乎最佳格式，仅供个人使用:) 1：我没有参考资料，但归结为尝试在 HTML5 文档中应用严格的规则以符合标准（即使规范没有定义应该使用哪些格式）支持，MP4、WebM Ogg 是事实上的）。当您直接打开文件并将浏览器用作一般文件查看器时，它只是尝试尽可能兼容。 2：MP4（带h.264和aac或mp3）是个不错的选择。不幸的是，这个文件不是 MP4，即使手机给了它那个文件扩展名。看起来你的手机在骗你。 3：足够公平。 顺便说一句，由于文件中使用的编解码器是 h.264 和 aac，因此可以将数据转换（复制）到 MP4 容器中而无需转码。这很快。上面的ffmpeg 命令就是这样做的。【参考方案2】：

尝试通过cmd转换：

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

新文件在我的 FF 上效果很好。

【讨论】：

是的，最后我不得不转换文件...谢谢。【参考方案3】：

由于 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

【讨论】：

感谢您的意见。我最终在上传之前重新编码了视频，但很高兴知道可以即时重新编码。

以上是关于MP4 视频在 <video> 标签中无法在 Firefox 上播放，如果直接打开则播放的主要内容，如果未能解决你的问题，请参考以下文章

如何为 HTML <video> 标签缓存 mp4 视频？

前端小功能：video视频播放

【HTML5的video标签】我的谷歌浏览器无法播放，video标签里是MP4格式视频！

html5 视频标签不播放 mp4 - IIS

我想问下大家HTML5的那个video标签支持MP4视频具体是怎么样的MP4格式啊.

Html5视频播放video标签使用详解转