MediaSource
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
L'interface MediaSource
de l'API Media Source Extensions représente une source de données multimédia pour un objet HTMLMediaElement
. Un objet MediaSource
peut être attaché à un HTMLMediaElement
pour être lu dans l'agent utilisateur.
Constructeur
MediaSource()
-
Construit et renvoie un nouvel objet
MediaSource
sans tampon source associé.
Propriétés
MediaSource.sourceBuffers
Lecture seule-
Renvoie un objet
SourceBufferList
contenant la liste des objetsSourceBuffer
associés à ceMediaSource
. MediaSource.activeSourceBuffers
Lecture seule-
Renvoie un objet
SourceBufferList
contenant un sous-ensemble des objetsSourceBuffer
contenus dansMediaSource.sourceBuffers
— la liste des objets fournissant la piste vidéo sélectionnée, pistes audio activées et pistes de texte affichées / masquées. MediaSource.readyState
Lecture seule-
Renvoie une énumération représentant l'état de la
MediaSource
actuelle, qu'elle ne soit pas actuellement attachée à un élément multimédia (fermé
), attachée et prête à recevoir des objetsSourceBuffer
(ouvert
), ou attachée mais le flux a été terminé viaMediaSource.endOfStream()
(terminé
). MediaSource.duration
-
Obtient et définit la durée du média actuel présenté.
Gestionnaires d'événements
MediaSource.onsourceclose
-
Le gestionnaire d'événements pour l'événement
sourceclose
. MediaSource.onsourceended
-
Le gestionnaire d'événements pour l'événement
sourceended
. MediaSource.onsourceopen
-
Le gestionnaire d'événements pour l'événement
sourceopen
.
Méthodes
Hérite des méthodes de son interface parente, EventTarget
.
MediaSource.addSourceBuffer()
-
Crée un nouveau
SourceBuffer
du type MIME donné et l'ajoute à la listeMediaSource.sourceBuffers
. MediaSource.clearLiveSeekableRange()
-
Efface un ensemble privé de plage de recherche avec un appel à
setLiveSeekableRange()
. MediaSource.endOfStream()
-
Signale la fin du flux.
MediaSource.removeSourceBuffer()
-
Supprime le
SourceBuffer
donné de la listeMediaSource.sourceBuffers
. MediaSource.setLiveSeekableRange()
-
Définit la plage que l'utilisateur peut rechercher dans l'élément multimédia.
Méthodes statiques
MediaSource.isTypeSupported()
-
Renvoie une valeur
Boolean
indiquant si le type MIME donné est pris en charge par l'agent utilisateur actuel - c'est-à-dire s'il parvient à créer des objetsSourceBuffer
pour ce type MIME .
Exemples
L'exemple simple suivant charge une vidéo avec XMLHttpRequest
et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être consulté en direct ici (vous pouvez aussi télécharger la source pour une enquête plus approfondie).
var video = document.querySelector("video");
var assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource();
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
console.error("Unsupported MIME type or codec: ", mimeCodec);
}
function sourceOpen(_) {
//console.log(this.readyState); // open
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener("updateend", function (_) {
mediaSource.endOfStream();
video.play();
//console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
}
function fetchAB(url, cb) {
console.log(url);
var xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
}
Spécifications
Specification |
---|
Media Source Extensions™ # mediasource |
Compatibilité des navigateurs
BCD tables only load in the browser