Comment lire des vidéos au survol dans Webflow

Tu vas découvrir :
👉 Webflow Custom Code Embeds
👉 jquery dans Webflow
👉 Raccourcis dans Webflow
👉 Manipulation de base du DOM avec JavaScript.

Comment faire en sorte que ta vidéo ne soit lue qu'au survol

Es-tu déjà tombé sur un site Web où la lecture d'une vidéo commence automatiquement et où tu dois faire des pieds et des mains pour la mettre en pause ? Ou peut-être veux-tu ajouter un peu plus d'interactivité à ton site Web et faire en sorte qu'une vidéo ne soit lue que lorsque quelqu'un la survole ? Dans ce tutoriel, nous allons te montrer comment faire cela avec un peu de code.

Introduction

Bonjour, je suis Marvin Aziz, un développeur indépendant, et dans ce tutoriel, je vais te montrer comment ajouter un effet de survol fluide à ta vidéo. Nous allons remplacer une image au milieu d'un design que j'ai précédemment construit par une vidéo qui ne se joue qu'au survol.

Conditions préalables

Avant de commencer, tu auras besoin de quelques connaissances de base en HTML, CSS et JavaScript. Ne t'inquiète pas si tu n'es pas un expert, nous te guiderons à travers les étapes.

Étapes à suivre

Plongeons dans l'aventure !

1. Retire l'image à l'endroit où tu veux que la vidéo apparaisse.
2. Trouve l'élément embed et remplace-le par l'élément vidéo.
3. Ajoute une div wrapper appelée "hover video wrapper" et place l'élément vidéo à l'intérieur.
4. Mets la vidéo en boucle et précharge-la. Assure-toi aussi qu'elle est d'abord mise en sourdine.
5. Héberge la vidéo sur un site Web. (Remarque : l'hébergement de vidéos sur Webflow peut s'avérer difficile).
6. Ouvre les paramètres de ta page et descends jusqu'à la balise head et body.
7. Copie et colle le code JavaScript dans la balise body.
8. Modifie le code si tu veux utiliser plusieurs vidéos.
9. Passe en boucle sur toutes les vidéos de la page et ajoute des récepteurs d'événements.
10. Vérifie que la souris se trouve au-dessus de la vidéo.
11. Si la souris se trouve au-dessus de la vidéo, la vidéo est lue.
12. Si la souris sort de la vidéo, mets la vidéo en pause et garde trace de l'heure à laquelle elle a été lue pour la dernière fois.
13. Publie ton site Internet et vérifie le résultat final.
14. C'est la fête !

Le code expliqué

Décomposons le code JavaScript étape par étape.

Tout d'abord, le code récupère toutes les séquences vidéo de la page. Ensuite, il passe en boucle sur toutes les vidéos et ajoute des récepteurs d'événements. L'écouteur d'événement vérifiera si la souris se trouve au-dessus de la vidéo. Si c'est le cas, la vidéo est lue. Si la souris sort de la vidéo, la vidéo se met en pause et reprend là où elle s'est arrêtée lors de la prochaine lecture. Les visiteurs de ton site Web bénéficient ainsi d'une expérience fluide et homogène.

Conclusion

Et voilà ! Tu as réussi à ajouter un effet de survol à ta vidéo en utilisant quelques lignes de code. Tu peux maintenant faire participer les visiteurs de ton site Web grâce à l'interactivité et faire en sorte qu'ils restent attentifs à ton contenu. Merci d'avoir lu, et j'espère que ce tutoriel t'a été utile.

FAQs

1. Puis-je utiliser ce code sur plusieurs vidéos de mon site Web ?
   Oui, tu peux. Il te suffit de passer en boucle toutes les vidéos que tu veux utiliser avec cet effet.

1. Puis-je modifier le code pour qu'il corresponde à mes besoins spécifiques ?
   ‍Absolument! Tu peux personnaliser le code pour qu'il corresponde à tes besoins.
2. Et si je veux que la vidéo commence à être lue au clic plutôt qu'au survol ?
   ‍Tupeux modifier le code pour ajouter un écouteur d'événement pour un clic au lieu d'un survol.
3. Cecode est-il compatible avec tous les navigateurs ?
   ‍Cecode fonctionne sur la plupart des navigateurs modernes, notamment Chrome et Firefox.
4. Que faire si ma vidéo ne s'affiche pas correctement ?
   Il peut y avoir de nombreuses raisons pour lesquelles ta vidéo ne s'affiche pas correctement, comme une vitesse d'Internet trop lente ou un fichier trop volumineux. Essaie de compresser ta vidéo et de l'héberger sur un serveur plus rapide.

🧑🏾‍💻 Lien vers l'extrait de code mentionné :
‍https://bit.ly/37lXgJQ

J'espère vraiment que cette vidéo t'aidera à rendre ton site Webflow encore plus unique. Si tu veux en savoir plus sur les effets de survol dans Webflow, consulte ma Playlist
⏩ Playlist pour les bases de Webflow :

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