Click handler on 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:

<video width="100%" height="100%" controls>
  <source src="http://media.sublimevideo.net/v/midnight-sun-short-edit-360p.mp4" type="video/mp4">
</video>

I wanted to make it so a click on the video stops or starts the video. So I added this:

onclick="this.paused?this.play():this.pause();"

And all good. Until Firefox 35 adds this very function to the player. So now you can only play the video by right clicking and selecting play - an ordinary click would first make the video play via the native behaviour, and then immediately pause it via my click handler. Terrible. So I thought up a JavaScript function something like this:

function startstop() {
  if ( FirefoxVersionNumber > 34 ) {
    // do nothing
  } else {
    // start or stop video
  }
}

The bit I'm stuck on is how to check the browser version? All the ones I tried returned that Firefox version number was 5... which I think comes from the Netscape part.

Answer 1

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.

Answer 2

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.