title: How to fix video element playing black screen instead of video
body: <p>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. </p>
  
  <p>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. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;video id='recording' width='100%' height='100%' src={this.state.blobURL} type='video/webm' controls&gt;&lt;/video&gt;
  </code></pre>
  
  <pre><code>// 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 })
  </code></pre>
  
  <p>No errors at all, just plays black-screen, please help if you can :)</p>