Videojs：クリック時に再生/一時停止を無効にするにはどうすればよいですか？

Question

私はvideojsフレームワークを使用しています。

クリックアクションを実装します。

プレーヤーをクリックすると、マウスの位置（x、y）と現在の時間に関する情報をビデオで取得します。

ただし、I don't want to play/pause videoです。

と私はコントロールバーを表示したい。

どうすればいいですか？ここ

私はCSSファイルでこのコードを試みた（以下）は、本体部

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

あります。

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