Replace low resolution video with high definition video

Question

I am creating a website with a full browser (see http://bitstream.ca/ ). For an optimal experience, I would like to first use low quality video files and upload high resolution videos in the background. When the high resolution is fully loaded, I want to change the low res value. It's pretty accurate that this is possible using javascript along with some listeners on a video object, but I'm not sure how to do this. Can anyone help?

Answer 1

I would suggest using JavaScript to determine the user bandwidth, and then decide with the result whether to download the hi-res or low-res version.

This post should be a good starting point.

Answer 2

If your viewer supports switching, you can calculate the download completion time and run high resolution in the background. Give it a second before switching it to the front surface.