title: I want to do video streaming without buffering more than 1GB
body: <p>I write my code for video streaming without buffering. It's working fine within 20 minutes videos. I tried more than 1GB video but unfortunately it's not working.I placed below my code.</p>
  
  <pre class="lang-js prettyprint-override"><code>var ctx = canvas.getContext('2d');
  
  canvas.onclick = function (e) {
      var vl = vid.duration,
          w = canvas.width,
          x = e.clientX - 5;
  
      vid.currentTime = x / w * vl;
  }
  
  loop();
  
  function loop() {
  
      var b = vid.buffered,
          i = b.length,
          w = canvas.width,
          h = canvas.height,
          vl = vid.duration,
          x1, x2;
  
      ctx.fillStyle = '#000';
      ctx.fillRect(0, 0, w, h);
      ctx.fillStyle = '#d00';
  
      while (i--) {
          x1 = b.start(i) / vl * w;
          x2 = b.end(i) / vl * w;
          ctx.fillRect(x1, 0, x2 - x1, h);
      }
      ctx.fillStyle = '#fff';
  
      x1 = vid.currentTime / vl * w;
      ctx.textBaseline = 'top';
      ctx.textAlign = 'left';
  
      ctx.fillText(vid.currentTime.toFixed(1), 4, 4);
  
      ctx.textAlign = 'right';
      ctx.fillText(vl.toFixed(1), w - 4, 4);
  
      ctx.beginPath();
      ctx.arc(x1, h * 0.5, 7, 0, 2 * Math.PI);
      ctx.fill();
  
      setTimeout(loop, 29);
  }
  play.addEventListener('click', function () {
      vid.play()
  }, false);
  pause.addEventListener('click', function () {
      vid.pause()
  }, false);
  </code></pre>
  
  <p>This code is working within 20 minutes video only. I want to know how to do code for more than 1GB video. Please help me with code and example.</p>