title: Load large video file in HTML
body: <p>Here is my problem : I want to play a large video file (3.6Gb) stored in a S3 bucket, but it seems the file is too big and the page crash after 30sec of loading.</p>
  
  <p>This is my code to play the video :</p>
  
  <pre><code>var video = document.getElementById("video");
  const mediaSource = new MediaSource();
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });
  
  function sourceOpen() {
      URL.revokeObjectURL(video.src);
      const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.f40028"');
  
      fetch('URL_TO_VIDEO_IN_S3')
          .then(response =&gt; response.arrayBuffer())
          .then(data =&gt; {
              // Append the data into the new sourceBuffer.
              sourceBuffer.appendBuffer(data);    
          })
          .catch(error =&gt; {
  
          });
  }
  </code></pre>
  
  <p>I saw that blob URL could be a solution but it didn't work well with my URL.</p>