HTML, Javascript, Loading page with page + video

Question

I created a loading page for my website but I need some help.

The loading page is visible until the full HTML page is loaded and then it fades out. My problem is, I have a video as a background and I would like to make the loading page visible until my video in the background is loaded.

Is that possible? if you can help me, give advice or other, will be grateful.

Frage

JS Script for fadeout

$(window).on('load', function(){
    $('.loading').fadeOut(500);
});

With .loading my css of my div with the loading page content. Video is after, in the HTML body.

Answer 1

Just an idea based on How to call a function after a div is ready?

jQuery(document).ready(checkContainer);

function checkContainer () {
  if($('#IDoftheVideo').is(':visible'))){ //if the container of the video is visible on the page
    $('.loading').fadeOut(500);
  } else {
    setTimeout(checkContainer, 50); //wait 50 ms, then try again
  }
}

If you want to know if the video is fully loaded, assuming its HTML5, you can get some ideas here:

http://atomicrobotdesign.com/blog/web-development/check-when-an-html5-video-has-loaded/

I guess it would look something like:

window.addEventListener('load', function() {
            var video = document.querySelector('#video');
            var loading = document.querySelector('.loading');

            function checkLoad() {
            if (video.readyState === 4) {
                preloader.parentNode.removeChild(loading);
            } else {
                setTimeout(checkLoad, 50);
            }
        }

        checkLoad();
    }, false);

Answer 2

Thanks Rantanen, I tried your function with a little change for my page.

window.addEventListener('load', function() {
        var video = document.querySelector('#login_background_video');
        var loading = document.querySelector('.loading');

        function checkLoad() {
        if (video.readyState === 4) {
            loading.parentNode.removeChild(loading);
        } else {
            setTimeout(checkLoad, 50);
        }
    }

    checkLoad();
}, false);

I guess it is working well, now I can see my video running after my loading page fadeout. I don't have the time at the moment to learn a lot jQuery, js, ... not yet but soon ! Thanks again. Feel free to improve of someone know well how to code JS and HTML.

Answer 3

If you want to continue using jQuery and your video uses the video tag you can do

$("#myVid").on("loadeddata", function () {
    $('.loading').fadeOut(500);
});

There are many other video events that could be fired as well