CODEWITHSUNDEEP
javascriptjqueryhtmlcssvideo
lackner_media
lackner_media

Reputation: 153

Loading Screen for Website with Video (wait for full load of video)

I have included a html5 video in my website with about 28MB.

I need also a Loading Screen before the website is shown. And I included the div with the class "se-pre-con" and the css for that.

Here is the code for this: 

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>

I use the Scrolling Video Control from codepen http://codepen.io/ollieRogers/pen/lfeLc

But this loader don't waits for the video. It disappers and the video isn't loaded complete. And now when I try to scroll threw the video I have problems ...

Do you have a idea how I can show the loading page until the whole video is loaded?

Upvotes: 1

Views: 4329

Answers (1)

Shilly
Shilly

Reputation: 8589

You can listen for the canplaythrough event to fire. Remove the fadeOut from the load event though. It's not exactly the same as the whole video has been loaded, but it's the closest I can come up with atm.

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

Upvotes: 1

Related Questions