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

Question

我的视频元素的 src 是视频录制 (mediaRecorder API) 的 blob URL。当我点击播放时，它没有播放视频，而是显示黑屏。当我将视频元素打印到控制台并右键单击源并单击 "open in new tab" 时，视频将在新选项卡中播放。

这是一个 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 类型

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

How to fix video element playing black screen instead of video

javascript

google-chrome

google-chrome-extension

html5-video