Question

我有一个使用此反应插件在Chrome中录制的视频：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输出：

铬

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)

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

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

Firefox无法播放Chrome中录制的视频

1 个答案:

铬

火狐