Jouez avec les commandes de votre vidéo et expérimentez comment vous pouvez efficacement changer la position de lecture. Dans ce tutoriel, vous apprendrez comment contrôler la position d'une vidéo en utilisant le paramètre currentTime en React. L'accent est mis sur l'implémentation d'un curseur de plage, qui permet de naviguer entre différents moments d'une vidéo via une interface utilisateur simple. Commençons tout de suite!
Principales conclusions
- Le paramètre currentTime d'un élément vidéo contrôle la position de lecture.
- Un curseur de plage peut être utilisé pour créer un contrôle visuel et interactif de la position de la vidéo.
- Pour avoir un contrôle précis sur la position, vous devriez utiliser le pourcentage entre l'état actuel de la lecture et la durée de la vidéo.
- Les événements tels que onTimeUpdate sont essentiels pour mettre à jour dynamiquement l'interface utilisateur.
Guide pas à pas
Étape 1: Configuration du curseur de plage
Commencez par implémenter un curseur de plage. Ce curseur vous permettra de contrôler la position de la vidéo. Copiez la structure de base de votre curseur et ajustez les attributs min et max pour afficher les valeurs en fonction de la longueur de la vidéo.
Étape 2: Définir currentTime
L'attribut currentTime stocke la position de lecture actuelle de la vidéo en secondes. C'est la clé pour contrôler où vous vous trouvez dans la vidéo. Initialisez-le de manière à ce que la position de lecture soit réglée au début de la vidéo.
Étape 3: Créer un état pour la position
Vous devez créer un nouvel état pour la position de la vidéo. Dans notre cas, vous pouvez simplement l'appeler position, la valeur initiale étant 0. Cela représente le début de la vidéo, donc 0% de lecture.
Étape 4: Mettre à jour la position du curseur
Avec le nouvel état, il est important de mettre à jour effectivement la valeur du curseur en fonction de la position dans la vidéo. Réglez la value du curseur pour qu'il reste synchronisé avec la position actuelle.
Étape 5: Implémenter la durée
Pour savoir combien de pourcentage de la vidéo a déjà été lu, vous devez capturer la durée totale de la vidéo. Vous pouvez le faire en utilisant l'attribut duration de l'élément vidéo. Multipliez la position actuellement réglée par la durée totale de la vidéo.
Étape 6: Ajouter un écouteur d'événements pour la mise à jour de l'heure
Pour vous assurer que la position du curseur est également mise à jour lorsque la vidéo est lue, vous devez ajouter un écouteur d'événements pour onTimeUpdate à l'élément vidéo. Cet écouteur interrogera l'heure actuelle à chaque intervalle de temps et mettra à jour le curseur en conséquence.
Étape 7: Gestion des erreurs pour les valeurs indéfinies
Il est important de s'assurer que la valeur de currentTime est définie et que la durée de la vidéo est disponible avant de continuer le calcul. Ajoutez de la logique pour gérer les états initiaux possibles de la vidéo.
Étape 8: Arrondir et formater l'heure
Idéalement, il faut arrondir l'heure affichée aux secondes entières. Cette amélioration garantit que l'interface utilisateur reste propre et conviviale. Utilisez la fonction Math.round() pour formater les valeurs en conséquence.
Étape 9: Test en direct de la fonctionnalité
Après avoir suivi toutes ces étapes, rechargez le projet et testez le curseur. Assurez-vous que la position de la vidéo peut être ajustée dans les deux sens et vérifiez si le temps est correctement mis à jour.
Résumé
Vous avez maintenant appris comment contrôler la lecture d'une vidéo en React en mettant en œuvre un curseur Range efficace qui met à jour dynamiquement la propriété currentTime. Vous pouvez ainsi naviguer facilement entre différents points de la vidéo.
Questions fréquemment posées
Quelle est la différence entre currentTime et duration?currentTime indique la position de lecture actuelle, tandis que la durée décrit la longueur totale de la vidéo.
Comment puis-je mettre à jour la position du curseur pendant la lecture?Ajoutez un écouteur d'événements onTimeUpdate à l'élément vidéo qui interroge le temps actuel et met à jour l'état du curseur.
Comment puis-je m'assurer que mon curseur fonctionne correctement?Assurez-vous d'avoir correctement implémenté la logique de gestion de l'état dans React. Vérifiez que currentTime et duration sont correctement définis.
Puis-je utiliser le curseur également pour l'audio?Oui, le principe reste le même. Vous pouvez appliquer les mêmes techniques aux éléments audio car ils possèdent des attributs similaires.
