预加载HTML5视频以实现流畅的AJAX页面转换

Question

询问

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

要清楚，我 不 询问如何消除页面加载之间的白色闪烁;我只是希望在显示 page2.html 之前准备好视频播放器并完全加载电影。

代码示例

AJAX淡出过渡：

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

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

Answer 1

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

  }
});