HTML5 Video: oncanplay / oncanplaythrough Problem (Firefox)

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).

Sonisphere Lucerne 2016 Day 2 – Rammstein

My second attempt at a time-laps video. Rammstein and others at «Allmend Rockt»

Slightly better than the first one, but this time the exposure was off …Still learning. But Rammstein must’ve been delivering a great concert as far as I could tell from where I was standing. (And iMovie managed to suck even more balls than yesterday.)


Disclaimer: I just replaced the first video with a second, hopefully better version, with less picture brightening, the original aspect ratio, different sound and in 4k resolution.