How to display fully loaded video, without buffering?

Question

Hi on my websitehttps://reportsquestionsznaczki65.000webhostapp.com/tech/o-nas/ I've tried plenty of things to make the video displaying AFTER it's fully loaded. I wanted to make the loading screen as long as the video is not buffered yet. I've tried:

[1] $("#video1").on("loadeddata",function(){
        $(".loader-wrapper").fadeOut("slow");
    });

[2] $(window).on("load",function(){
        $(".loader-wrapper").fadeOut("slow");
    });

None of them worked since both were loading the page when the frame loaded and then it started to buffer and it became a long time until it played (it's set to autoplay).

I would like to fade the loading effect when the video starts. When the video is cached it works nice. The strangest thing is on Edge since the video isn't displayed after loading, then it's displaying itself after 3 seconds (I delete my history and press ctrl + F5 to delete cache).

Is there any possibility to make it happen. Maybe the size of the video is too large (7.93MB) to begin with?

Answer 1

You need a way to tell whether the video has loaded or not, and if it has, then you can display it. Try this:

var video = document.getElementById("video-id-name");

if ( video.readyState === 4 ) {
    // loaded
}