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.

EventTarget MediaSource

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 objets SourceBuffer associés à ce MediaSource.

MediaSource.activeSourceBuffers Lecture seule

Renvoie un objet SourceBufferList contenant un sous-ensemble des objets SourceBuffer contenus dans MediaSource.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 objets SourceBuffer (ouvert), ou attachée mais le flux a été terminé via MediaSource.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 liste MediaSource.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 liste MediaSource.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 objets SourceBuffer 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).

js
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

Voir aussi