HTML5 video events triggering on controls

HTML5 video events triggering on controls

Firstly, this is not an Opera specific bug or irregularity - this seems to happen in all HTML5 video-supporting browsers. It doesn't contravene spec as far as I can tell - in fact it seems pretty much in line with spec so maybe it was an oversight on the WHATWG's part.

The following markup:

<video src="somevideofile" controls="controls" onclick="this.play()"/>

effectively disables the pause button in the controls, and makes the rest of the controls (slider, volume) unstable. Obviously that's a simplistic example - in reality you'd have a toggle rather than just play, but it demonstrates the issue.

According to the <a href="http://www.w3.org/TR/html5/embedded-content-0.html#interactive-content">spec</a>, controls behave similarly to other element-based interactive content like the input tag (though I can't seem to access controls as DOM nodes) - so it makes sense that click events should trigger on them IF they're inside the video element (perhaps having them outside it would be a solution)

Anyway, this seems to make event handling on the video element somewhat annoying. Is there any way around this? Any suggestions? Am I missing something obvious? Obviously I could make some kind of invisible overlay element precisely the height of the video minus the controls, but this is beyond hassle for a simple click event.

For reference, I want the video to behave exactly like Youtube flash videos - a click on the video content toggles play, but the controls are not within the zone affected by that click.