Video soll nur abspielen, wenn DIV eingeblendet ist
 

Liebe XHTML-Gemeinde

Ich bin an einem kleinen Studium-Projekt dran.
https://www.james-3.com/index.php?article_id=10

Diese Seite besteht aus vier Divs, die jeweils so gross sind wie das Browserfenster. Zwei Divs davon haben ein Video, das ebenfalls auf die gesamte Browserfenster-Grösse dargestellt wird.
Ein anderes Div hat im Moment noch ein Bild drin von einer Fake-Bankseite. Später sollen da dann die Beträge mit einem Counter (z.B. https://codepen.io/jakubtursky/pen/vEwZop ) auf 0 zurück.

Ist es nun möglich, dass das aktuell sichtbare Video stoppt, sobald zum nächsten Div gescrollt wird? Wenn dann da auch ein Video ist, soll dieses Video abgespielt werden. Wenn da der Counter ist, soll er starten.
Sobald zum nächsten Div gescrollt wird, soll das Video an der zuletzt gestoppten Stelle weitermachen (oder der Counter soll weiterzählen).

Ich kenne mich mit Javascript nicht aus, lerne aber gerne dazu. Daher wäre ich froh, wenn ich wenigstens einen Hinweis bekommen könnte, wonach ich suchen soll.

Danke :)

Schreckliche Seite, ein perfektes Negativbeispiel dafür, dass man das Scrollen des Users nicht beeinflussen soll. Das springt unkontrolliert herum und ich würde auf der Seite keine 5 Sekunden bleiben wollen.
Aber genug OT: Dein Problem lässt sich hervorragend mit intersectionObserver lösen, damit kannst du feststellen, wenn ein Element den Browserbereich verlässt, betritt, oder zu x% sichtbar ist.
https://developer.mozilla.org/en-US/...n_Observer_API

Sobald dein div also zu 100% sichtbar ist dann spielst du das Video drinnen ab, ist es nicht mehr sichtbar stoppst du es einfach. (mit video.play() und video.pause() )

Vielen Dank für den Tipp mit intersectionObserver.

Zur Seite: wie gesagt ist es ein Studienprojekt. Der User soll da nicht navigieren oder scrollen können. Es wird an einer Ausstellung gezeigt und da wird ein Monitor aufgestellt der das dann zeigt ;)