Display an image while a background video loads

Question

I've been using Victor Coulon's jquery.background video (found here: https://github.com/Victa/HTML5-Background-Video) to create this website: web.alejorivera.com.

The video in the background takes about 3 or 4 seconds to load, and I want the user to see a picture before the video starts playing, what you see right now is a big blue box.

Any ideas on how to achieve this?

Thanks a lot :)

function fadedEls(el, shift) {
el.css('opacity', 0);

switch (shift) {
    case undefined: shift = 0;
    break;
    case 'h': shift = el.eq(0).outerHeight();
    break;
    case 'h/2': shift = el.eq(0).outerHeight() / 2;
    break;
}

$(window).resize(function() {
    if (!el.hasClass('ani-processed')) {
        el.eq(0).data('scrollPos', el.eq(0).offset().top - $(window).height() + shift);
    }
}).scroll(function() {
    if (!el.hasClass('ani-processed')) {
        if ($(window).scrollTop() >= el.eq(0).data('scrollPos')) {
            el.addClass('ani-processed');
            el.each(function(idx) {
                $(this).delay(idx * 200).animate({
                    opacity : 1
                }, 1000);
            });
        }
    }
});
};

(function($) {
$(function() {
    var videobackground = new $.backgroundVideo($('#bgVideo'), {
        "align" : "centerXY",
        "path" : "assets/img/",
        "width": 1280,
        "height": 720,
        "filename" : "guate",
        "types" : ["mp4", "ogg", "webm"]
    });


    (function(el) {
        el.css('left', '-100%');

        $(window).resize(function() {
            if (!el.hasClass('ani-processed')) {
                el.data('scrollPos', el.offset().top - $(window).height() + el.outerHeight());
            }
        }).scroll(function() {
            if (!el.hasClass('ani-processed')) {
                if ($(window).scrollTop() >= el.data('scrollPos')) {
                    el.addClass('ani-processed');
                    el.animate({
                        left : 0
                    }, 500);
                }
            }
        });
    })($('.content-11 > .container'));

    $(window).resize().scroll();

});

$(window).load(function() {
    $('html').addClass('loaded');
    $(window).resize().scroll();
});
})(jQuery);

score 0 · Accepted Answer · answered Jan 20 '14 at 22:25

I figured it out. What's needed is to add a 'poster' into this section of the Javascript.

(function($) {
$(function() {
  var videobackground = new $.backgroundVideo($('#bgVideo'), {
    "align" : "centerXY",
    "path" : "assets/img/",
    "width": 1280,
    "height": 720,
    "filename" : "guate",
    "types" : ["mp4", "ogg", "webm"],
    "poster" : "imagehere.jpg"
});

Display an image while a background video loads

1 Answers1