Question

Having a html5 video element with controls, like:

<video class="media video" src="somevid.ogg" controls></video>

And with a click handler assigned to it:

$('.media.video').on('click', function (event) { /* ... */ });

Is it possible to determine inside the handler method if the user simply clicked the video element or one of the controls?

Haven't found documentation on this one, and searched the event object for clues, but no success.

My alternative solutions:

1. Assign all listeners to the video, and based on video change events determine if the click has been made on a control element, or the video - is too much hassle & unclean.
2. Use custom control UI, with the default one disabled - if there is no answer for my question i'd go with this.

Question

Having a html5 video element with controls, like:

<video class="media video" src="somevid.ogg" controls></video>

And with a click handler assigned to it:

$('.media.video').on('click', function (event) { /* ... */ });

Is it possible to determine inside the handler method if the user simply clicked the video element or one of the controls?

Haven't found documentation on this one, and searched the event object for clues, but no success.

My alternative solutions:

1. Assign all listeners to the video, and based on video change events determine if the click has been made on a control element, or the video - is too much hassle & unclean.
2. Use custom control UI, with the default one disabled - if there is no answer for my question i'd go with this.

• javascript
• jquery
• html
• video

• 1 HI @Matyas - could be worth a look - w3/2010/05/video/mediaevents.html which I found from - stackoverflow./questions/17479970/… – Rob Sedgwick Commented Apr 7, 2014 at 18:58
• 1 You could try console.log(event) and see if there is any data in there that indicates a control was clicked. – Brian Glaz Commented Apr 7, 2014 at 19:32

1 Answer 1

Is it possible to determine inside the handler method if the user simply clicked the video element or one of the controls?

No, the controls are considered part of the video element itself as they are provided internally by the browser. Therefor a click on the element will only register with that and not the sub-elements.

You could use your point #1 though to listen to the various mand events which corresponds to clicking a control. IMO the proper way which I would remend.

If you only need to determine if click was on the video or not you could probably get away with doing a simple height check but layout/look of the controls could change "next week" and force a browser version check to get accurate height which is going the wrong direction.

But for example, inside the event handler for click/mousedown or mouseup:

var rect = videoElement.getBoundingClientRect(),  // get abs. position of element
    ctrlHeight = 40,                              // a guess of ctrl area height
    y = event.clientY - rect.top;                 // relative y pos. to video el

if (y >= rect.height - ctrlHeight) {...in ctrl area...}

The other approach, but a tad more work, is to provide your own controls as in your point #2. Either as buttons or in form of image and image map, or even render them to canvas. This gives you full control of placement, looks and so forth.

You will probably end up with the same amount of event handlers as in the first approach as you will need to listen to the events for each button instead...