On peut distribuer de l'audio et de la vidéo sur le web de plusieurs manières, du fichier média statique au live stream (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.
Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments <audio> et <video>. Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants :
Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit :
<video>, ou peut-être via JavaScript avec document.createElement('video')) ;<audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback pour les navigateurs qui ne supportent pas mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback pour les navigateurs qui ne supportent pas la balise audio --> <a href="audiofile.mp3">Télécharger l'audio</a> </audio>
Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecture fluide.
Note : l'attribut preload peut être ignoré par certains navigateurs mobiles.
Pour plus d'informations voir Les bases de l'audio multi-navigateur (Audio HTML5 en détails)
<video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback pour les navigateurs qui ne supportent pas mp4 --> <source src="videofile.webm" type="video/webm"> <!-- spécifie les fichiers de sous-titres --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> <!-- fallback pour les navigateurs qui ne supportent pas la balise video --> <a href="videofile.mp4">Télécharger la vidéo</a> </video>
Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une vignette jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en autoplay (jouer automatiquement) mais d'être muted (en sourdine) par défaut.
Note : l'attribut autoplay peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire le guide à ce sujet pour savoir comment l'utiliser pertinemment.
Pour plus d'informations voir l'article de référence sur l'élément <video> et la page sur la création d'un lecteur vidéo multi-navigateur.
const myAudio = document.createElement('audio');
if (myAudio.canPlayType('audio/mpeg')) {
myAudio.setAttribute('src','audiofile.mp3');
} else if (myAudio.canPlayType('audio/ogg')) {
myAudio.setAttribute('src','audiofile.ogg');
}
myAudio.currentTime = 5;
myAudio.play();
On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis nous plaçons la tête de lecture à 5 secondes et essayons de lire le fichier.
Note : play() sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site.
Il est également possible de donner un fichier WAV encodé en base64 à l'élément <audio>, permettant ainsi de générer de l'audio à la volée :
<audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio>
Speak.js emploie cette technique. Essayez la démo.
const myVideo = document.createElement('video');
if (myVideo.canPlayType('video/mp4')) {
myVideo.setAttribute('src','videofile.mp4');
} else if (myVideo.canPlayType('video/webm')) {
myVideo.setAttribute('src','videofile.webm');
}
myVideo.width = 480;
myVideo.height = 320;
On définit la source de la vidéo en fonction du type de fichier vidéo pris en charge par le navigateur, puis on définit la largeur et la hauteur de la vidéo.
let context;
let request;
let source;
try {
context = new AudioContext();
request = new XMLHttpRequest();
request.open("GET","https://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true);
request.responseType = "arraybuffer";
request.onload = function() {
context.decodeAudioData(request.response, function(buffer) {
source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
// auto play
source.start(0); // start était précédemment intitulé noteOn
});
};
request.send();
} catch(e) {
console.error(`L'API Web Audio n'est pas prise en charge`);
}
Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (essayez par vous-même). Pour en savoir plus sur l'API Web Audio voir Utiliser l'API Web Audio.
Il est également possible de récupérer un live stream de la webcam et/ou du microphone de la personne consultant le site avec getUserMedia et l'API Stream. Cela fait partie d'une technologie plus largement connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.
Pour récupérer un flux de la webcam, commençons par créer un élément <video> :
<video id="webcam" width="480" height="360"></video>
Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video :
if (navigator.mediaDevices) {
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function onSuccess(stream) {
const video = document.getElementById('webcam');
video.autoplay = true;
video.srcObject = stream;
})
.catch(function onError() {
console.error(`Problème de récupération des flux : utilisez-vous une page avec file:/// ou avez-vous décliné la permission ?`);
});
} else {
console.error(`getUserMedia n'est pas pris en charge par ce navigateur.`);
}
Pour en savoir plus, lisez la page MediaDevices.getUserMedia.
De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant getUserMedia — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par getUserMedia, on le donne en paramètre à un objet MediaRecorder, puis on utilise le résultat obtenu comme source audio ou video.
Le principe de base est décrit ci-après :
navigator.mediaDevices.getUserMedia({audio:true})
.then(function onSuccess(stream) {
const recorder = new MediaRecorder(stream);
const data = [];
recorder.ondataavailable = function(e) {
data.push(e.data);
};
recorder.start();
recorder.onerror = function(e) {
throw e.error || new Error(e.name); // e.name est utilisé pour Firefox
}
recorder.onstop = function(e) {
const audio = document.createElement('audio');
audio.src = window.URL.createObjectURL(new Blob(data));
}
setTimeout(function() {
rec.stop();
}, 5000);
})
.catch(function onError(error) {
console.log(error.message);
});
Voir l'API MediaRecorder pour plus de détails.
Media Source Extensions (MSE ou « extensions pour les sources de média ») est un brouillon de travail (Working Draft en anglais) du W3C qui prévoit d'étendre HTMLMediaElement pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct.
Encrypted Media Extensions (EME ou « extensions pour les médias chiffrés ») est une proposition du W3C d'étendre HTMLMediaElement en fournissant des API pour contrôler la lecture de contenu protégé.
L'API prend en charge divers cas d'utilisation, allant du simple déchiffrement par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui prennent en charge différentes technologies de déchiffrement et de protection de contenu. Un des principaux usages d'EME est de permettre au navigateur d'implémenter la gestion des DRM (Digital Rights Management).
De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter la diffusion adaptative. Une diffusion adaptative est un flux en direct qui s'adapte à la bande passante disponible de la personne utilisant le site. Typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. La diffusion adaptative est souvent utilisée en conjonction avec le live streaming, où une diffusion fluide de l'audio et vidéo est primordiale.
Les principaux encodages utilisés pour le streaming adaptatif sont HLS et MPEG-DASH. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon ISOBMFF et M2TS (deux formats pris en charge par DASH, le dernier étant également pris en charge par HLS). DASH est probablement la meilleure option en termes de compatibilité, standard et flexibilité.
Note : actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.
DASH fournit également un certain nombre de profils, y compris des profils à la demande simples, sans pré-traitement ni séparation des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.
Pour plus d'informations, voir Live streaming web Audio et Vidéo.
Vous pouvez vouloir un lecteur audio ou vidéo qui ait le même aspect sur tous les navigateurs, ou simplement vouloir l'adapter à votre site. La technique générale pour y parvenir est d'omettre l'attribut controls afin que les contrôles par défaut du navigateur ne s'affichent pas, et de créer vos propres contrôles en HTML et CSS, avec du JavaScript pour lier vos contrôles à l'API audio/vidéo.
Si vous avez besoin d'aller plus loin, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progression sous certaines conditions.
Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour la personne utilisant le lecteur média.
Un exemple rapide — d'abord, configurez votre audio et vos contrôles personnalisés en HTML:
<audio id="my-audio" src="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio> <button id="my-control">play</button>
Ensuite, ajoutez un peu de JavaScript pour détecter les événements afin de lire et de mettre en pause l'audio:
window.onload = function() {
const myAudio = document.getElementById('my-audio');
const myControl = document.getElementById('my-control');
function switchState() {
if (myAudio.paused == true) {
myAudio.play();
myControl.textContent = "pause";
} else {
myAudio.pause();
myControl.textContent = "play";
}
}
function checkKey(e) {
if (e.keycode == 32 ) { //spacebar
switchState();
}
}
myControl.addEventListener('click', function() {
switchState();
}, false);
window.addEventListener( "keypress", checkKey, false );
}
Vous pouvez essayer cet exemple ici. Pour plus d'informations, voir Créer votre propre lecteur audio.
Bien qu'il suffit d'utiliser la méthode pause() pour interrompre la lecture d'un média, le navigateur continue de télécharger le média jusqu'à ce que l'élément correspondant soit nettoyé par le ramasse-miettes.
Voici une astuce qui permet d'arrêter le téléchargement :
const mediaElement = document.querySelector("#monIDdeMedia");
mediaElement.removeAttribute("src");
mediaElement.load();
En supprimant l'attribut src de l'élément et en invoquant la méthode load(), on libère les ressources associées à la vidéo, ce qui entraîne l'arrêt du téléchargement. Il est nécessaire d'invoquer load() après le retrait de l'attribut, car sa simple suppression ne relance pas l'algorithme chargement. Si l'élément <video> dispose également d'éléments descendants <source>, ceux-ci devraient également être supprimés avant l'appel à load().
Si on définit l'attribut src avec une chaîne vide, le navigateur considèrera la source comme un chemin relatif et cela déclenchera une tentative d'un autre téléchargement à partir d'une source qui n'est probablement pas une vidéo valide.
Les éléments média permettent de placer le curseur de lecture à des instants spécifiques du contenu. Pour cela, on ajustera la propriété currentTime de l'élément (voir HTMLMediaElement pour plus de détails)
La propriété seekable de l'élément peut être utilisée afin de déterminer les intervalles disponibles pour de tels déplacements. Cette propriété renvoie un objet TimeRanges contenant les intervalles temporels accessibles.
const mediaElement = document.querySelector('#mediaElementID');
mediaElement.seekable.start(0); // Renvoie l'instant de départ (en secondes)
mediaElement.seekable.end(0); // Renvoie l'instant de fin (en secondes)
mediaElement.currentTime = 122; // Déplace la lecture à 122 secondes
mediaElement.played.end(0); // Renvoie le nombre de secondes lues par le navigateur
Lors de la définition de l'URI du média d'un élément <audio> ou <video>, il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média.
Un intervalle temporel se définit avec la syntaxe suivante :
#t=[tempsdebut][,tempsfin]
La valeur temporelle peut être définie en nombre de secondes (avec une valeur décimale) ou avec un horodatage en heures/minutes/secondes avec un deux-points comme séparateur (par exemple 2:05:01 pour indiquer 2 heures, 5 minutes et 1 seconde).
Voici quelques exemples :
https://example.com/video.ogv#t=10,20https://example.com/video.ogv#t=,10.5https://example.com/video.ogv#t=,02:00:00https://example.com/video.ogv#t=60Vous rencontrez des problèmes de lecture audio ou vidéo ? Vérifiez les différents points qui suivent.
Utilisez les fichiers suivants pour vérifier le support de votre format:
type="audio/mpeg") : https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3 (audio MP3 en direct)type="audio/mp4") : https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a (audio MP4 en direct)type="audio/ogg") : https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg (audio OGG en direct)type="video/mp4") : https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v (vidéo MP4 en direct)type="video/webm") : https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm (vidéo WebM en direct)type="video/ogg") : https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv (vidéo OGG en direct)Si un de ces fichiers n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Vous pouvez utiliser un format différent ou un contenu de secours.
Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux explications possibles, que nous verrons ci-après.
Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier .htaccess :
# AddType TYPE/SUBTYPE EXTENSION AddType audio/mpeg mp3 AddType audio/mp4 m4a AddType audio/ogg ogg AddType audio/ogg oga AddType video/mp4 mp4 AddType video/mp4 m4v AddType video/ogg ogv AddType video/webm webm AddType video/webm webmv
Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables :
Il existe une autre méthode pour présenter du contenu alternatif lorsqu'aucune des ressources n'a pu être décodée par le navigateur. Celle-ci consiste à ajouter un gestionnaire d'erreur sur le dernier élément source et d'utiliser celui-ci afin de remplacer l'élément par son contenu alternatif :
<video controls>
<source src="dynamicsearch.mp4" type="video/mp4"></source>
<a href="dynamicsearch.mp4">
<img src="dynamicsearch.jpg" alt="Recherche sur une application">
</a>
<p>Cliquez sur l'image pour voir une vidéo de démonstration</p>
</video>
let v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
const d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
}, false);
Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments <track> pour les sous-titres peuvent également être fournies par les bibliothèques média.
<video><audio> ou <video> sans attendre — un bon exemple d'application est la barre de progression mise en mémoire tampon d'un fichier audio ou vidéo. Cet article présente la construction d'une barre de recherche et mise en mémoire tampon en utilisant l'API TimeRanges ainsi que d'autres fonctionnalités de l'API Media.playbackRate proposée par HTML5playbackRate permet de modifier la vitesse ou la fréquence à laquelle un morceau de fichier audio ou vidéo est joué. Cet article l'explique en détails.<video>, en utilisant le format VTT (Video Text Tracks) et l'élément <track>.