-4

我有一个使用这个反应插件在 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        |

我们如何解决这个问题？

4

1 回答 1

1

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

反应多媒体捕获，第 101 行

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

该库还要求用户代理video/webm在此行中进行编码：

反应多媒体捕获，第 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)

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

您还应该阅读有关支持的文件类型的 MDN 文章：HTML 音频和视频的媒体格式。

于 2018-02-14T17:42:16.193 回答