Videojs：如何禁用點擊播放/暫停？

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