Wie man Videos bei Hover in Webflow abspielt

Du wirst folgendes lernen:
👉 Webflow Custom Code Embeds
👉 jquery in Webflow
👉 Shortcuts in Webflow
👉 Grundlegende DOM-Manipulation mit JavaScript

Wie du dein Video nur bei Hover abspielen lässt

Bist du schon mal auf eine Website gestoßen, auf der ein Video automatisch abgespielt wird, und du musst dich abmühen, es anzuhalten? Oder möchtest du deine Website interaktiver gestalten und ein Video nur dann abspielen lassen, wenn jemand mit dem Mauszeiger darüber fährt? In diesem Lernprogramm zeigen wir dir, wie du das mit ein bisschen Code erreichen kannst.

Einführung

Hallo, ich bin Marvin Aziz, ein freiberuflicher Entwickler. In diesem Tutorial zeige ich dir, wie du einen sanften Hover-Effekt zu deinem Video hinzufügen kannst. Wir werden ein Bild in der Mitte eines Designs, das ich zuvor erstellt habe, durch ein Video ersetzen, das nur beim Hover-Effekt abgespielt wird.

Voraussetzungen

Bevor wir loslegen, brauchst du ein paar Grundkenntnisse in HTML, CSS und JavaScript. Keine Sorge, wenn du noch kein Experte bist, wir führen dich durch die einzelnen Schritte.

Zu befolgende Schritte

Lass uns eintauchen!

1. Entferne das Bild an der Stelle, an der das Video erscheinen soll.
2. Finde das Einbettungselement und ersetze es durch das Videoelement.
3. Füge einen Div-Wrapper namens "hover video wrapper" hinzu und platziere das Videoelement darin.
4. Schleife das Video und lade es vor. Achte außerdem darauf, dass es zunächst stummgeschaltet ist.
5. Hänge das Video auf eine Website. (Hinweis: Das Hosten von Videos auf Webflow kann eine Herausforderung sein).
6. Öffne deine Seiteneinstellungen und scrolle runter zum Head- und Body-Tag.
7. Kopiere den JavaScript-Code und füge ihn in den Body-Tag ein.
8. Ändere den Code, wenn du mehrere Videos verwenden möchtest.
9. Führe eine Schleife über alle Videos auf der Seite und füge Ereignis-Listener hinzu.
10. Prüfe, ob sich die Maus über dem Video befindet.
11. Wenn sich die Maus über dem Video befindet, spielst du das Video ab.
12. Wenn sich die Maus aus dem Video herausbewegt, halte das Video an und behalte die Zeit im Auge, zu der es zuletzt abgespielt wurde.
13. Veröffentliche deine Website und überprüfe das Endergebnis.
14. Feiern Sie!

Code erklärt

Lass uns den JavaScript-Code Schritt für Schritt aufschlüsseln.

Zuerst holt der Code alle Videosequenzen auf der Seite. Dann durchläuft er eine Schleife über alle Videos und fügt Ereignis-Listener hinzu. Der Ereignis-Listener prüft, ob sich die Maus über dem Video befindet. Wenn ja, wird das Video abgespielt. Wenn sich die Maus aus dem Video herausbewegt, wird das Video angehalten und bei der nächsten Wiedergabe an der Stelle fortgesetzt, an der es aufgehört hat. Das Ergebnis ist ein reibungsloses und nahtloses Erlebnis für deine Website-Besucher.

Fazit

Und das war's! Du hast mit ein paar Zeilen Code erfolgreich einen Hover-Effekt in dein Video eingebaut. Jetzt kannst du deine Website-Besucher mit Interaktivität begeistern und sie an deine Inhalte binden. Vielen Dank fürs Lesen und ich hoffe, dass diese Anleitung hilfreich war.

FAQs

1. Kann ich diesen Code für mehrere Videos auf meiner Website verwenden?
   Ja, das kannst du. Mach einfach eine Schleife über alle Videos, die du mit diesem Effekt verwenden willst.

1. Kann ich den Code an meine speziellen Bedürfnisse anpassen?
   ‍Absolut! Du kannst den Code an deine Anforderungen anpassen.
2. Was ist, wenn ich möchte, dass das Video beim Klicken statt beim Hovern abgespielt wird?
   ‍Dukannst den Code so ändern, dass er einen Event-Listener für einen Klick statt für ein Hovern hinzufügt.
3. Ist dieser Code mit allen Browsern kompatibel?
   ‍DieserCode funktioniert mit den meisten modernen Browsern, einschließlich Chrome und Firefox.
4. Was ist, wenn mein Video nicht flüssig abgespielt wird?
   Es kann viele Gründe dafür geben, dass dein Video nicht flüssig abgespielt wird, z. B. eine langsame Internetgeschwindigkeit oder eine große Datei. Versuche, dein Video zu komprimieren und es auf einem schnelleren Server zu hosten.

🧑🏾‍💻 Link zum erwähnten Code-Snippet:
‍https://bit.ly/37lXgJQ

Ich hoffe, dieses Video hilft dir, deine Webflow-Website noch einzigartiger zu machen. Wenn du mehr über Hover-Effekte in Webflow erfahren möchtest, schau dir meine Playlist
⏩ Playlist für Webflow-Grundlagen an:

https://www.youtube.com/watch?v=eXar9ckY57w&list=PLBpotogQWwtvdmcK7L7OnFHDgDdZJ-ZEH