JavaScript Moderne avancé - Les vidéos
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO JavaScript Moderne avancé - Les vidéos

Carl Brison
39,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans cette formation JavaScript Moderne en ligne, nous allons apprendre tout ce qui concerne le fonctionnement d'une vidéo en JavaScript ! Ce cours mélange théorie et pratique, puisqu'à la fin du cours, nous apprendrons à créer un lecteur vidéo de A à Z
Cela sera très pratique si vous souhaitez créer votre propre lecteur de vidéo et en maîtriser tous ses aspects. 

Au programme de ce tuto JavaScript Moderne avancé - Les vidéos

Voici ce que nous allons apprendre dans ce cours vidéo :

  • Lancer la lecture d'une vidéo,
  • Mettre une vidéo sur pause et la reprendre là où elle s'est arrêtée,
  • Stopper et recommencer la lecture,
  • Modifier le volume,
  • Couper et remettre le son de la vidéo,
  • Afficher la durée totale de la vidéo,
  • Afficher en temps réel, le temps restant,
  • Modifier la vitesse de lecture,
  • Passer la vidéo en plein écran.

Une fois toutes ces connaissances théoriques acquises, nous créerons un lecteur vidéo de A à Z !

A la fin de cette formation, vous serez en mesure de créer des lecteurs de vidéos totalement personnalisés pour vos propres pages web ou bien celles de vos clients.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Tous les fichiers de travail sont fournis !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Envie d'apprendre plus de choses ? Je propose un formation complète sur le JavaScript Moderne de 14h

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Cours théorique
Chapitre 2
Exercice: Créer un lecteur de vidéo
Chapitre 3
Conclusion

Plan détaillé du cours

Chapitre 1 : Cours théorique
1h50m
 
Leçon 1Rappel de la mise en place d'une vidéo en HTML5
Leçon 2Jouer une vidéo en JavaScript
Leçon 3Faire une pause à la vidéo
Leçon 4Stopper et redémarrer la vidéo au début
Leçon 5Modifier le volume de la vidéo
Leçon 6Mise en place d'une barre de progression
Leçon 7Affichage de la barre de progression
Leçon 8Mise en fonctionnement de la barre de progression
Leçon 9Affichage de la durée de la vidéo
Leçon 10Affichage de la durée de la vidéo en HH:MM:SS
Leçon 11Réglage de l'affichage de la durée de la vidéo
Leçon 12Affichage du temps restant
Leçon 13Petite correction
Leçon 14Connaître les infos de la barre de défilement
Leçon 15Connaître les coordonnées horizontales du clic de la souris
Leçon 16On rapatrie le code dans notre programme en cours
Leçon 17Savoir à quel pourcentage de progression de la vidéo, l'utilisateur a cliqué
Leçon 18Connaître le nouveau temps écoulé
Leçon 19Ecouter le redimentionnement de la fenêtre
Leçon 20Couper et rétablir le son
Leçon 21Modifier la vitesse de la vidéo
Chapitre 2 : Exercice: Créer un lecteur de vidéo
1h52m
 
Leçon 1Mise en place des bases HTML
Leçon 2Superposition des boîtes
Leçon 3Animation des superpositions
Leçon 4Mise en place d'une barre de progression
Leçon 5Mise en place des controles de la vidéo
Leçon 6Mise en forme des controles de la vidéo
Leçon 7Mise en place du Play et Pause de la vidéo
Leçon 8Mise en place du stop de la vidéo
Leçon 9Couper ou remettre le son de la vidéo
Leçon 10Modifier le volume de la vidéo
Leçon 11Afficher la durée de la vidéo
Leçon 12Evolution de la barre de progression
Leçon 13Affichage du temps restant de la vidéo
Leçon 14Clic sur la barre de progression
Leçon 15Retour sur le volume de la vidéo
Leçon 16Débugage
Leçon 17Vitesse de lecture et plein écran
Leçon 18Programmation de la vitesse de lecture
Leçon 19Programmation du plein écran
Chapitre 3 : Conclusion
01m55s
 
Leçon 1Conclusion

Aperçus

Avis des apprenants

Détail des avis
5
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 11/09/2023
Merci Carl, félicitations pour ce tuto de presque 4h sur JavaScript et le fonctionnement des vidéos. Je n'ai pas rencontré de difficultés, le fait d'avoir suivi le Bundle complet en JavaScript m'a vraiment aidé. J'ai particulièrement apprécié votre manière d'expliquer, qui va du général au spécifique. Super travail, vraiment ! Validé 100% #JS-moderne-LesVideos
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire vraiment très gentil, Alain ,-)
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 07/12/2022
Excellent tuto, pas très facile mais très bien expliqué .
Carl Brison
Carl Brison
Merci beaucoup ;-)
Bernard Chabloz
Bernard Chabloz
Publié le 02/11/2021
Encore un très joli tuto, merci tout plein! Pour la durée de la vidéo, j'ai été confronté au NaN dès la première partie du tuto. Il s'agit apparement d'un problème de timing: les métadonnées ne pourraient pas être lues à temps. Remède efficace: l'événement 'onloadedmetadata' en lieu et place de l'écouteur de 'load'. Concrètement: video.onloadedmetadata = function() { instructions; };
Carl Brison
Carl Brison
Merci pour votre commentaire. L'interprêtation JS peut parfois réservée des surprises...

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le code source complet de l'exercice

Attendez ! 🤗

Accédez à plus de 1337 tutos gratuits

Notre politique de protection des données