オーバーレイ要素をクリックするとビデオが一時停止する

Question

私はビデオを制作しています。ここで、オーバーレイ要素が製品を宣伝するように見えます。

誰かがオーバーレイ要素をクリックしたときにビデオを一時停止することができ、同時に製品の詳細を示すウィンドウが表示されるかどうかを知りたいと思います。だから、：

2.1：

1. ビデオの再生とオーバーレイ要素を表示する

2. ユーザーはそうオーバーレイ要素がクリックオーバーレイ要素の上にウィンドウを開きます：ビデオは

   2.2を背景に一時停止しますビデオを一時停止して製品の詳細を表示します。

これは、ビデオは、映像中に数秒間オーバーレイ要素を示して私のコードです：あなたはproably追加する必要があり

overlay.addEventListener('click', function() { video.pause() })

：いくつかのサンプルコード

<video id="myVideo" controls> 
    <source id='mp4' src="video.mp4" type='video/mp4'> 
</video> 

<div id="overlay"> 
    Something 
</div> 


<script> 

//Shows link between seconds 5 and 10 
var overlay = document.getElementById('overlay'); 
var video = document.getElementById('myVideo'); 

    video.addEventListener('timeupdate', function() { 
    console.log(video.currentTime); 
    var show = video.currentTime >= 5 && video.currentTime < 10; 
    overlay.style.opacity = show ? '1' : '0'; 

    }, false); 
</script> 

Answer 1

オーバーレイが再びクリックされたときにビデオを再生するものでは - しかし、私はあなたが考えを得ると思います。

は、ビデオ要素に利用可能であるかについてのドキュメントはこちらをご覧： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Answer 2

ビデオは、あなたのオーバーレイにclickイベントリスナーを添付することができvideo.pause()
https://www.w3schools.com/tags/ref_av_dom.asp

を使用して一時停止することができ、
をクリックし、ユーザーがオーバーレイをクリックしたときに動画の一時停止機能を呼び出します。

オーバーレイで不透明度を使用する代わりに、
代わりにdisplay: noneを使用してみてください。
オーバレイ
が常に要素の前でブロックされている状況を処理する必要はありません。

参照のデモ：https://jsfiddle.net/amoshydra/pan306jt/

//Shows link between seconds 5 and 10 
var overlay = document.getElementById('overlay'); 
var video = document.getElementById('myVideo'); 

video.addEventListener('timeupdate', function() { 
    console.log(video.currentTime); 
    var show = video.currentTime >= 5 && video.currentTime < 10; 

    // Try using display style? 
    overlay.style.display = show ? 'block' : 'none'; 
}, false); 

overlay.addEventListener('click', function() { 
    var urlToOpen = 'http://stackoverflow.com/questions/14132122/open-url-in-new-window-with-javascript'; 
    window.open(urlToOpen, '_blank'); 

    // Pause video using the video API 
    video.pause(); 
});