Firefox stuck at readyState === 4

Using JavaScript with Hype
1

Ok, just when I thought I could relax and enjoy my Sunday I found that the site I am creating doesn’t work with Firefox, more accurately, the readyState doesn’t work with Firefox.

You can get the hype file here:
https://www.dropbox.com/s/abdpx1l40kizb94/gasomatic18.zip?dl=1

I tried attaching these lines of code found the mozilla site:

var obj = document.getElementById('example');

obj.addEventListener('loadeddata', function() {

and it looks like this

// readyState ▼      
var obj = document.getElementById(dinamycwrapperPLAYING);
obj.addEventListener('loadeddata', function() {
    FowardStatus(); // ------------- Check Foward video
    function FowardStatus() {
        var b = setInterval(() => {
            if (document.getElementById(dinamycwrapperPLAYING).readyState === 4 && document.getElementById(dinamycwrapperNEXT).readyState === 4) {
                hypeDocument.functions().scrolldownActions(hypeDocument, element, event);
                clearInterval(b);
            }
        }, 100);
    }
}); 
// readyState ▲

But still doesn’t work.

It works in Chrome, Safari and MS Edge, but not in Firefox.

I found someone having a similar problem here:

But I dont know here else to put the videos, if I change the video tags to divs it just doesn’t work.

2

Turned out there were more to fix than the video ready state. I changed the scrolling to the one mentioned here:

And the solution to Firefox not reading the readyState was to change from

if (document.getElementById(dinamycwrapperPLAYING).readyState === 4 && document.getElementById(dinamycwrapperNEXT).readyState === 4) {

to

if (document.getElementById(dinamycwrapperPLAYING).readyState === 4) {

Not sure whats the logic of it failing, but seems that it can only read 1 readyState at the time? but that fixes it.

2 Likes
3

Sounds like you found a solution… but I can say from experience that on media elements a lot of the properties are null until the loading phase has begun. I recall this might lead to DOM exceptions (especially if calling a function), though I would just think a .readyState would return null (regardless the comparison would not be === 4). Were there errors in the console log with your previous solution?

4

No, no error in the logs related that the problem, just something about the CSS zoom, but even if I do disable it, it stills didn’t work until the fixes I applied.

798×246 14.1 KB

Stil, is there is a way to trigger the even only until both videos are ready to play (readyState === 4)

  • dinamycwrapperPLAYING
  • dinamycwrapperNEXT

I would be more than happy to give it a try.

5

Taking a look at the FowardStatus() section of the main_variables() function, the readyState is equal to 2 for the dinamycwrapperNEXT element. So the object is alive and exists, but Firefox thinks it can only play one frame.

My guess would be that it is doing some sort of optimization to not download unnecessary data when a video isn’t yet on screen.

1 Like