According to the HTML specification, native controls on the media element should not trigger normal mouse events: “If the user agent exposes a user interface to the user by displaying controls over the media element, then the user agent should suppress any user interaction events while the user agent is interacting with this interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at elements on the page.)” http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#attr-media-controls The WebKit nightlies do not follow this behaviour: 1. Open http://www.quirksmode.org/html5/tests/video.html 2. Run the following JavaScript in the console: Array.prototype.forEach.call(document.querySelectorAll('video'), function (i) { i.addEventListener('mousedown', function (evt) { console.log('video', evt.type) }); i.addEventListener('mouseup', function (evt) { console.log('video', evt.type) }); i.addEventListener('click', function (evt) { console.log('video', evt.type) }); i.parentNode.addEventListener('mousedown', function (evt) { console.log('parent', evt.type) }); i.parentNode.addEventListener('mouseup', function (evt) { console.log('parent', evt.type) }); i.parentNode.addEventListener('click', function (evt) { console.log('parent', evt.type) }); }) 3. Click on the play/pause button on a <video> element with native controls Note that the mousedown/mouseup/click events all fire and there is no way to tell whether the event was triggered by a click on the video itself or on a control.