CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 Gestion de l'Avancement d'une Vidéo par le Scroll

Gestion de l'Avancement d'une Vidéo par le Scroll

Gérer l'avance de la video à la souris
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4
Revoir le teaser Je m'abonne
4,5
Transcription
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à la Gestion Vidéo Dynamique

Objectifs

Synchroniser l'avancée de la vidéo avec le scrolling pour une meilleure expérience utilisateur.

Résumé

Découvrez comment synchroniser l'avancée d'une vidéo avec le scroll de la page web.

Description

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.

Voir plus

Questions - réponses

Qu'est-ce que l'élément 'scrollTop' représente?
L'élément 'scrollTop' représente la distance en pixels que le contenu d'un élément a défilé vers le haut.
Pourquoi utiliser jQuery pour l'événement de scroll?
jQuery simplifie la manipulation des événements de scroll et la prise en charge des différents navigateurs.
Quelle est la fonction principale contrôlant l'avancée de la vidéo?
La fonction principale est 'currentTime', qui ajuste le temps de lecture actuel de la vidéo.

Programme détaillé

2 commentaires
4,5
2 votes
5
4
3
2
1
wfischli
Il y a 2 years
Commentaire
Bonne formation.
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
lyazid.meaux
Il y a 3 years
Commentaire
Très bonne formation, juste ce qu'il faut.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.

Merci.