Click handler on <video> conflicts with Firefox's native behaviour

Question

I\'ve added a video to my site using the default HTML5 video player. The code is like this:

Answer 1

There may very likely be better ways to handle this, but here's one that I've come up with: I looked through the release notes for Firefox 35, and it looks like one of the changes made in 35 was fixing a bug where a method called .hasAttributes() that, according to spec, is supposed to be located on Element was previously located on Node. So, although it looks odd, you could do something like:

if(typeof InstallTrigger !== 'undefined' && 
   typeof Element.prototype.hasAttributes !== 'undefined') {
    // is Firefox >= 35
} 

This is based on the fact that typeof InstallTrigger !== 'undefined' would identify Firefox as per this answer and we know .hasAttributes moved to Element beginning in version 35. This would be preferable to user agent parsing because unlike the User Agent string it is unlikely to be spoofed in any way.

It's been mentioned in the comments that it seems odd to do a form of browser detection by checking for the presence of an unrelated JavaScript object - but this is a practice that's established and has been used historically to detect versions of a specific browser greater than a certain version: Here's an article that describes commonly used variables that can be used to detect Internet Explorer versions >= a given number.

Answer 2

You need to prevent the default behaviour of the click event, in much the same way that you would prevent the default behaviour of a form submit if you were handling it yourself with JavaScript.

Event.preventDefault is the tool for the job.

Just do

video.addEventListener('click', function (event) {
    event.preventDefault(); // Prevent the default behaviour in Firefox

    // Then toggle the video ourselves
    if (this.paused) {
        this.play();
    }
    else {
        this.pause();
    }
});

Here's a Fiddle that works both in Chrome (which has no built-in click-to-toggle behaviour on videos) and in Firefox (which, at least in recent versions, does): http://jsfiddle.net/LjLgkk71/

As an aside, as a general rule you should forget browser sniffing until you've truly and utterly exhausted all other avenues (with the exception of using it to work around specific known quirks and bugs in old browsers, relating to behaviour that has since been fixed or standardised). The idea you expressed in the question, of simply not applying your click handler on certain browser versions, was misguided; you have no way of knowing (and nor do I) what other browsers share or will one day share Firefox's behaviour. If you'd taken your approach, it's almost inevitable that it would come back to bite you either when one of the major browsers followed Firefox's example or when one of your users tried to use your site on a Nintendo DS or something.