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

The most likely reason you're seeing this probably has to do with timing issues. You stated in your accepted answer that putting jQuery into the head rather than the footer solves the problem. This tells me that the issue is DOM parsing and script execution order. The most likely culprit is that the "canplay" and "canplaythrough" events were being fired before jquery and your page script were parsed and the event handlers added - but only sometimes, depending on network traffic and load times. By putting the script in the head, you forced your event binding to occur before the DOM elements were created, thereby ensuring that you didn't miss any events.

As an aside, the performance benefits of putting script elements at the bottom of the page are debatable. If you really want to tweak page performance, use something like LABjs to manage parallel script loading.