CATALOGUE Code & Data Formation XHTML/CSS Apprendre HTML5 et CSS3 / Part 4 Gestion de la barre de progression et du temps des vidéos

Gestion de la barre de progression et du temps des vidéos

Getion de l'avance de la video
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€ 41,93€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
59,90€ 41,93€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Optimisation de la fonction Play pour la barre de progression

Objectifs

À la fin de cette vidéo, vous saurez gérer une barre de progression et afficher le temps courant et la durée totale d'une vidéo en utilisant JavaScript et jQuery.

Résumé

Cette leçon couvre la gestion de la barre de progression et l'affichage du temps pour les vidéos en utilisant JavaScript et jQuery.

Description

Dans cette leçon, nous apprendrez à optimiser la fonctionnalité de gestion de la barre de progression ainsi que l'affichage du temps courant et de la durée totale d'une vidéo à l'aide de JavaScript et jQuery. Nous commencerons par reprendre le script existant, en ajoutant une fonction pour faire avancer la barre de progression lorsque la vidéo est jouée. Nous utiliserons des fonctions telles que Math.floor() pour arrondir le temps. Une attention particulière sera portée à la création dynamique des éléments HTML via jQuery.

Ensuite, nous verrons comment afficher la durée totale de la vidéo dès le chargement en utilisant l'événement loadedmetadata de l'élément vidéo. Nous mettrons aussi en place un timer pour actualiser en continu l'affichage du temps courant et de la progression de la barre. Enfin, nous gérerons les états de fin de vidéo et implémenterons les actions nécessaires lorsque le bouton Stop est activé.

Voir plus

Questions fréquentes

Comment arrondir une valeur en JavaScript ?
Vous pouvez utiliser la fonction Math.floor() pour arrondir une valeur à l'entier inférieur en JavaScript.
Quelle fonction jQuery est utilisée pour manipuler du texte dans un élément HTML ?
La fonction jQuery .text() est utilisée pour manipuler du texte dans un élément HTML.
Quel événement est déclenché lorsque les métadonnées d'une vidéo sont chargées ?
L'événement loadedmetadata est déclenché lorsque les métadonnées d'une vidéo, telles que la durée, sont chargées.

Programme détaillé

2 commentaires
4,5
2 votes
5
4
3
2
1
Azraël
Il y a 2 ans
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 4 ans
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.