Video beim Klicken auf ein Overlay-Element anhalten

Question

Ich arbeite an einem Video, bei dem während einiger Sekunden ein Overlay-Element erscheint, um ein Produkt zu bewerben.

Ich würde gerne wissen, ob es möglich ist, das Video anzuhalten, wenn jemand auf das Overlay-Element klickt und gleichzeitig ein Fenster mit den Produktdetails angezeigt wird. Also:

1. Video spielt und zeigt ein Overlay-Element

2. Der Benutzer klickt auf das Overlay Element so:

   2.1: Video pausiert auf dem Hintergrund

   2.2: Overlay-Element ein Fenster über das öffnet Video angehalten, um die Produktdetails anzuzeigen.

Dies ist mein Code, wo das Video für ein paar Sekunden während des Videos das Overlay-Element zeigt:

<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

einiger Beispielcode:

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

Sie sollten proably hinzufügen in etwas, das das Video wiedergeben würde, sobald das Overlay erneut angeklickt wird - aber ich denke, Sie bekommen die Idee.

Werfen Sie einen Blick hier für die Dokumentation auf dem, was auf dem Videoelement verfügbar: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Answer 2

Video video.pause()
mit pausiert werden kann https://www.w3schools.com/tags/ref_av_dom.asp

Sie können einen Klick-Ereignis-Listener zu Ihrer Overlay befestigen,
und rufen Sie die Video-Pause-Funktion auf, wenn der Benutzer auf das Overlay klickt.

Anstatt Opazität auf Ihrem Overlay zu verwenden, können Sie
vielleicht versuchen, stattdessen display: none zu verwenden.
Damit müssen Sie nicht die Situation behandeln, in der das Overlay
immer vor Ihren Elementen blockiert.

Siehe Demo: 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(); 
});