Weird bug on Videojs

Question

I don't know how this happens and I can't see any errors. I can't seem to navigate through the video the second time I open my page.

See screenshot here:

I have found this error it says,

TypeError: Floating-point value is not finite.
"Video is not ready. (Video.js)"

Help would be really appreciated.

Thanks

Answer 1

When you say "I can't seem to navigate through the video the second time I open my page"? Do you mean you aren't able to play the video at all or that you aren't able to fast-forward and rewind within the playing video?

That you are getting a Type Error: Floating-point value is not finite error means that a certain parameter you're supplying to video.js is of the wrong type. I.e. you probaby supply video.js with a string when it wants an integer (or something similar).

Because it works the first time you load the page, are you trying to resume playback where you left off when you navigated away from the page?

If that's the case you are probably storing the currentTime parameter in a cookie or localStorage value as a string (using jQuery cookies for example these usually get automaticalyl stringified) and forgetting to switch it back to an int when you need video.js to read it back to you. Because what I notice about your screenshot is it seems video.js doesn't know the duration of your video (i.e. the seek time says 0:31 / 0:00)

Here's what you should do:

Clear you cache to get a working first time player load then:

Before starting play back, after playback has finished, and during playback you should log the current playback time signature, i.e.: console.log( videojs("id-of-your-video").currentTime() )

Adding time signature console.logs() to these video.js event callbacks should help you:

• durationchange (fired if the total duration of your video changes)
• duration (tells you the duration of your video. Try logging this while it works and again after it stops working and see what's changed in the value)
• If you're still having trouble try logging values using the video js timeupdate callback. This event is called when the current playback position has changed (can be several times a second). If all else fails this callback might give you some insight into the exact moment you're getting the invalid type value, but it won't help you if you're problems are with trying to resume playback from a .currentTime() value reading from an incorrect type stored in user cookie / sessionStorage / localStorage etc.