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 !
Table des matières de cette formation JavaScript (durée : 30m17s)
-
- Demonstration du projet de vidéo player abec AB loop gratuit 00:01:18
- Lire une vidéo à l'aide de l'élément HTLM "vidéo" 00:02:24
- Ecouter l'événement timeupdate et suivre le currentTime 00:03:15
- Afficher la durée de vidéo écoulée 00:01:11
- Récupérer le currentTime pour les points A et B 00:02:25
- Looper entre les points A et B 00:02:16
- Remettre à zéro 00:01:47
- Afficher les points A et B choisis 00:02:09
- Afficher un indicateur de looping 00:02:16
- Créer une fonction de formattage de durée écoulée 00:06:42
- Masquer les contrôles lorsque l'on loop 00:01:57
- Refactorisation et conclusion 00:02:37
- Certificat
Formateur : Codeconcept
-
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.
-
Avec quelle version de logiciel ce tuto est-il compatible ?ECMAScript 6.X
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissé