Skip to main content

Bug Tracker

Side navigation

#11637 closed bug (invalid)

Opened April 24, 2012 08:00PM UTC

Closed April 24, 2012 08:34PM UTC

Last modified April 28, 2012 03:06PM UTC

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

Reported by: legault.gabriel@gmail.com Owned by:
Priority: low Milestone: None
Component: core Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (7)

Changed April 24, 2012 08:14PM UTC by legault.gabriel@gmail.com comment:1

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.

Changed April 24, 2012 08:34PM UTC by rwaldron comment:2

component: unfiledcore
priority: undecidedlow
resolution: → invalid
status: newclosed

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

Changed April 24, 2012 09:09PM UTC by legault.gabriel@gmail.com comment:3

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.

Changed April 24, 2012 09:23PM UTC by rwaldron comment:4

_comment0: > 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... \ \ [[Image(http://gyazo.com/ad6c02c3f77e40a5881e61c93bccf9c8.png)]]1335302670885188
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.

As you can see here...

[[Image(http://gyazo.com/ad6c02c3f77e40a5881e61c93bccf9c8.png)]]

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

Changed April 24, 2012 11:42PM UTC by legault.gabriel@gmail.com comment:5

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

Changed April 24, 2012 11:57PM UTC by jaubourg comment:6

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?

Changed April 28, 2012 03:06PM UTC by dmethvin comment:7

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.