Les éléments audio et vidéo HTML vous permettent de charger, de décoder et de lire des contenus multimédias en fournissant simplement une URL src:
<video src='foo.webm'></video>
Cela fonctionne bien dans les cas d'utilisation simples, mais pour des techniques telles que le streaming adaptatif, l'API MSE (Media Source Extensions) offre plus de contrôle. MSE permet de créer des flux en JavaScript à partir de segments audio ou vidéo.
Vous pouvez essayer MSE sur simpl.info/mse :
Le code ci-dessous provient de cet exemple.
Un MediaSource représente une source de contenu multimédia pour un élément audio ou vidéo. Une fois qu'un objet MediaSource est instancié et que son événement open s'est déclenché, vous pouvez y ajouter des SourceBuffer. Ils servent de tampons pour les segments multimédias :
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer =
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// Get video segments and append them to sourceBuffer.
}
Les segments multimédias sont "streamés" vers un élément audio ou vidéo en ajoutant chaque segment à un SourceBuffer avec appendBuffer(). Dans cet exemple, la vidéo est récupérée sur le serveur, puis stockée à l'aide des API File :
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk(++i);
}
};
Définir l'ordre de lecture
Chrome 50 ajoute une compatibilité supplémentaire à l'attribut mode SourceBuffer, ce qui vous permet de spécifier que les segments multimédias sont lus en continu, dans l'ordre dans lequel ils ont été ajoutés, que les segments multimédias aient initialement des codes temporels discontinus ou non.
Utilisez l'attribut mode pour spécifier l'ordre de lecture des segments multimédias. Il peut avoir l'une des deux valeurs suivantes :
- segments : l'horodatage de chaque segment (qui peut avoir été modifié par
timestampOffset) détermine l'ordre de lecture, quel que soit l'ordre dans lequel les segments sont ajoutés. - Sequence: l'ordre des segments mis en mémoire tampon dans la timeline multimédia est déterminé par l'ordre dans lequel les segments sont ajoutés à
SourceBuffer.
Si les segments multimédias comportent des codes temporels analysés à partir des données de flux d'octets lorsqu'ils sont ajoutés à SourceBuffer, la propriété mode de SourceBuffer est définie sur segments. Sinon, mode sera défini sur sequence. Notez que les codes temporels ne sont pas facultatifs : ils doivent être présents pour la plupart des types de flux, et ne doivent pas l'être pour d'autres : les codes temporels en bande sont inhérents aux types de flux qui les contiennent.
La définition de l'attribut mode est facultative. Pour les flux qui ne contiennent pas de codes temporels (audio/mpeg et audio/aac), mode ne peut être modifié que de segments en séquence : une erreur est générée si vous essayez de modifier mode de séquence en segments. Pour les flux comportant des codes temporels, il est possible de basculer entre les segments et la séquence, mais en pratique, cela entraînerait probablement un comportement indésirable, difficile à comprendre ou à prévoir.
Pour tous les types de flux, vous pouvez remplacer la valeur segments par séquence. Cela signifie que les segments seront lus dans l'ordre dans lequel ils ont été ajoutés et que de nouveaux codes temporels seront générés en conséquence:
sourceBuffer.mode = 'sequence';
La possibilité de définir la valeur mode sur sequence garantit la lecture continue des contenus multimédias, même si les codes temporels des segments multimédias sont discontinus (par exemple, en cas de problèmes de multiplexage vidéo ou si, pour une raison quelconque, des segments discontinus sont ajoutés). Une application peut effectuer un polyfill avec timestampOffset pour assurer la lecture continue, si les métadonnées de flux appropriées sont disponibles, mais le mode séquence simplifie et réduit le risque d'erreurs.
Applications et démonstrations MSE
Ces exemples montrent la MSE en action, mais sans manipulation de SourceBuffer.mode :
- API Media Source
- Shaka Player: démonstration de lecteur vidéo qui utilise MSE pour implémenter DASH avec la bibliothèque JavaScript Shaka
Prise en charge des navigateurs
- Chrome 50 ou version ultérieure par défaut
- Pour Firefox, consultez MDN pour en savoir plus.