mediaelement.js play/pause on click controls don't work - html

Question

I need to play and pause the video player if any part of the video is clicked, so I implemented something like:
$("#promoPlayer").click(function() {
$("#promoPlayer").click(function() {
if(this.paused){
this.play();
} else {
this.pause();
}
});
...but now the controls of the video won't pause/play.
You can see it in action here(http://175.107.134.113:8080/). The video is the second slide on the main carousel at the top.
I suspect I'm now getting 2 onclick events one from my code above and a second on the actual pause/play button.
I don't understand how the actual video controls work, because when I inspect the element, I just see a tag. If I could differentiate the controls, then perhaps I might have figured out a solution by now.
Anyone know how I should have done this, or is my solution ok. If my solutions ok, how do I intercept a click on the control, so that I only have one click event to pause / play?
If you look on the media element home page, they have a big play button, complete with mouseOver, but I can't see how they have done that? Can someone else help?

Answer 1

The controls of the browser's native player are not individual DOM elements so I don't believe there's a way to identify them.
My suggestion would be to create an invisible div which covers the player but not the controls, and bind your logic to that.

Answer 2

Ok, I was being an idiot. I hadn't initialised the MediaElement player:
$(document).ready(function(){
$("#promoPlayer").mediaelementplayer({
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false
});
});
Which mean't that what I thought was MediaElement, was actually just my browser's native support for the tag...
As expected MediaElement does of course give you such things as being able to click the whole video frame and have the video start for free...

Answer 3

The player should already play/pause on click, but if you want to attach events it's best to do so within the success handler:
$(document).ready(function(){
$("#promoPlayer").mediaelementplayer({
success: function(media, domElement, player) {
$('#somebutton').on('click', function() {
media.play();
});
}
});
});