Videojs : How can I disable play/pause on click? - video.js

Question

I am using the videojs framework.
I want to implement click action.
When I click the player, I want to get information about mouse position (x,y) and current time in video.
However, I don't want to play/pause video.
and I want to show control bar.
How can I do?
Here is body part (below)
<video
id="myvideo"
class="video-js"
controls
preload="auto"
data-setup='{}'>
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></source>
<source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"></source>
<source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
<script type="text/javascript">
videoElement = document.getElementById("myvideo");
videoElement.addEventListener("mousedown", mouseHandler, false);
function getElementCSSSize(el) {
var cs = getComputedStyle(el);
var w = parseInt(cs.getPropertyValue("width"), 10);
var h = parseInt(cs.getPropertyValue("height"), 10);
return {width: w, height: h}
}
function mouseHandler(event) {
var size = getElementCSSSize(this);
var scaleX = this.videoWidth / size.width;
var scaleY = this.videoHeight / size.height;
var rect = this.getBoundingClientRect(); // absolute position of element
var x = ((event.clientX - rect.left) * scaleX + 0.5)|0; // round to integer
var y = ((event.clientY - rect.top ) * scaleY + 0.5)|0;
console.log("x : " + x);
console.log("y : " + y);
console.log("Video Current Time :" + videoElement.currentTime);
}
</script>
I tried this code in css file.
.vjs-tech {
pointer-events: none;
}
If I write this statement, video player don't play or stop when I click the video. But, my mouseHandler action is also didn't work.
My videojs version is 6.2.0

Answer 1

I solved this problem. In my click event, I implemented play toggle action again.
function mouseHandler(event) {
if(video.paused()){
video.play();
}
else{
video.pause();
}
var size = getElementCSSSize(this);
var scaleX = this.videoWidth / size.width;
var scaleY = this.videoHeight / size.height;
var rect = this.getBoundingClientRect(); // absolute position of element
var x = ((event.clientX - rect.left) * scaleX + 0.5)|0; // round to integer
var y = ((event.clientY - rect.top ) * scaleY + 0.5)|0;
console.log("x : " + x);
console.log("y : " + y);
console.log("Video Current Time :" + videoElement.currentTime);
}

Answer 2

I solved this problem　by css and changing option setting.
css:
.video-js.vjs-has-started .vjs-tech {
pointer-events: none;
}
JS:
var options = {controlBar: {
children: [
"durationDisplay",
"timeDivider",
"currentTimeDisplay",
"fullscreenToggle"
]
}};
var player = videojs('my-player', options);
enter link description here