Artikel-Hilfsmenü
Montag, 3. April 2023 – aktualisiert am Sonntag, 12. November 2023
Webdesign · JavaScript · Usability · Video
Video automatisch pausieren wenn es aus dem Viewport gescrollt wird
© Tourist-Info Bernau am Chiemsee 2022
Moderne Browser verhindern Video- und Audio-Autoplay, das "automatische Losdudeln von Musik" beim Aufruf einer Webseite. Zu Recht, wie ich meine.
Nun habe ich einen interessanten Artikel gefunden, wie man mittels JavaScript Autoplay von Videos doch aktivieren kann. Die Technik basiert auf dem Intersection Observer API
Nein, ich halte Autoplay von Videos weiterhin für ein "no go", und werde es nicht einsetzen. Aber obige Technik eröffnet eine interessante Möglichkeit: Ein Video automatisch pausieren, wenn es aus dem Viewport gescrollt wird. Der Nutzen: Auch der Ton des Video wird pausiert, und der User kann, sobald er wieder zum Video zurückscrollt, die Betrachtung an der gleichen Stelle fortsetzen.
Hier der JavaScript-Code:
<script>
const video = document.querySelector("video");
let playState = null;
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
video.pause();
playState = false;
}
});
}, {});
observer.observe(video);
const onVisibilityChange = () => {
if (document.hidden || !playState) {
video.pause();
} else {
video.play();
}
};
document.addEventListener("visibilitychange", onVisibilityChange);
</script>
Nachtrag 13.04.2023
Die Twitter Website verwendet anscheinend die gleiche Technik. So falsch kann ich dann nicht liegen ;-)
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.