Videojs：如何在点击时禁用 play/pause？

Question

我正在使用 videojs 框架。

我想实现点击动作。

当我点击播放器时，我想获取有关鼠标位置 (x,y) 和视频中当前时间的信息。

然而，I don't want to play/pause video。

我想显示控制栏。

我该怎么办？

这是正文部分（下）

  <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>

我在 css 文件中试过这段代码。

.vjs-tech {
  pointer-events: none;
}

如果我写这个语句，当我点击视频时，视频播放器不会播放或停止。但是，我的 mouseHandler 操作也没有用。

我的videojs版本是6.2.0

Answer 1

我解决了这个问题。在我的点击事件中，我再次实现了播放切换动作。

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

Videojs：如何在点击时禁用 play/pause？

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

video.js