title: HTML5 video byte range requests from non-zero start byte
body: <p>I am currently working on creating an HTML5 video player that can play videos hosted on Amazon s3. The videos on s3 will be very lengthy and I want the ability to make byte range requests for smaller chunks of the videos. The code I am currently using is shown below:</p>
  
  <pre><code>window.URL = window.URL || window.webkitURL;
  
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "http://s3.amazonaws.com/bucket_name/video_name.mp4", true);
  var range_req = 'bytes=0-1000000';
  xhr.setRequestHeader("Range", range_req);
  xhr.responseType = 'blob';
  xhr.onload = function(e) {
      var video = document.createElement('video');
      video.src = window.URL.createObjectURL(this.response);
      video.autoplay = true;
      video.style["margin-left"] = "300px";
      document.body.appendChild(video);
  };
  xhr.send();
  </code></pre>
  
  <p>Now, this code works perfectly when the start-byte in the range request header is 0 (as is shown in the code above). However, I also want to be able to make range requests for chunks that don't start at the beginning of the video (say Range: bytes=1000000-2000000). And this is what is not working. When I try to make this kind of range request, I send the request with the correct range and get an appropriate partial content response (206) from s3, but the video will not play. Any ideas on what I need to do to get this to work? As I mentioned earlier my goal is to be able to play chunks of the videos stored on s3 that don't start at the beginning (from byte 0).</p>