Videojs : How can I disable play/pause on click?

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);
  }