Check external file loading with JS

Asked

Viewed 922 times

3

My home page has a video as background but in some moments the video takes to be loaded. In this situation I thought of creating a loading before the page is displayed, my doubt is how can I check with the jquery/javascript if a file (video) has already been loaded completely to then display the entire page.

Video is a local archive

<video id="video" autoplay loop muted>
    <source src="/public/video/capa_video.mp4" type="video/mp4">
</video>

On my page I am using the plugin fullpage js, then in my file .js I already have the function readyof jquery.

$(document).ready(function() { ... });

How can I display a load effect before the entire document is loaded (images, videos, fonts, etc) ?

javascript jquery

  • You can’t with the event window.onload?

  • @Andersoncarloswoss sometimes the page is loaded but the video has not yet been fully loaded, so it hangs somewhere.

  • 1

    Maybe I can get you help!

  • From what he said, the event onload can be fired before the video is fully loaded (maybe it would be because the video is not downloaded at once and yes streamed?)

  • Put a div covering the content and an animated gif of loading and use window.onload to hide that div when the page is loaded completely. (See Marconi’s link in the comment above that leads up to Jbueno’s answer in another question).

  • Put the code next to the question and specify the environment better. The video displayed is local or Youtube/etc?

  • @Andersoncarloswoss improved the question

Show 2 more comments

3 answers

3

According to some examples I found on the web, just use the event window.onload to hide the div charging is not always enough, because on slower connections, the video may not be ready for execution when such an event is triggered.

The most practical way I found was this website:

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

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

    checkLoad();
}, false);

Where the function is performed checkLoad at the event window.load, however, if the video is not yet ready enough, it will re-check 100 ms later, with the function setTimeout.

Checking the status of the video in case video.readyState === 4, is based on the table below, taken from this website. Free translation: if returned 4, enough data is already available - and the connection speed is high enough - then the video can be run to the end without interruption.

inserir a descrição da imagem aqui

2

The onload only runs after all page content is loaded.

I tested with a video following the Marconi link to the Jbueno answer.

Follow the example:

window.onload=function()
{	 document.getElementById("loading").style.display='none';
}
    #loading{
	color:#fff; 
	background-color:#000; 
	width:100%; 
	height:100%; 
	position:absolute; 
	top:0; 
	left:0;
	z-index:9999;
	}
<div id="loading">Carregando...</div>

Página carregada.
<video width="400" controls>
  <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

  • The question I’m left with is: does HTML5 download the video at once, just like it does with the image, or does it transfer the frames as the video runs, just like Youtube does? In this second case, I believe the event is triggered before the video is fully loaded.

  • I changed the code to a video displayed with Html5. It only hides the div after the video has been loaded.

  • I tested with a lower internet speed and the "loading" does not appear, the screen turns white, and only when the site loads the loading appears quickly and then already change?

  • @Rafaelacioly try putting the tag of loading right after the opening of the tag <body> and with the CSS embedded in tag by attribute style;

1

One way to do this with video, more rustically, is to keep checking its status, and when the status is 4, means he was fully charged:

var video = document.getElementById('video');

var interval = setInterval(function(){ 
   if (video.readyState === 4) {
      clearInterval(interval);
      document.getElementById('status').innerHTML = 'Carregado!';
   }
}, 500);
<video width="320" height="240" controls id="video">
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<p id="status"></p>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.