The canplay/canplaythrough events for an HTML5 video are not called on Firefox. Why?

Question

I\'m building a jQuery plugin for managing HTML5 videos. I\'m trying to capture the canplay and canplaythrough events. In Chrome, the event is fired without problem. In Fire

Answer 1

I do also think this is a race condition. The way I got around it is as follows:

In the HTML of the video element add the attribute preload="metadata" - to just preload the video metadata. So:

<video id="myVideo" width="640" height="480" preload="metadata" />

Next, inside the JS:

var $vid = $("#myVideo");
$vid.bind("canplaythrough", console.log("can play through full video"));
$vid.get(0).load();

This logged the message for me in Chrome - haven't tested elsewhere.

Answer 2

In my case, this was determined by the preload attribute specified for the element. I did not have it specified at all, so different browsers were choosing to do different things.

Once I specified preload="auto", the on("canplay") event handler worked fine/as expected.