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 problem is that your video element has triggered the canplaythrough event before you registered the event handler.

As you pointed out in your own answer, you can put your scripts in the , but this is bad for your page performance.

A better way to fix your problem is to check the readystate attribute and execute your function manually in that case:

var $video = $('video'),
    videoElement = $video[0];

$video.on('canplaythrough', callback);

// If the video is in the cache of the browser,
// the 'canplaythrough' event might have been triggered
// before we registered the event handler.
if (videoElement.readyState > 3) {
  callback();
}