Les éléments audio et vidéo HTML vous permettent de charger, de décoder et de lire du contenu multimédia, simplement en fournissant une URL src:
<video src='foo.webm'></video>
Cette approche fonctionne bien dans des cas d'utilisation simples, mais pour des techniques telles que le streaming adaptatif, l'API Media Source Extensions (MSE) offre davantage de contrôle. La MSE permet de créer des flux en JavaScript à partir de segments audio ou vidéo.
Vous pouvez essayer MSE à l'adresse simpl.info/mse:
Le code ci-dessous provient de cet exemple.
Une 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 a été déclenché, des SourceBuffer peuvent y être ajoutés. 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 diffusés en streaming dans un élément audio ou vidéo en ajoutant chaque segment à une SourceBuffer avec appendBuffer(). Dans cet exemple, la vidéo est extraite du 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 est davantage compatible avec l'attribut mode SourceBuffer. Vous pouvez ainsi 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 un horodatage interrompu.
Utilisez l'attribut mode pour spécifier l'ordre de lecture des segments multimédias. Il a l'une des deux valeurs suivantes:
- segments: le code temporel 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 du média est déterminé par l'ordre dans lequel les segments sont ajoutés à la
SourceBuffer.
Si les horodatages des segments multimédias sont analysés à partir des données de flux d'octets lorsqu'ils sont ajoutés à SourceBuffer, la propriété mode de SourceBuffer sera 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 peuvent pas l'être pour d'autres. Les codes temporels intrabande sont intrinsèques aux types de flux qui les contiennent.
La définition de l'attribut mode est facultative. Pour les flux qui ne contiennent pas d'horodatage (audio/mpeg et audio/aac), vous ne pouvez remplacer mode que segments par séquence: une erreur est générée si vous essayez de remplacer mode par segments. Pour les flux comportant des codes temporels, il est possible de basculer entre les segments et la séquence, mais en pratique, cela générerait probablement un comportement indésirable, difficile à comprendre ou difficile à prédire.
Pour tous les types de flux, vous pouvez remplacer la valeur segments par séquence. Les segments sont alors lus dans l'ordre dans lequel ils ont été ajoutés, et les nouveaux codes temporels sont 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, que les horodatages des segments multimédias soient discontinus, par exemple en cas de problème de muxing vidéo ou si des segments discontinus sont ajoutés (pour une raison quelconque). Une application peut polyfill avec timestampOffset pour assurer une lecture continue si les bonnes métadonnées de flux sont disponibles, mais le mode Sequence simplifie le processus et réduit les risques d'erreurs.
Applications et versions de démonstration MSE
Ils montrent la MSE en action, sans manipulation de SourceBuffer.mode:
- API Media Source
- Shaka Player: démonstration du lecteur vidéo utilisant MSE pour implémenter DASH avec la bibliothèque JavaScript Shaka
Prise en charge des navigateurs
- Chrome 50 et versions ultérieures par défaut
- Pour Firefox, consultez la page MDN pour plus d'informations.