CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionhtml5-video
Peter Louis
Peter Louis

Reputation: 125

How to fix video element playing black screen instead of video

My video element's src is a blob URL of a video recording (mediaRecorder API). Instead of playing the video, when I hit play it displays a black screen. When I print the video element to the console and right click the source and click "open in new tab", the video plays in a new tab.

This is a chrome extension and I am recording a video (usually 3-5 seconds long) and then trying to playback that same video in a video element. 

<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 })

No errors at all, just plays black-screen, please help if you can :)

Upvotes: 4

Views: 3313

Answers (1)

Peter Louis
Peter Louis

Reputation: 125

Ok so the answer to this is keeping the MIME type consistent throughout. I was not instantiating the stream that was grabbing the video with a MIME type. Once I did, and set the blob to the same, the video played just fine! I used the "video/webm" MIME type

Upvotes: 3

Related Questions