Q. How can I disable play/pause on click?

[jeongHwarr]

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

[gkatsev]

Unfortunately, the only way to disable it currently is by disabling the controls.

[iJinxin]

step1:
<video data-setup='{"controls": false, "techOrder": ["html5", "flash", "other supported tech"]}'>
step2:
.video-js .vjs-tech{ pointer-events: none; }
It works for me, have a nice day!

[vicvinc]

I have a stupid idea. write an overlay before the video tag. then prevent click the controls bar.

[antimonyGu]

I have the same demand, please reopen this issue.