HTML5 video related event problem when the core is not included in the document head

[[email protected]…]

I found a bug that prevent many HTML5 video related event to be fired when jQuery core is not included in the html head. This happens on Firefox (Win 7).

Example of events that are not triggered: loadstart, canplay

If I move the core inclusion in the head, all events are working properly. This is an important bug because many developers will include javascript at the end of the body to make the html page, css and images load faster.

[[email protected]…]

I forgot to specify that I tried with different versions of the core... 1.7.2, 1.6.1, 1.4.3 and the bug is the same.

[Rick Waldron]

This is not a jQuery bug. ​http://jsfiddle.net/rwaldron/PxBwk/

[[email protected]…]

As I said in my ticket, it depends on WHERE the jQuery core is included. I'm not sure how jQuery is loaded in jsFiddle so I used your jsFiddle code to create a few examples: (Don't forget that this bug happens only in Firefox.)

Not working example (with jQuery in the body): ​http://test.lesaffranchis.ca/video/jquery_test.html

Working example (with jQuery in the head): ​http://test.lesaffranchis.ca/video/jquery_test2.html

On the first try, usually all events will be fired in the "body" example. But if you reload that page a few times, you'll see that the events are not all called. (Even if you empty the browser cache).

The jQuery core is breaking the event capture even if I don't use it. In the following examples, I used addEventListener() instead of jQuery's on():

Not working example (with jQuery in the body): ​http://test.lesaffranchis.ca/video/jquery_addeventlistener_body.html

Working example (with jQuery in the head): ​http://test.lesaffranchis.ca/video/jquery_addeventlistener_head.html

Please, try it in a real environment. As great as jsFiddle is for quick tests, it's not the same as a standalone page.

[Rick Waldron]

I'm not sure how jQuery is loaded in jsFiddle

View source.

Please, try it in a real environment. As great as jsFiddle is for quick tests, it's not the same as a standalone page.

Oh, like this?

​http://jsfiddle.net/rwaldron/PxBwk/show/light/

^{That's pretty damn real.}

Also, ​http://test.lesaffranchis.ca/video/jquery_test.html is 404'ing

As you can see here...

[[email protected]…]

I apologize for the bad links. It should have been: ​http://test.lesaffranchis.ca/video/jquery_body.html ​http://test.lesaffranchis.ca/video/jquery_head.html

Even with your standalone example on jsFiddle I still get the problem.

If you look at my original message, I said I was on Firefox on Win7. I see on your screenshot that you are on Mac OS X. I don't have a Mac to test right now, but maybe the bug is with the Windows version of FF only?

Anyway, I noticed something while testing more: I have the habit of doing Ctrl+F5 to force the reload of external files. Using the version with the jQuery core in the body, when I do Ctrl+F5 I do not get all the events but when I do a regular F5, the events are (most of the time) fired. But on the version with the jQuery core in the head, it's working every single time I do Ctrl+F5, or just F5...

This is still a weird behavior... But I'll admit that I'm no longer sure if it has anything to do with the jQuery core... I'm starting to think that it's something buggy/weird with Firefox's page reload procedure...

[jaubourg]

Hi gabriel,

I'm on a Windows 7 box and I'm unable to reproduce the problem on your jquery_body.html example using Firefox 11.0 and 12.0. Have you tried disabling all your add-ons?

[dmethvin]

I cannot reproduce the problem on Win7 and Firefox 12. However I can certainly see it happening. In the body case you are attaching to the loadstart event AFTER the video tag; perhaps the event already fired and you missed it.