javascript -webkit-scrollbar check in welchem div man ist?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, JavaScript
17.12.2022, 17:56

Hole dir erst alle verfügbaren Videoelemente.

const videos = document.querySelectorAll("video");

Dann kannst du jedem Video einen Observer anhängen, welcher prüft, ob es sich innerhalb des aktuellen Viewports befindet.

const videoObserver = new IntersectionObserver(entries => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      // entry.target = current visible video ...
    }
  }
}, { threshold: [1] });

for (const video of videos) {
  videoObserver.observe(video);
}

In diesem Fall wäre die Bedingung, dass sich das jeweilige Video komplett im Viewport befindet. Wie du es für dich anders einstellen kannst, wird in der Dokumentation von MDN erklärt.

Zuletzt noch zwei Anmerkungen auf dein bestehendes Markup:

  1. Jedes Element in einem Dokument darf nur eine eindeutige ID haben. IDs dürfen kein Leerzeichen enthalten.
  2. Für deine Schaltflächen zur Videosteuerung solltest du mit Buttons arbeiten. Ein i-Element kennzeichnet keine Schaltfläche aus.
Samuele987 
Fragesteller
 17.12.2022, 19:24

Ich habe videoObserver jetzt reingemacht und angepasst, jedoch funktioniert nicht es nicht wie ich es mir vorgestellt habe.

const videos = document.querySelectorAll("video");


function play_vid()
{
  const videoObserver = new IntersectionObserver(entries => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        entry.target.play();
      }
    }
  }, { threshold: [1] });
  
  for (const video of videos) {
    videoObserver.observe(video);
  }
}

Wenn ich jetzt auf dem i Play Button drücke, passiert nichts.

0
regex9  17.12.2022, 19:34
@Samuele987

Solange du die Funktion nicht aufrufst, wird definitiv nie etwas passieren. 😉

1
Samuele987 
Fragesteller
 17.12.2022, 19:36
@regex9

Sie wird in i aufgerufen. "onclick='play_vid()'"

0
regex9  17.12.2022, 19:51
@Samuele987

Du hast nicht wirklich überlegt oder weiter nachgelesen, was da passiert, oder? 🤨 Der Observer ist dazu da, beim Scrollen zu ermitteln, welches Video in den Sichtbereich kommt. Nur wenn das Ereignis eintritt, wird er ausgelöst.

Wenn du diesen Part jedoch bei jedem Klick ausführst, würdest du jedesmal einen Observer anlegen und den an deine x-Videos auf der Seite anhängen.

Für ein Play-on-button-click solltest du eher das Video anhand des Kontexts ermitteln. Stelle dafür sicher, dass Video und Button in einem Container liegen.

<div>
  <div><!-- video --></div>
  <div><!-- button --></div>
</div>

JavaScript-Funktion:

function playVideo(element) {
  const video = element.parentElement.parentElement.querySelector("video");
  video.play();
}

Aufruf in onclick:

playVideo(this)

Mit this beziehst du dich auf den Button. Über den kommst du an das Container-Element und kannst das Video innerhalb diesem suchen.

0
Samuele987 
Fragesteller
 17.12.2022, 21:36
@regex9

Danke.
Funktioniert jetzt und habe endlich verstanden wie genau videoObserver funktioniert.
Kennst du dich mit scroll-snap aus?
Irgendwie startet der bei einem random Video (manchmal der erste, manchmal der 3., etc..), anstatt beim ersten Video zu starten.

0
regex9  17.12.2022, 22:05
@Samuele987

Der Scroll-snap beschreibt nur, wie sich die Scrollleiste beim Scrollen verhalten soll, sobald sie auf bestimmte Elemente trifft (Beispiel: Automatisches Einrasten, wenn eine Box während des Scrollens in den Sichtbereich kommt). Welches Video gerendert wird, bestimmst du in deinem PHP-Code. Dort sortierst du die Liste an Video-URLs explizit zufällig.

0
Samuele987 
Fragesteller
 17.12.2022, 22:28
@regex9

Das habe ich später dann auch nochmal bemerkt.
Jedoch startet er komplett zufällig bei irgendeinem Reel, auch wenn die Reels in die richtige Reihenfolge geordnet sind

0
Samuele987 
Fragesteller
 17.12.2022, 23:26
@Samuele987

Hat sich gelöst. Keine ahnung wie, es war einfach aufeinmal weg

0