如何修复视频元素播放黑屏代替视频

Question

我的视频元素的src是一个视频录制的blob URL (mediaRecorder应用程序接口)。当我点击播放时，它显示了一个黑屏，而不是播放视频。当我将视频元素打印到控制台，右键单击源并单击“在新选项卡中打开”时，视频将在新选项卡中播放。

这是一个chrome扩展，我正在录制一个视频(通常3-5秒长)，然后尝试在视频元素中播放相同的视频。

<video id='recording' width='100%' height='100%' src={this.state.blobURL} type='video/webm' controls></video>

// creating new blob (binary large obj) defining it as an webm file
          let blob = new Blob(buffer, {type:'video/webm'});
          chrome.extension.getBackgroundPage().console.log('this is the blob', blob)

          // convert blob into object URL (can be used as video src)
          let videoURL = URL.createObjectURL(blob)
          t.setState({ blobURL: videoURL, video: blob })

没有任何错误，只是播放黑屏，如果可以，请帮助:)

Answer 1

好的，解决这个问题的方法是始终保持MIME类型的一致性。我没有实例化抓取视频的MIME类型的流。一旦我这样做了，并将斑点设置为相同的，视频播放就很好！我使用的是"video/webm“MIME类型