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

Posted by iKode on Stack Overflow See other posts from Stack Overflow or by iKode
Published on 2012-07-05T11:06:43Z Indexed on 2012/07/10 9:15 UTC
Read the original article Hit count: 279

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?

© Stack Overflow or respective owner

Related posts about html5

Related posts about video