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

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à 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.

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.
Dans cette leçon, nous allons voir comment gérer la vidéo, alors de manière un peu moins classique que ce qu'on a pu voir jusqu'à présent, mais gérer la vidéo par rapport au scroll. Alors là, on a une vidéo que l'on va mettre full screen tout à l'heure, parce que là, pour l'instant, elle n'est pas du tout full screen, le script n'est pas fait. Donc là, on va descendre l'ascenseur et la vidéo va avancer. Alors ça peut être intéressant parce que, imaginons que vous ayez des petits éléments là, par exemple dans le texte, qui avancent en même temps que la vidéo, finalement la vidéo va avancer en même temps, donc vous allez pouvoir avoir une certaine connexion entre le texte, les petites bulles par exemple, et puis la vidéo en courant, puisque de toute façon, le temps où est ce texte là, sera toujours le même, puisqu'il sera totalement connecté avec l'avance de la vidéo. Donc c'est ce que nous allons voir à présent. Alors, je ne vais pas tout réinventer, puisque nous avons déjà réalisé, dans une leçon précédente, le fait de mettre la vidéo en full screen. Donc je vais rouvrir le script de la vidéo full screen, donc c'est celui là, et puis je vais ouvrir mon script de cette vidéo là, donc js, voilà, on va le mettre là, et puis pour l'instant, je vais simplement copier-coller l'ensemble, puisque c'est exactement la même chose. Donc avant de s'ouvrir la vidéo, voilà. Donc là, je vais enregistrer, on va supprimer celui-là, et puis on va quand même vérifier dans le html qu'on a bien les mêmes éléments. Donc là, on a vidéo background. La différence avec ce qu'on a vu tout à l'heure, c'est que là, la vidéo ne se joue pas automatiquement, puisqu'en fait, c'est la souris qui va la jouer. Alors, on va tout de suite regarder si ça s'est bien passé. Voilà, donc voilà, on a bien une vidéo qui est maintenant full screen, quelle que soit la taille de l'écran. Donc jusque là, tout va bien. Alors maintenant, nous allons ajouter un petit script qui va gérer, finalement, cette avance de la vidéo. Donc je vais le mettre à la fin, juste avant la fin de document.ready, et puis on va récupérer l'élément document, voilà, et puis on va gérer son scroll. Donc function, ça c'est comme d'habitude, par rapport à jQuery. Donc pas de nouveauté particulière. Alors ce que l'on va récupérer, on va d'abord récupérer la durée de notre vidéo. Donc ça, on sait le faire. Dollars, l'élément vidéo, vidéo.background, le voici, et puis on va aller chercher le premier élément, .get0. Alors on peut le prendre comme ça, ou on peut le prendre également avec les petits crochets, c'est la même chose. Voilà, .duration. Donc ça, nous l'avons vu dans une leçon concernant la gestion de la vidéo. Ensuite, on va prendre la taille de notre texte, de compléter la taille du scroll, finalement. Alors la taille du scroll, c'est ça, c'est la taille de la hauteur de la fenêtre. Donc moi, ça correspond à l'élément texte, mais généralement, ça peut correspondre à l'élément qu'on pourrait appeler le conteneur. Donc var, je vais mettre un petit mot clé var devant durée aussi, var-tie-scroll, égal, c'est l'élément qui se nomme, donc, dièse-texte, et puis on récupère son CSS qui est height. Voilà, donc pas de difficulté jusqu'à présent. Ensuite, on va faire le rapport entre la durée de la vidéo et la taille du scroll, ce qui va nous permettre de voir le nombre de pixels nécessaires pour faire bouger la vidéo d'une seconde. Donc var intervalle égale durée, puisque ça, ça y est, on l'a, divisé par notre taille scroll. Alors hop, ça va être taille scroll comme ça, mais pour m'assurer que c'est bien du chiffre, je vais mettre parse-height, comme ça, on est certain que nous n'aurons pas de px ou d'éléments intermédiaires comme cela. Donc ça, on va avoir quelque chose. On pourrait regarder dans console.log ce qu'on obtient. .log, c'est intervalle. Voilà, j'actualise, j'ouvre la console. Alors pour l'instant, on n'a rien, ça se déclenche qu'au moment où on scrolle. Voilà, je descends d'un pixel et c'est de combien la vidéo doit bouger. Hop, voilà. Alors ensuite, on a le décalage. Alors le décalage, c'est quoi ? On a un petit décalage, ça va être lorsque je joue sur le scroll, eh bien le texte monte. Ça, c'est représenté par une fonction qui s'appelle scrollTop. Donc c'est cette distance qui est sortie de mon écran. Donc c'est ce que j'appelle le décalage. Décalage, c'est égal à $body, puisque c'est ça qui m'intéresse, c'est combien il est sorti de l'écran, finalement. Molly.scrollTop. Voilà, ce petit décalage. On pourrait toujours essayer également de le regarder. Console.log, décalage. Voilà, c'est toujours intéressant. Hop, j'actualise. Et puis voilà, on a le décalage. Et puis là, forcément, on est à 0, puisque on est en haut. Donc essayez à chaque fois de voir ce qui se passe avec la console.log, donc c'est quand même super pratique. On a presque terminé en plus. Et maintenant, on va aller chercher notre élément, donc document. Alors là, je vais aller le chercher en JavaScript, parce qu'il s'est avéré qu'avec la méthode jQuery, ça fonctionne très mal. Donc document.get élémentById, un autre élément qui s'appelle vidéoBackground. Voilà. .currentTime, donc currentTime, on le connaît, ça c'est l'état de la vidéo, l'avancement de la vidéo, la tête de lecture finalement de la vidéo. Et c'est égal à intervalle multiplié par ce fameux décalage. Et c'est terminé. On va pouvoir jouer notre vidéo. Voilà. Alors, j'actualise. Attention, je descends, et la vidéo bouge en même temps que mon pointeur de souris. Ma vidéo n'est pas terrible. Ça bouge beaucoup. Je l'ai tourné alors que j'étais en train de marcher, mais ça fonctionne quand même. Voilà. Donc vous allez pouvoir, en plus de la vidéo plein écran, parce que celle-ci, elle est également plein écran, donc quelle que soit la taille de votre navigateur, vous allez pouvoir gérer à la fois l'avance de votre texte et en même temps l'avance de votre vidéo.

Programme détaillé de la formation

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.
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5