javascript - 带视频的网站加载屏幕(等待视频完全加载)

Question

我在我的网站中包含了一个大约 28MB 的 html5 视频。

在显示网站之前，我还需要一个加载屏幕。我将 div 包含在类“se-pre-con”中，并为其添加了 css。

代码如下:

jQuery(window).load(function() {
    // Animate loader off screen
    jQuery(".se-pre-con").fadeOut("slow");;
});

.no-js #loader {
    display: none;  
}
.js #loader { 
    display: block; 
    position: absolute; 
    left: 100px; 
    top: 0; 
}
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../images/ajax-loader.gif) center no-repeat #fff;
}

<video id="v0" tabindex="0" autobuffer="autobuffer" preload="auto">
      <!-- <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="images/bb.webm"></source> -->
      <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="images/bb.mp4"></source> 
      <source type="video/ogv; codecs=&quot;theora, vorbis&quot;" src="images/bb.ogv"></source> 
      
      <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>

我使用 codepen 中的滚动视频控件 http://codepen.io/ollieRogers/pen/lfeLc

但是这个加载器不会等待视频。它消失了，视频没有加载完整。现在，当我尝试滚动视频时，我遇到了问题......

您知道我如何在整个视频加载完毕之前显示加载页面吗？

Answer 1

您可以监听 canplaythrough 事件的触发。不过从加载事件中删除 fadeOut。它与加载的整个视频并不完全相同，但这是我能想到的最接近 atm 的情况。

var video = document.querySelector('#v0');
video.addEventListener('canplaythrough', function () {
        // Add code to fade out the loading screen.
});