Firefox is not reaching the HAVE_ENOUGH_DATA (4) HTMLMediaElement.readyState [closed]

On the index page of a web service website, I have included a small video that shows some functionalities. But since many users navigate to the login page via the index page I don’t want to use a preload="auto" on the start page. This would mean that the data volume of many users would be unnecessarily consumed. My solution was to set preload to none and start loading the video via JavaScript when the video enters the viewport.

function someScrollDependentFunction() {     videoElement.load(); }  

To make sure that the user can watch the video without interruptions I added a check to the play button which verifies the readyState of the video. Only when 4 is returned, the video is supposed to start.

$  ('#playButton').on('click', function(){     if (videoElement.readyState === 4) {         videoElement.play();     } });  // Note that I have some code that checks the readyState regularly (every 500 ms)  

Under Chrome and Safari this works without problems. But not with Firefox. The problem is that Firefox only loads 400 bytes with videoElement.load() and thus never returns the readyState `4. All options to get Firefox to use a larger buffer volume are based on the browser settings of the individual user, so far I have not found a way for me as a web developer to tell Firefox to load this video completely.

The preload="auto" attribute seems to do exactly that, but for the reasons I mentioned above, I really want to avoid using it. Which solution do you see here? Is my only possibility to load the video at a certain scroll position into the page via Ajax, so that it can be equipped with the preload="auto" attribute?