Preloading HTML5 video for smooth AJAX page transitions

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.)

我通过jQuery的.fade()效果在页面之间创建平滑过渡。第二页(page2.html)包含HTML5视频元素(.webm或.mp4,具体取决于浏览器)。如何在page2.html加载之前预先加载这些电影,以消除指示视频元素本身位置的简短flash / blip? (你知道,灰色的屏幕显示了玩家的确切位置。)

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.

要清楚,我不是要问如何消除页面加载之间的白色闪烁;在显示page2.html本身之前,我只想让视频播放器准备就绪并完全加载电影。

Code Examples

AJAX fade transitioning:

AJAX淡出过渡:

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

HTML5 video from page2.html

来自page2.html的HTML5视频

<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>

1 个解决方案

#1

Thanks to Bart.

感谢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);

  }
});

#1