Optimierung des Vimeo-Hintergrundvideos in Webflow

January 25, 2024

· 11 min

In diesem Beitrag werden wir uns Vimeo-Hintergrundvideos in Webflow ansehen und deren Leistung mithilfe von Object Intersect Code optimieren. Wir erklären, wie Object Intersect-Code verwendet werden kann, um die Wiedergabe des Videos zu steuern und Aktionen auszulösen, wenn das Video auf dem Bildschirm zu sehen ist. Außerdem geben wir Beispiele für die Verwendung von Object Intersect-Code, um die Benutzererfahrung zu verbessern, das Laden von Videos zu steuern und Videos in Modals anzuhalten.

Wir wurden kürzlich beauftragt, eine neue Website für eine Videoproduktionsfirma zu entwerfen und zu bauen, und damit einher ging der großflächige Einsatz von Hintergrundvideos. Am Ende haben wir uns für Vimeo-Hintergrundvideos gegenüber Webflow-Hintergrundvideos oder externen Anbietern entschieden. Externe Anbieter waren draußen, da sie dafür bereits einen Service hatten, aber die Leistung war... meh. Das Webflow-Hintergrundvideo wurde veröffentlicht, weil:

Es ist zu schwer für den Kunden, sich zu ändern.
Muss einfach zu verwalten sein, d. h. CMS und Webflow-Hintergrundvideo und CMS passen nicht zusammen.
Sie hatten dort bereits einen Vimeo Pro-Account mit ein paar hundert TVCs usw., die wir einfach mit ihren Metadaten, allen Beschreibungen, Titeln usw. in das Webflow CMS importieren konnten.

Das Vimeo-Hintergrundvideo ist überraschend einfach in Webflow zu implementieren:

Aber alles, was Sie wirklich tun müssen, ist loslegen, indem Sie die Vimeo-ID und die darauf folgende Abfrage hinzufügen, damit es abgespielt, wiederholt und stummgeschaltet wird. Hier ist eher eine Erklärung für den Rest, wenn Sie genau wissen möchten, was vor sich geht:

Der HTML-Code erzeugt ein Iframe-Element mit der ID „vimeo-video“. Hier wird das Vimeo-Video auf der Seite eingebettet. Das ist wichtig, da unser erster Object-Intersect-Beobachter nach „Vimeo-Video“ suchen wird.
Das Attribut „loading“ ist auf „eager“ gesetzt, was den Browser anweist, den Iframe und seinen Inhalt so schnell wie möglich zu laden, ohne darauf zu warten, dass der Rest der Seite geladen wird. Es liegt über dem Rand, also wollen wir es schnell haben.
Das Attribut „preload“ ist auf „auto“ gesetzt, was den Browser anweist, die Videodatei vorab zu laden, damit sie so schnell wie möglich abgespielt werden kann. Das Gleiche wie oben.
Das Attribut „title“ setzt den Titel des Iframes auf „Name“.
Das Attribut „src“ wird auf die URL des Vimeo-Videos gesetzt, wobei zusätzliche Parameter hinzugefügt wurden. Der Parameter „background=1" legt fest, dass das Video als Hintergrundvideo abgespielt wird, und der Parameter „loop=1" legt fest, dass das Video kontinuierlich wiederholt wird. Der Parameter „autopause=0" deaktiviert das Standardverhalten des Vimeo-Players und pausiert, wenn das Video nicht mehr angezeigt wird, und der Parameter „muted=1" legt fest, dass das Video so abgespielt wird, dass der Ton stummgeschaltet ist. Der Parameter „quality=auto“ legt fest, dass sich die Videoqualität automatisch an die Verbindungsgeschwindigkeit des Benutzers anpasst. Mit dem Parameter „responsive=1" reagiert das Video auf unterschiedliche Bildschirmgrößen. Der Parameter „dnt=1" legt fest, dass der Vimeo-Player die Browsereinstellung „Nicht verfolgen“ des Benutzers respektiert. Dadurch werden die Ladezeiten beschleunigt und es werden jetzt keine Analysen mehr aufgezeichnet.
Das Attribut „style“ setzt die Hintergrundfarbe des Iframes auf Weiß.
Die Attribute „width“ und „height“ sind auf 100% gesetzt, damit der Iframe die gesamte Breite und Höhe seines Containers ausfüllt.
Das Attribut „frameborder“ wird auf 0 gesetzt, um den Rand um den Iframe zu entfernen.
Das Attribut „allow“ ermöglicht es dem Iframe, automatisch abzuspielen und in den Vollbildmodus zu wechseln.
Das Attribut „allowfullscreen“ ermöglicht es dem Iframe, in den Vollbildmodus zu wechseln.

Sie können auch das Videoelement verwenden und wir haben hier tatsächlich einen vollständigen Beitrag zum Hintergrundvideo verfasst wenn Sie mehr darüber erfahren möchten, wie Sie das zu Ihren Sammlungslisten hinzufügen können. Iframes und die Videoelemente haben beide ihre Vor- und Nachteile.

Iframe-Einbettungen sind eine gängige Methode, um Vimeo-Videos auf einer Website einzubetten, und sie bieten einige Vorteile. Einer der Hauptvorteile besteht darin, dass Iframes asynchron geladen werden, was bedeutet, dass der Rest der Seite unabhängig vom Video geladen werden kann. Dies kann dazu beitragen, die Ladezeiten der Seiten zu verbessern, insbesondere bei langsameren Verbindungen. Iframes können jedoch auch langsamer gerendert werden und sich negativ auf die Leistung der Website auswirken, insbesondere wenn Sie viele Videos asynchron laden und Interaktionsauslöser wie „Seite geladen“ verwenden, insbesondere auf Mobilgeräten mit langsameren Prozessoren.

Andererseits können Einbettungen von Videoelementen leistungsfähiger sein als Iframes, da sie Teil des DOMs der Seite sind und mit JavaScript direkter gesteuert werden können. Sie lassen sich auch leicht zwischenspeichern. Das bedeutet, dass die Einbettung von Videoelementen für eine schnellere Wiedergabe und eine bessere Leistung optimiert werden kann, insbesondere auf Mobilgeräten. Sie können jedoch auch komplexer einzurichten sein und erfordern mehr Code zur Steuerung. Im Gegensatz zu einem Vimeo-Iframe können Sie sie einfach mit der Vimeo-Video-ID füllen.

Am Ende entschieden wir uns für den Iframe, da ihr Social Media Manager die Seite verwalten würde, und alles, was er brauchte, war die Vimeo-Video-ID und das Webflow-CMS, aber wir brauchten mehr Kontrolle, um das Erlebnis zu optimieren. Erstens, weil wir zwar Empfehlungen zu Größe und Qualität geben können, aber es gibt keine Garantie, dass sich irgendjemand daran hält, und zweitens, weil einige der Seiten für ihre Regisseure Hunderte von Hintergrundvideos enthielten, die den Browser leicht auf einen niedrigen Stand bringen würden. Endgerät oder Smartphone.

Die Lösung, Object Intersect Code. Was sagst du, und das zu Recht. Es wird oft benutzt, aber Leute, die sich mit No-Code-Entwicklung befassen, müssen sich keine großen Sorgen machen. Wir sagen immer, dass Milk Moon Studio in erster Linie ein Webflow Studio ist, wir mögen wenig oder keinen Code, und sowieso möchte jeder Webflow-Experte die Dinge einfach halten.

Object Intersect Code ist eine Technik, die in der Webentwicklung verwendet wird, um Aktionen auszulösen, wenn sich ein bestimmtes Objekt überschneidet oder auf dem Bildschirm sichtbar wird.

Im Zusammenhang mit Vimeo-Hintergrundvideos in Webflow kann Object-Intersect-Code verwendet werden, um die Wiedergabe des Videos zu steuern. Beispielsweise möchtest du vielleicht, dass das Video pausiert, wenn es nicht mehr angezeigt wird, oder dass es erst abgespielt wird, wenn es auf dem Bildschirm zu sehen ist.

Durch die Verwendung von Object Intersect Code können Sie sicherstellen, dass die Videowiedergabe für Ihre Benutzer optimiert ist und die Ressourcen ihrer Geräte nicht unnötig beansprucht. Es kann auch das allgemeine Benutzererlebnis verbessern, indem die Videowiedergabe reibungsloser und reaktionsschneller wird.

Objektüberschneidungscode kann auch verwendet werden, um andere Ereignisse auf der Website auszulösen, die auf dem Status des Vimeo-Videoplayers basieren. Du könntest den Code beispielsweise verwenden, um zu erkennen, ob das Video gerade abgespielt oder angehalten wird, und dann basierend auf diesem Status andere Aktionen auslösen, wie z. B. das Ein- oder Ausblenden anderer Elemente auf der Seite oder das Auslösen von Animationen.

Wir zeigen Ihnen einige Möglichkeiten, wie wir in diesem Projekt Object-Intersect-Code verwendet haben, um die Website zu optimieren und andere Elemente zu steuern, um das allgemeine Nutzererlebnis zu optimieren.

Denken Sie daran, dass Sie die Player-API laden müssen, damit das alles funktioniert:

Den Object Intersect Code als Auslöser verwenden, wenn die Wiedergabe eines Vimeo-Videos beginnt

Wir beginnen mit dem, was wir auf der Startseite der Website gemacht haben. Wir verwenden Objektschnittcode, um andere Elemente zu steuern, um das Nutzererlebnis zu verbessern und Interaktionen mit dem Abspielen des Videos zeitlich zu steuern.

Um die Szene vorzubereiten, haben wir ein Showreel-Video im Hintergrund, das hinter einem scrollenden Logo abgespielt wird. Normalerweise ist es ziemlich einfach, dies zu timen, die Interaktion auf der geladenen Seite auszulösen und fertig, aber Webflow weiß nicht, wann die geladen wurde, es sind die Iframes, die asynchron geladen werden, also brauchten wir den Objekt-Intersect-Code, um zu beobachten, wie das Video abgespielt wird, und dann das scrollende Logo auszulösen. Der Code richtet mithilfe einer CSS-Animation einen Scrolling-Marquee-Effekt auf einer Webseite ein und löst die Animation aus, wenn ein Vimeo-Video abgespielt wird. Hier ist eine Aufschlüsselung dessen, was der Code tut:

Der CSS-Code richtet eine „Marquee-Track“ -Klasse ein, die ein Textelement absolut positioniert und dafür sorgt, dass es mithilfe einer CSS-Animation horizontal scrollt. Die Animation ist so eingestellt, dass sie in umgekehrter Reihenfolge abgespielt wird und 30 Sekunden dauert. Die Klasse ist anfänglich auf eine Opazität von 0 festgelegt, sodass sie auf der Seite versteckt ist.
Der JavaScript-Code richtet einen Event-Listener ein, der darauf wartet, dass der Vimeo-Player abgespielt wird. Wenn das Play-Event ausgelöst wird, fügt das JavaScript dem „Marquee-Track“ -Element die Klasse „Start“ hinzu, wodurch die CSS-Animation ausgelöst wird und der Text über die Seite scrollt.

Hier sind die vollständigen Stile und das Skript mit Markup, um es ein bisschen besser zu erklären, aber das ist einfach, wie einfach es ist, den Object Intersect Observer zu verwenden, um andere Elemente wie Loader usw. auszulösen, auszublenden oder einzublenden.

Laden Sie Vimeo-Hintergrundvideos verzögert, wenn sie sich im Viewport befinden, indem Sie den Object Intersect Observer verwenden

Wie bereits erwähnt, bietet der obige Teil mehr Benutzererfahrung, sieht gut aus, bringt aber nicht viel in Bezug auf die Leistung. Der nächste Teil ist großartig, um die Leistung zu verbessern, und das haben wir auf den Seiten mit Hunderten von Videos verwendet, um die allgemeine Seitenleistung und die Ladezeiten zu verbessern. Einer der Nachteile von Iframes ist die Menge an direkter Kontrolle, wenn Sie nur die Einbettung verwenden. Mit dem folgenden Code können Sie direkt steuern, wann das Video überhaupt geladen wird:

Der HTML-Code erstellt einen Videocontainer mit der ID „vimeo-video“. Hier wird das Vimeo-Video auf die Seite geladen. Im Grunde das gleiche wie der obige Iframe, aber mit einer anderen ID.
Der JavaScript-Code wählt alle Videocontainer auf der Seite mithilfe der Methode „querySelectorAll“ aus.
Das Objekt „options“ richtet die Parameter für die IntersectionObserver-API ein. Die Eigenschaft „root“ ist auf „null“ gesetzt, um den Viewport als Stammelement zu verwenden. Die Eigenschaft „rootMargin“ ist auf „0px“ gesetzt, um den Rand rund um das Stammelement auf 0 zu setzen. Die Eigenschaft „threshold“ ist auf 0,3 gesetzt, um den Prozentsatz des Videocontainers anzugeben, der im Viewport sichtbar sein muss, bevor das Video geladen wird.
Die Variable „VideoObserver“ erstellt eine neue IntersectionObserver-Instanz mit einer Callback-Funktion, die ausgeführt wird, wenn eine Kreuzung beobachtet wird. Die Funktion empfängt ein Array von „Einträgen“ und ein „Beobachter“ -Objekt. Bei jedem Eintrag überprüft die Funktion mithilfe der Eigenschaft „isIntersecting“, ob sich der Eintrag mit dem Viewport überschneidet. Ist dies der Fall, ruft die Funktion den Vimeo-Video-Iframe innerhalb des Containers mithilfe der Methode „querySelector“ ab, ruft mithilfe der Methode „getAttribute“ die URL der Videoquelle aus dem Attribut „data-src“ ab, setzt das iframe-Attribut „src“ mithilfe der Methode „setAttribute“ auf die abgerufene URL und beendet die Beobachtung des Containers mit der Methode „unobserve“.
Die Variable „VideoContainers“ wird mit der Methode „forEach“ iteriert, um auf jeden Container einzeln zuzugreifen. Für jeden Container ruft die Funktion mithilfe der Methode „querySelector“ den Vimeo-Video-Iframe innerhalb des Containers ab, ruft mithilfe der Methode „getAttribute“ die URL der Videoquelle aus dem Attribut „src“ ab, setzt das Attribut „data-src“ mithilfe der Methode „setAttribute“ auf die abgerufene URL, entfernt das „src“ -Attribut mit der Methode „removeAttribute“ und beginnt mit der Beobachtung des Containers mit der Methode „observe“ von die IntersectionObserver API.

Das Schöne daran ist, dass Sie im Grunde die src-URL entfernen und hinzufügen, was bedeutet, dass Videos, die sich nicht im Viewport befinden, überhaupt nicht geladen werden können, wodurch Ressourcen nur für diejenigen freigegeben werden, die sich befinden.

Verwenden des Vimeo-Players zum Anhalten von Vimeo-Videos, wenn Sie ein Modal schließen

Das letzte werde ich einfach hier reinwerfen. Es ist nur eine nützliche Methode zur Steuerung der Player-API, nicht direkt was mit Intersect Observer zu tun hat. Das Problem, was machst du, wenn du ein Vimeo-Video in einem Modal hast. Wenn du es abspielst, ist alles gut, aber wenn du einfach das Modal schließt, wird das Video weiter richtig abgespielt, es ist kein Webflow-Videoelement, sondern nur eine normale Vimeo-Einbettung, sodass Webflow keine Kontrolle darüber hat. Und genau das ist uns passiert, als wir ein Modal in einem Slider hatten. Du klickst auf eine Seite, die das Modal öffnet, aber wenn du das Modal schließt, läuft der Slider weiter und das Video auch, irgendwo im Hintergrund. Niemand will das.

Alles was wir brauchten war das, um das Video anzuhalten:

Der HTML-Code erstellt ein Videomodal mit einer Schaltfläche zum Schließen. Hier wird das Vimeo-Video auf der Seite abgespielt.
Der JavaScript-Code wählt alle Schließschaltflächen auf der Seite mithilfe der Methode „querySelectorAll“ aus.
Die Variable „closeButtons“ wird mit der Methode „forEach“ iteriert, um auf jede Schaltfläche einzeln zuzugreifen. Für jede Schaltfläche fügt die Funktion mithilfe der Methode „addEventListener“ einen Click-Event-Listener hinzu.
Die Event-Listener-Funktion ruft mithilfe der Methode „querySelectorAll“ und des Klassenselektors „.modal-video“ alle Videomodelle auf der Seite ab.
Die Variable „modalVideos“ wird mit der Methode „forEach“ iteriert, um auf jedes Video-Modal einzeln zuzugreifen. Für jedes Video-Modal ruft die Funktion mithilfe der Eigenschaft „contentWindow“, die auf das Fensterobjekt des Iframes zugreift, und der Methode „postMessage“ den Vimeo-Video-Iframe innerhalb des Modals ab. Die Methode „postMessage“ sendet eine Nachricht an den Iframe, der in diesem Fall ein JSON-Objekt ist, dessen „method“ -Eigenschaft auf „pause“ gesetzt ist. Dadurch wird das Vimeo-Video angehalten, wenn das Modal geschlossen wird.

Insgesamt stellt dieser Code sicher, dass das Vimeo-Video innerhalb des Modals angehalten wird, wenn das Modal geschlossen wird, indem die Methode „postMessage“ verwendet wird, um mit der Methode „pause“ eine Nachricht an den Iframe zu senden. Dadurch wird verhindert, dass das Video im Hintergrund abgespielt wird und unnötige Ressourcen auf der Seite verbraucht werden.

Alles in allem also einige interessante Möglichkeiten, den Object Intersect Observer zu verwenden, um den Hintergrundvideoinhalt in Webflow zu optimieren, sowie wie ein Video angehalten werden kann, wenn ein Modal geschlossen wird. Wir hoffen, das gibt Ihnen Inspiration für Ihr nächstes Projekt, und Weitere Informationen zu CMS-gestützten Hintergrundvideos finden Sie in diesem Beitrag. Du kannst auch finden Sie hier unseren How-To-Bereich bei all den Beiträgen und Videos mit Anleitungen, die wir erstellt haben, versuchen wir, sie codearm, einfach und Webflow verwandt. Es gibt auch eine nette Anleitung zum Object Intersect Observer hier, komplett mit einem schönen Video, wenn Sie es für andere Dinge als Video verwenden möchten.

Optimierung von Vimeo-Hintergrundvideos in Webflow mithilfe von Object Intersection Code für eine verbesserte Leistung

Den Object Intersect Code als Auslöser verwenden, wenn die Wiedergabe eines Vimeo-Videos beginnt

Laden Sie Vimeo-Hintergrundvideos verzögert, wenn sie sich im Viewport befinden, indem Sie den Object Intersect Observer verwenden

Verwenden des Vimeo-Players zum Anhalten von Vimeo-Videos, wenn Sie ein Modal schließen

Teilen

Alle Beiträge

Dance of the Dots: Choreographieren benutzerdefinierter Slider-Steuerelemente in Webflow

Steigern Sie die Leistung Ihrer Website mit dem Zaraz Tag Manager von Cloudflare: Eine schrittweise Anleitung zur Implementierung von Zaraz und zum Hinzufügen von Google Analytics 4 in Webflow

Verwenden Sie Webflow mit Cloudflare, um Ihr Webflow-Projekt zwischenzuspeichern und zu beschleunigen

Webdesign Rebels Unite. Abonnieren Sie unseren Newsletter.