Formation incluse dans l'abonnement Elephorm
Synchroniser l'avancée de la vidéo avec le scrolling pour une meilleure expérience utilisateur.
Découvrez comment synchroniser l'avancée d'une vidéo avec le scroll de la page web.
Dans cette leçon, nous explorerons une méthode avancée pour gérer l'avancement d'une vidéo en fonction du défilement de la page web. Contrairement aux méthodes classiques, cette technique permet de synchroniser l'avancée de la vidéo avec des éléments textuels ou graphiques se déplaçant à mesure que l'utilisateur scrolle.
Nous commencerons par mettre la vidéo en plein écran avant d'écrire un script qui ajuste le temps de lecture de la vidéo grâce au scroll de l'utilisateur. Cette technique offre une expérience enrichie et interactive, particulièrement utile pour des sites web éducatifs ou de présentation dynamique. Nous utiliserons jQuery pour capturer les événements de scroll et JavaScript pour ajuster le temps de lecture vidéo en conséquence.
En suivant cette leçon, vous apprendrez à manipuler les propriétés de durée de la vidéo, à calculer le rapport entre la durée de la vidéo et la taille du scrolling, et à mettre en œuvre des ajustements finaux pour une expérience fluide et intégrée.
