Preloading HTML5 video for smooth AJAX page transitions

Question

Inquiry

I am creating smooth transitions between pages via jQuery's .fade() effect. The second page ( page2.html ) contains HTML5 video elements (either .webm or .mp4 depending on the browser). How can I preload these movies prior to page2.html loading in order to eliminate the brief flash/blip indicating the location of the video element itself? (You know, the greyish screen showing precisely where the player is.)

To be clear, I am not asking how to eliminate the white flash between page loads; I simply want to have the video player ready and movies completely loaded before ever displaying page2.html itself.

Code Examples

AJAX fade transitioning:

$('#wrapper').fadeOut(2500, function() {
  $(this).load('page2.html', function() {
    $(this).fadeIn(2500);
  });
});

HTML5 video from page2.html

<video id="example" preload="auto" autoplay="autoplay" loop="loop">
  <source src="video/example.webm" type="video/webm" />
  <source src="video/example.mp4" type="video/mp4" />
</video>

Answer 1

Thanks to Bart.

var loaded = false;

//If the video is loaded...
example.addEventListener("canplaythrough", function() {

  //Make sure it only fires once
  if (loaded == false) {
    loaded = true;

    //Fade in the content
    $('#wrapper').fadeIn(2500);

  }
});