HTML5 Video: oncanplay / oncanplaythrough Problem (Firefox)

Genius, Billionaire, Playboy, Philanthropist

If you ever tried to build an HTML5 video player from scratch, you might encounter the following problem:

The «oncanplay» event doesn’t fire (the video readystate remains 2 instead of 4 («HAVE_ENOUGH_DATA»). In my case, Firefox 43.0.4 just woudn’t work.

After hours and hours of frustration I’ve found the rather simple cause of this behavior:
The video’s readystate 4 had been reached even before the eventlisteners where added to the video-object (probably because the video was already cached in the browser in some way or another). When the listeners finally where added, it was too late because the readystate had already jumped back to 2.

The solution is even more simpler: Set the video’s «autoplay» property to «false»:
The readystate will stay where you want it to be (4) and not jump back to 2… Everybody’s happy:)

(The picture above doesn’t show the «source« tag because I added it later by javascript. And there’s an end tag missing, of course).