Interactions entre Javascript et les balises audio et video de HTML5

Il existe de légers frameworks Javascript permettant d’intégrer rapidement des lectures disposant de tous ces contrôles et étant même personnalisables très facilement sur le thème et le look.

Contrôle de la lecture

HTML 5 permet d’intégrer un lecteur audio / vidéo via les balises <audio> et <video>. Voir l’article audio_video. Javascript peut contrôler ces deux éléments.

// Accéder à l'élément HTMLMediaElement
let player = document.querySelector("#audioPlayer");
 
// Lancer la lecture & mettre en pause
player.play();
player.pause();
 
// Pas de fonction stop, il faut faire pause et forcer le retour au début de la piste
player.pause();
player.currentTime = 0;
 
// Changement du volume, de 0 (muet) à 1 (maximum)
player.volume = 0.5;

Barre de progression et timer

HTML 5 dispose de l’élément <progress> mais ce dernier ne fonctionnant qu’avec Firefox et Chrome et étant difficilement personnalisable en CSS, on peut préférer l’utilisation de <div> et utiliser l’événement ontimeupdate qui va détecter quand le média est en lecture.

<!-- Lecture avec l'événement qui suit la lecture -->
<audio id="audioPlayer" ontimeupdate="update(this)">
 
<!-- Barre de progression -->
<div>
    <div id="progressBarControl">
        <div id="progressBar">Pas de lecture</div>
    </div>
</div>

// Fonction de mise à jour de la progression
function update(player) {
    var duration = player.duration;    // Durée totale
    var time     = player.currentTime; // Temps écoulé
    var fraction = time / duration;
    var percent  = Math.ceil(fraction * 100);
    var progress = document.querySelector('#progressBar');
 
    progress.style.width = percent + '%';
    progress.textContent = percent + '%';
}

On récupère ainsi le temps total, le temps écoulé, on détermine le pourcentage écoulé et l’on fait avancer la barre de progression en conséquence. Ceci est encore plus personnalisable en faisant progresser en couleur de fonds par exemple plutôt que d’afficher le pourcentage de progression.

On peut également afficher dès le départ le temps total de la piste et également afficher au fur-et-à-mesure de la lecture le temps écoulé, et même le temps restant.

La barre de progression pourrait même être rendue cliquable pour que l’internaute puisse cliquer là où il veut avancer / reculer la lecture. Ceci est compliqué car il faut détecter où l’on a cliqué (coordonnées X et Y de la souris), et il faut donc connaître les coordonnées de la barre de progression.

// Affichage du temps écoulé (on utilise currentTime qui indique les secondes écoulés, avec décimales). On fait donc des arrondis et voici un code à placer dans la fonction update()
function formatTime(time) {
    var hours = Math.floor(time / 3600);
    var mins  = Math.floor((time % 3600) / 60);
    var secs  = Math.floor(time % 60);
 
    if (secs < 10) {
        secs = "0" + secs;
    }
 
    if (hours) {
        if (mins < 10) {
            mins = "0" + mins;
        }
 
        return hours + ":" + mins + ":" + secs; // hh:mm:ss
    } else {
        return mins + ":" + secs; // mm:ss
    }
}

Spécificités pour la vidéo

L’objet HTMLMediaElement dispose de quelques propriétés supplémentaires pour la vidéo :

• player.height : Hauteur de la zone de lecture.
• player.width : Largeur de la zone de lecture.
• player.poster : Récupère l’attribut poster.
• player.videoHeight : La hauteur de la vidéo.
• player.videoWidth : La largeur de la vidéo.