title: Is it possible to preload an entire HTML5 video source before playing?
body: <p><strong><em>Solution</em></strong></p>
  
  <p>I created a working example of the accepted answer which uses an XHR and reports loading progress through a bar.</p>
  
  <p>It's available here.</p>
  
  <p><a href="https://github.com/synthecypher/full-preload" rel="nofollow noreferrer">https://github.com/synthecypher/full-preload</a></p>
  
  <p><strong><em>Question</em></strong></p>
  
  <p>I've noticed when I create a <code>&lt;video&gt;</code> element with sources and call <code>load()</code> it will load to about 36% and then stops unless you <code>play()</code> it, at which time it'll continue to load the rest of the video as it plays.</p>
  
  <p>However, I want to ensure the entire video loaded before hand as it's an element in a timed exercise and if the internet connection drops during the exercise I will have to detect such an event and restart the exercise. </p>
  
  <p>I assume this is a built in feature of the HTML5 media elements but is it possible to override this native functionality?</p>
  
  <p>I've attempted to load the entire video source as a <code>arraybuffer</code> using an <code>XMLHttpRequest</code> which is then converted to a blob and set as the <code>src</code> of a <code>&lt;source&gt;</code> element in my <code>&lt;video&gt;</code> element.</p>
  
  <p>This does work however, it isn't ideal as I can't report the progress of download to the user through the use of progress bar as an XHR is a syncronous operation and will cause my JavaScript to hang until a response is received. I know XHR2 now has this funtionality but I have to support IE8+ so that's not an option.</p>
  
  <p>Is there an easier more elegant solution to my problem, which will report progress?</p>
  
  <p><strong>Requirements</strong></p>
  
  <ul>
  <li>Need to preload the entire <code>&lt;video&gt;</code> element's <code>&lt;source&gt;</code> before playing.</li>
  <li>Need to report progress of the </li>
  </ul>