title: How do i append two video files data to a source buffer using media source api?
body: <p>I have two videos name v11.webm and v12.webm. </p>
  
  <p>What i want is that these two videos should run seamlessly without any gap. </p>
  
  <p>I am following the media source api approach of appending data to source buffer.</p>
  
  <p>I am referring the demo given on this <a href="http://html5-demos.appspot.com/static/media-source.html" rel="noreferrer">link</a> </p>
  
  <p>I have modified that example and removed the part of chunking the video and also tried to append data to source buffer file wise.</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;script&gt;
  
  var video = document.querySelector('video');
  
  window.MediaSource = window.MediaSource || window.WebKitMediaSource;
  if (!!!window.MediaSource) {
    alert('MediaSource API is not available');
  }
  
  var mediaSource = new MediaSource();
  
  video.src = window.URL.createObjectURL(mediaSource);
  
  mediaSource.addEventListener('webkitsourceopen', function(e) {
  
      var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');  
  
      for(i=1;i&lt;=2;i++)
      {
          (function(i){
  
            GET('v1'+i+'.webm', function(uInt8Array) {
                var file = new Blob([uInt8Array], {type: 'video/webm'});
  
                var reader = new FileReader();
                reader.onload = function(e) {
                  sourceBuffer.append(new Uint8Array(e.target.result));            
                };
                reader.readAsArrayBuffer(file);
  
            });
          })(i);
      }
  
  }, false);
  
  mediaSource.addEventListener('webkitsourceended', function(e) {
    logger.log('mediaSource readyState: ' + this.readyState);
  }, false);
  
  function GET(url, callback) {
   // alert(url);
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer';
    xhr.send();
  
    xhr.onload = function(e) {
      if (xhr.status != 200) {
        alert("Unexpected status code " + xhr.status + " for " + url);
        return false;
      }
      callback(new Uint8Array(xhr.response));
    };
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Right now the code is not working as desired. </p>
  
  <p>There is an inconsistent mixing of v11.webm and v12.webm file data.</p>
  
  <p>It is not running seamlessly.</p>