预加载 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

感谢巴特。

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

  }
});