Preloading site with HTML5 video loop

Question

I am developing a site that uses a large section with a video background. The background is set to loop. We also wanted to implement an preloading image while the site was loading resources.

The basic structure is just some simple jQuery:

$(window).load(function() {
$(".loader").fadeOut("slow");
})

and HTML:

<div class="loader"></div>

right after the body tag.

The problem with this is that the server sends multiple '206 partial content' packets to the browser and the preloading image just hangs around because I believe the server is sending small packets of the video to load or it's just requesting the file over and over - I really can't tell.

I've tried to think of some way around this, but after hours of searching I haven't come up with any solutions.

I'm wondering if there is a way to have this script maybe ignore the <video> tag and just wait for the page to load the other resources?

Answer 1

I've had success building out the video in JS and then using imagesLoaded to play. I didn't test the code below, but I think it'll work.

https://github.com/desandro/imagesloaded

    var videoWrap = document.getElementById('videoWrap'); 
    var video = document.createElement('video');
    videoWrap.appendChild(video);       
    video.setAttribute("id","myVideo");
    video.controls = false; 

    if ( video.canPlayType('video/mp4') ) {
        video.src = '/path/video.mp4'; 
    } else {
        video.src = '/path/video.ogg'; 
    }

    video.load();

    /*
    video.oncanplaythrough = (function(){
        // useful for some stuff
    })();
    */

    $('#imagesContainer').imagesLoaded( function() {
        video.play();
    });