Firefox 不播放 Chrome 中录制的视频

Question

我在 Chrome 中使用此 React 插件录制了一段视频：rico345100/react-multimedia-capture。此视频已上传到服务器。

视频在 Chrome 中播放正常。但是，同一视频无法在 Firefox 中打开。相反，在 Firefox 中录制的视频在 Chrome 和 Firefox 中都可以正常播放。

                      |  Works in Firefox |  Works in Chrome |
----------------------+-------------------+------------------+
  Recorded in Firefox |         Y         |         Y        |
----------------------+-------------------+------------------+
   Recorded in Chrome |         N         |         Y        |

我们如何解决这个问题？

Answer 1

问题是 Chrome 是（可能将录音编码为 h246，尽管您使用的库要求将其编码为 vp8。您可以在要求在此行中专门检查 vp8 支持的库：

react-multimedia-capture, line 101

let types = ['video/webm;codecs=vp8', 'video/webm', ''];

库还要求用户代理在此处的这一行中为 video/webm 编码：

react-multimedia-capture, line 177

let blob = new Blob(this.mediaChunk, { type: 'video/webm' });

但是，似乎用户代理在创建 Blob.

时可以使用它喜欢的任何编解码器进行编码。

我创建了一个玩具项目来模仿图书馆正在做的事情，并且在创建 Blob 时试图指示编解码器似乎没有效果。以下是每个用户代理的每个保存文件的 ffprobe 输出：

Chrome

Input #0, matroska,webm, from 'recording.chrome.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)
    Stream #0:1(eng): Video: h264 (Baseline), yuv420p(progressive), 1280x720 [SAR 1:1 DAR 16:9], 16.67 fps, 16.67 tbr, 1k tbn, 2k tbc (default)

火狐

Input #0, matroska,webm, from 'recording.firefox.webm':
  Metadata:
    encoder         : QTmuxingAppLibWebM-0.0.1
  Duration: N/A, start: -0.001000, bitrate: N/A
    Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1280x720, SAR 1:1 DAR 16:9, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)
    Stream #0:1(eng): Audio: opus, 48000 Hz, mono, fltp (default)

考虑到这一点，您最好的做法是不要依赖浏览器以所有浏览器都可以播放的格式对录音进行编码。您可以将视频重新编码为更广泛的用户代理可以使用的格式，或者让您的用户将他们的视频上传到您的服务器，您可以在服务器上为他们重新编码，然后使用 [=21 有条件地提供内容=] 标签。

您还应该阅读这篇关于支持的文件类型的 MDN 文章：Media formats for HTML audio and video。

Firefox 不播放 Chrome 中录制的视频

Firefox not playing video recorded in Chrome

javascript

reactjs

firefox

web-mediarecorder

Chrome

火狐