How to detect 'useless' click in HTML5 video tag?

Question

I need to detect only the clicks that don't fire any action. See example below.

http://jsfiddle.net/SdNL5/1/

<video id="video" width="320" height="240" src="http://vjs.zencdn.net/v/oceans.mp4" controls>
     <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

var video = document.getElementById("video");
video.onclick = function(){
    alert("This click is useless");
};

In that case when the user clicks the video he receives an alert message. BUT, problem is, I don't want the alert message to show up when the user clicks play button, pause button or volume control. I want it to show up only when the user clicks the video but not any button. Also I need to open a popup window after that so, I can't use setTimeout or similar in order for the browsers not to block the popup.

I'm aware that I can read coordinates and calculate whether there is a button or not, but I would prefer another solution.

Answer 1

I asked a question which is very similar to this one.( How to prevent event bubbling when clicking on HTML5 video controls in Firefox )

The only way I know to do that consistently in different browsers is to have an overlay over the video and then custom controls over that overlay. There are several reasons why. For example 'useless' clicks will depend on the browser:

• Firefox will toggle play/pause when clicking on the video.
• IE will have a 'useless' click but on double click will go into full-screen.
• Chrome & Safari will have 'useless' clicks

BUT if you don't care about Firefox then this example would work for you but only in Chrome, Safari & IE : http://jsfiddle.net/me2loveit2/cSTGM/40/

<a href="javascript: alert('Nothing');">
   <video ...
   </video>
</a>

Answer 2

in this example im using setTimeout to let .paused , .volume And .muted to Be updated before I compare them with the last status (in the Variables).

var video = document.getElementById("video");

var isPaused = video.paused;
var lastVolume = video.volume;
var isMute = video.muted;

video.onclick = function(){
    setTimeout(function() {
                    // if the user did not change: Play/Pause && Volume && mute
                    if(isPaused == video.paused && lastVolume == video.volume && isMute == video.muted) {
                        alert("This click is useless");
                    } else {
                        // if the user did change, update to current status
                        isPaused = video.paused;
                        lastVolume = video.volume;
                        isMute = video.muted;
                    }
                }, 100);
}

demo: http://jsfiddle.net/SdNL5/22/

note: if the user click on volume control and did not make change, It will be considered as 'useless' click.

Answer 3

i know you already checked an answer, but please consider that you can still hide the default video controls and use your custom controls to play with.

if you don't want/have time to spend on it yourself you can just use some javascript lib like videojs

this way you'll have really full control both over buttons and video separately in a cross-browser way.

• http://www.w3.org/2010/05/video/mediaevents.html
• http://msdn.microsoft.com/en-us/library/ie/hh924822(v=vs.85).aspx