在背景视频加载时显示图像

Question

我一直在使用维克多·库伦的jquery.background视频(在这里找到：https://github.com/Victa/HTML5-Background-Video)来创建这个网站: web.alejorivera.com。

背景中的视频大约需要3到4秒来加载，我希望用户在视频播放之前看到一张图片，您现在看到的是一个大的蓝色框。

对于如何实现这一点，有什么想法吗？

非常感谢:)

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

Answer 1

我想通了。所需要的是在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"
});