***Solution***

I created a working example of the accepted answer which uses an XHR and reports loading progress through a bar.

It's available here.

<https://github.com/synthecypher/full-preload>

***Question***

I've noticed when I create a `<video>` element with sources and call `load()` it will load to about 36% and then stops unless you `play()` it, at which time it'll continue to load the rest of the video as it plays.

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. 

I assume this is a built in feature of the HTML5 media elements but is it possible to override this native functionality?

I've attempted to load the entire video source as a `arraybuffer` using an `XMLHttpRequest` which is then converted to a blob and set as the `src` of a `<source>` element in my `<video>` element.

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.

Is there an easier more elegant solution to my problem, which will report progress?

**Requirements**

* Need to preload the entire `<video>` element's `<source>` before playing.
* Need to report progress of the