Tell whether video is loaded or not in Javascript

Question

So, I've been using a listener on

document.getElementById("video").buffered.length 

to see if it's greater than 0 for when a video's loaded or not. This works for a very small video, and only in Google Chrome. It doesn't work in Firefox at all. Any ideas for how to get this to work?

I essentially want to wait till 3 seperate videos are loaded to take a specific action, how do I go about this?

Answer 1

Try this:

var video = document.getElementById("video-id-name");  if ( video.readyState === 4 ) {     // it's loaded } 

Read here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState

Answer 2

UPDATE:

As others have mentioned, my original solution below does work but it can lead to performance issues and some unpredictability in its behaviour.

Therefore I recommend listening to the loadeddata event. Read more here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event

const videoElement = document.getElementById("my_video");  videoElement.addEventListener('loadeddata', (e) => {    //Video should now be loaded but we can add a second check     if(videoElement.readyState >= 3){        //your code goes here    }  }); 

==================================

INFERIOR SOLUTION:

I find using setInterval works for actively listening to when the readyState of the video changes by checking every half-second until it loads in.

checkforVideo();  function checkforVideo() {     //Every 500ms, check if the video element has loaded     var b = setInterval(()=>{         if(VideoElement.readyState >= 3){             //This block of code is triggered when the video is loaded              //your code goes here              //stop checking every half second             clearInterval(b);          }                        },500); } 

If you're not using ES6 just replace () => with function()