Audio & Vidéo

5

Pour personnaliser un lecteur audio/vidéo, il faut recréer soi-même les boutons en HTML/CSS et les rendre fonctionnels en JavaScript.

N'oubliez pas de retirer l’attribut controls de votre lecteur audio ou vidéo si vous ne désirez pas avoir vos boutons en double.

Afin de contrôler un lecteur, il faut premièrement stocker une référence lui correspondant dans une variable.

Par exemple, si nous avons une vidéo:

<video src=”video.mp4” class=”video”>

Il serait possible de faire

const video = document.querySelector('.video');

Attention de ne pas confondre la balise et le nom de classe.

Pour en savoir plus, voir cet article MDN🦖 sur les HTMLMediaElement

Play/Pause ⏯️

Les fonctions play et pause permettent de démarrer et d’arrêter la lecture via:

video.play();

ou

video.pause();

Il est donc possible de déclencher ces actions au moment souhaité. Par exemple, lorsqu’un bouton est appuyé.

Voir le CodePen de Simon Arnold (@smnarnold).

Attention, les navigateurs remarqueront si vous tentez de démarrer une vidéo en JavaScript au chargement de la page pour recréer le comportement autoplay et bloqueront cette action.

Une bonne pratique de garder le statut de la vidéo dans une variable afin de pouvoir y faire référence au besoin. Par exemple, pour déterminer quels boutons afficher ▶️⏸️

Si pour quelconque raison, cette information n’est pas disponible via une variable, il est possible de vérifier le statut de la vidéo via

video.paused

qui retournera un boolean true ou false en fonction de si la vidéo est arrêtée ou en train de jouer.

Voir le CodePen de Simon Arnold (@smnarnold).

Ninja Rap 🐢🟧 codepen.io/smnarnold/pen/LYpRJrK

CurrentTime ⌛

Utilisé simplement video.currentTime retourne la position actuelle de la vidéo en secondes. Par exemple, si l’utilisateur a écouté dix secondes au moment ou cette fonction est appelée, elle retournera 10.

Si une valeur lui est attribuée video.currentTime = 0 elle déplacera la position courante de la vidéo à la position correspondante au chiffre en secondes attribué. Dans ce cas-ci, la vidéo retournera au début, puisque le temps attribué est 0.

Voir le CodePen de Simon Arnold (@smnarnold).

Cette technique, combiné à la fonction pause est particulièrement utile pour recréer le comportement "stop" ⏹️.

Duration

La fonction video.duration retourne la durée de la vidéo en secondes. Donc si une vidéo dure dix secondes, cette fonction retournera 10.

Voir le CodePen de Simon Arnold (@smnarnold).

Diviser le currentTime par la duration est particulièrement utile afin d'obtenir une fraction correspondant à l'avancement de la vidéo. Ainsi, il est possible de synchroniser des animations, par exemple une barre de progrès, avec la vidéo.

PlaybackRate

Utilisé simplement video.playbackRate retourne le vitesse de lecture de la vidéo sous forme d’un chiffre allant de 0 à 16. Par exemple, si l’utilisateur écoute sa vidéo à la vitesse normale, son playback rate est des 1.

Si une valeur lui est attribuée video.playbackRate = 5 elle ajustera la vitesse de lecture en fonction de cette nouvelle valeur. Dans ce cas-ci, la vidéo jouera 5x plus rapidement.

Voir le CodePen de Simon Arnold (@smnarnold).

Numéro 8️⃣ 🦅 codepen.io/smnarnold/pen/MWjgReZ

Pour en savoir plus, voir cet article de MDN🦖 sur playbackRate

Volume 🎚️

Utilisé simplement video.volume retourne le volume actuel de la vidéo sous forme d’un chiffre allant de 0 à 1. Par exemple, si l’utilisateur écoute sa vidéo à la moitié du volume, cette fonction retournera 0.5.

Si une valeur lui est attribuée video.volume = 1 elle ajustera le volume en fonction de cette nouvelle valeur. Dans ce cas-ci, la vidéo jouera le plus fort possible.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour en savoir plus, voir cet article MDN🦖 sur l'option volume

Événements

Il est possible d'écouter plusieurs événements sur les lecteurs audio/vidéo.

Notamment:

  • canplay déclenché lorsque le lecteur est prêt à jouer.
  • pause déclenché lorsque le lecteur arrête de jouer.
  • play déclenché lorsque le lecteur commence à jouer.
  • timeupdate déclenché à chaque fois que la valeur de currentTime change.
  • ended déclenché lorsque la lecture du média est complétée.

Les exemples des sections currentTime et duration utilisent l'événement timeupdate afin de se déclencher à chaque fois que la vidéo progresse.

Pour connaître tous les événements liés aux lecteurs audio et vidéo, voir cet article sur MDN🦖

Audio

L'élément audio peut-être créé directement en JavaScript sans avoir de balise HTML associée de la sorte:

const audio = new Audio('audio.mp3');

Voir le CodePen de Simon Arnold (@smnarnold).

Cette approche est particulièrement utile pour gérer les sons ponctuels.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme