Gratuit : Créer un player vidéo avec fonctionnalité de looping
ERROR
00:00
00:00

TUTO Gratuit : Créer un player vidéo avec fonctionnalité de looping

Codeconcept

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Un client (ou votre chef de projet) vous a demandé un player vidéo avec un gros plus : une fonctionnalité de loop entre un point A et B ? Ce tuto gratuit en vidéo va vous permettre de voir comment vous y prendre pour ajouter ce cette fonctionnalité de boucle à un player video. Et ce, grâce à JavaScript (sans framework ni librairie).

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 
Si vous souhaitez aller plus loin avec Javascript, je propose une formation complète remplie d'ateliers pratiques !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Demonstration du projet de vidéo player abec AB loop
Leçon 2
Lire une vidéo à l'aide de l'élément HTLM "vidéo"
Leçon 3
Ecouter l'événement timeupdate et suivre le currentTime
Leçon 4
Afficher la durée de vidéo écoulée
Leçon 5
Récupérer le currentTime pour les points A et B
Leçon 6
Looper entre les points A et B
Leçon 7
Remettre à zéro

Plan détaillé du cours

Leçon 1Demonstration du projet de vidéo player abec AB loop
01m18s
Leçon 2Lire une vidéo à l'aide de l'élément HTLM "vidéo"
02m24s
Leçon 3Ecouter l'événement timeupdate et suivre le currentTime
03m15s
Leçon 4Afficher la durée de vidéo écoulée
01m11s
Leçon 5 Récupérer le currentTime pour les points A et B
02m25s
Leçon 6Looper entre les points A et B
02m16s
Leçon 7Remettre à zéro
01m47s
Leçon 8Afficher les points A et B choisis
02m09s
Leçon 9 Afficher un indicateur de looping
02m16s
Leçon 10Créer une fonction de formattage de durée écoulée
06m42s
Leçon 11Masquer les contrôles lorsque l'on loop
01m57s
Leçon 12Refactorisation et conclusion
02m37s

Avis des apprenants

Détail des avis
190
Apprenants
1
Commentaire
4/5
Note moyenne
5/5
0
4/5
1
3/5
0
2/5
0
1/5
0
Serge Dutilleul
Serge Dutilleul
Publié le 26/10/2019
Vidéo bien faite et bien explicative. Quelques regrets tout de même. - Les vidéos ne sont pas dans le bon ordre. - Le choix de la vidéo sur laquelle on va looper n'est pas, à mon avis, très judicieux. Il y a du code dedans. Ainsi, on ne sait pas bien si on voit du code de la vidéo à looper ou du code que l'on est en train d'étudier. - La modification du display du span spanLoop a été mise à block puis a été changée en inline sans que cela soit mentionné dans la vidéo (ou alors j'ai loupé) - Ne reste-t-il un souci si on clique sur B avant d'avoir cliqué sur A ? Dans la partie du clic sur B, il faudrait peut-être tester que A n'est pas égal à -1 avant d'exécuter les instructions. Merci pour la vidéo.
Codeconcept
Merci Serge d'avoir signalé le problème d'ordre: C'est corrigé! Désolé ça n'a pas du être facile à suivre. Je prends bonne note des autres remarques constructives pour les prochains tuto ;)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

ECMAScript 6.X

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données