Question

我的视频元素的src是视频录制的Blob URL（mediaRecorder API）。当我点击播放时，它会显示黑屏，而不是播放视频。当我将视频元素打印到控制台并右键单击源，然后单击“在新选项卡中打开”时，视频将在新选项卡中播放。

这是一个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类型捕获视频的流。完成后，将Blob设置为相同，视频播放就很好了！我使用了“ video / webm” MIME类型

如何修复播放黑屏而不是视频的视频元素

1 个答案: