title: MediaRecorder timeslice segments - only the first segment plays
body: <p>I have the following on chrome latest: </p>
  
  <pre><code> var options = { mimeType: "video/webm;codecs=vp8" };
   internalMediaRecorder = new MediaRecorder(internalStream, options);
   internalMediaRecorder.ondataavailable = function (blob) {
          // put blob.data into an array
          var src = URL.createObjectURL(blobData.segment);
          const $container = $("body");
          const $video = $("&lt;video id='" + blobData.ts + "-" + blob.data.size + "' controls src='" + src + "'&gt;&lt;/video&gt;").css("max-width", "100%");
          $container.prepend($video);
          // if I stop/start the recorder, I get playable segments here, separated by unplayable mini-segments from onDataAvailable because I call stop right after processing a video.  I can "approximate" desired behavior by doing this and then ignoring blobs that are less than some threshhold to ignore the "dead gap" segments.
   }
   internalMediaRecorder.start(segmentLengthInMs); // every 5s
  </code></pre>
  
  <p>I then compile an array of 5s segments - the blob data is available.  However when I create a URL for each of these segments: </p>
  
  <pre><code> URL.createObjectURL(videoSegment)
  </code></pre>
  
  <p>Only the first video plays.  Why is this?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>If I stop/start the recorder in <code>onDataAvailable</code>, I get playable segments here, separated by unplayable mini-segments from onDataAvailable because I call stop right after processing a video.  I can "approximate" desired behavior by doing this and then ignoring blobs that are less than some threshhold to ignore the "dead gap" segments.  This smells like feet though and I'd like to get proper segmentation working if possible. </p>