mediaelement js click event - onclick

Question

I am pretty new to Javascript and struggeling to get the click event on the mediaelment player. My aim is to block the click that it doesn't get through to the modal box behind the player.
Here the relevant part of the html:
<div class="player_bg" id="mybg" style="display: none" onclick="close_over(this.id)">
<!-- onclick="close_over(this.id)" -->
<div class="video-modal" onclick="close_over(this.parentNode.id)"></div>
<div class="videoplayer">
<video id="myVideo" width="640" height="360" poster="" controls="controls" preload="auto" onclick="close_over(this.id)">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="">
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="">
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="">
<object width="640" height="360" type="application/x-shockwave-flash" data="../_styles/js/flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=">
<img src="" width="320" height="220" title="No video playback capabilities, please download the video" alt="" >
</object>
</video>
</div>
</div>
and here is my javascript:
function close_over(who) {
if (who == "myVideo") {
} else  {
el = document.getElementById("mybg");
el.style.display ="none";
//(el.style.display == "block") ? "none" : "block";
$('video, audio').each(function() {
$(this)[0].player.pause();
});
}
}
(video-modal is just a button defined as background-image, the 'active layer' is 'mybg')
This gives me the click event two times. First I get it and it is blocked by the if clause (as I wanted it to be) and then it gets through to the modal box (mybg)and is handled by the else clause (which I don't want).
As starting point I only had this javascript code:
function close_over(who) {
el = document.getElementById("mybg");
el.style.display ="none";
//(el.style.display == "block") ? "none" : "block";
$('video, audio').each(function() {
$(this)[0].player.pause();
});
}
(yes, the 'who' is obsolete in this example)
Both scripts react fine when I click on the play/pause button in the controls but not if I click in the video to pause it or in the timeline in the controls.
Any ideas?

Answer 1

You can listen the mediaelement player click event while initiating the mediaelement player. and once you get the mediaelement player click event you can stop propagation of the event so it does not propagate to outer elements. Here is the code snippet to do above.
$("#myVideo").mediaelementplayer({
// if the <video width> is not specified, this is the default
defaultVideoWidth: 480,
// if the <video height> is not specified, this is the default
defaultVideoHeight: 270,
// if set, overrides <video width>
videoWidth: -1,
// if set, overrides <video height>
videoHeight: -1,
// width of audio player
audioWidth: 30,
// height of audio player
audioHeight: 400,
// initial volume when the player starts
startVolume: 0.8,
// useful for <audio> player loops
loop: false,
// enables Flash and Silverlight to resize to content size
enableAutosize: false,
// the order of controls you want on the control bar (and other plugins below)
features: ["playpause", "progress", "current", "duration", "tracks", "volume", "fullscreen"],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false,
// force iPad's native controls
iPadUseNativeControls: false,
// force iPhone's native controls
iPhoneUseNativeControls: false,
// force Android's native controls
AndroidUseNativeControls: false,
// forces the hour marker (##:00:00)
alwaysShowHours: false,
// show framecount in timecode (##:00:00:00)
showTimecodeFrameCount: false,
// used when showTimecodeFrameCount is set to true
framesPerSecond: 25,
// turns keyboard support on and off for this instance
enableKeyboard: true,
// when this player starts, it will pause other players
pauseOtherPlayers: true,
// array of keyboard commands
keyActions: [],
//autoPlay the video on load;
autoPlay: false,
//path to get flash player;
pluginPath: 'specify your plugin path here',
//name of the flash;
flashName: "flashmediaelement.swf",
// show mode on browser.
success: function (player, node) {
//Add the custom event here.
player.addEventListener("click", function (e) {
console.log("clicked ", e);
//IE9 & Other Browsers
if (e.stopPropagation) {
e.stopPropagation();
}
//IE8 and Lower
else {
e.cancelBubble = true;
}
});
},
error: function (e) {
//TODO: fires when a problem is detected
}
});