HTMLMediaElement: srcObject-Eigenschaft

Eingeschrnkt verfgbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die srcObject-Eigenschaft des HTMLMediaElement Interfaces setzt oder gibt das Objekt zurck, das als Quelle des Medieninhalts dient, der mit dem HTMLMediaElement verknpft ist, oder null falls nicht zugewiesen.

Das Objekt kann ein MediaStream, eine MediaSource, ein Blob oder eine File (die von Blob erbt) sein.

Hinweis: Ab Mrz 2020 bietet nur Safari volle Untersttzung fr srcObject, d.h. die Verwendung von MediaSource, MediaStream, Blob und File Objekten als Werte. Andere Browser untersttzen MediaStream Objekte; bis sie aufgeholt haben, ziehen Sie in Betracht, eine URL mit URL.createObjectURL() zu erstellen und diese der HTMLMediaElement.src zuzuweisen (siehe unten fr ein Beispiel). Darber hinaus untersttzt ab Version 108 Chromium das Anfgen eines dedizierten Worker-MediaSource-Objekts, indem die MediaSourceHandle-Instanz dieses Objekts (bertragen vom Worker) an srcObject zugewiesen wird.

Wert

Ein MediaStream, MediaSource, Blob oder File Objekt (siehe jedoch die Kompatibilittstabelle fr tatschlich untersttzte Formate), oder null falls nicht zugewiesen.

Nutzungshinweise

ltere Versionen der Media Source-Spezifikation erforderten die Verwendung von URL.createObjectURL(), um eine Objekt-URL zu erstellen, die dann auf src gesetzt wurde. Jetzt knnen Sie einfach srcObject direkt auf den MediaStream setzen.

Beispiele

Einfaches Beispiel

In diesem Beispiel wird ein MediaStream von einer Kamera einem neu erstellten <video>-Element zugewiesen.

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
video.srcObject = mediaStream;

In diesem Beispiel wird eine neue MediaSource einem neu erstellten <video>-Element zugewiesen.

const mediaSource = new MediaSource();
const video = document.createElement("video");
video.srcObject = mediaSource;

Untersttzung des Rckfalls auf die src-Eigenschaft

Die folgenden Beispiele untersttzen ltere Browserversionen, die erfordern, dass Sie eine Objekt-URL erstellen und sie src zuweisen, falls srcObject nicht untersttzt wird.

Zuerst wird ein MediaStream von einer Kamera einem neu erstellten <video>-Element zugewiesen, mit einem Rckfall fr ltere Browser.

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
if ("srcObject" in video) {
  video.srcObject = mediaStream;
} else {
  // Avoid using this in new browsers, as it is going away.
  video.src = URL.createObjectURL(mediaStream);
}

Zweitens wird eine neue MediaSource einem neu erstellten <video>-Element zugewiesen, mit einem Rckfall fr ltere Browser und Browser, die die direkte Zuweisung von MediaSource noch nicht untersttzen.

const mediaSource = new MediaSource();
const video = document.createElement("video");
// Older browsers may not have srcObject
if ("srcObject" in video) {
  try {
    video.srcObject = mediaSource;
  } catch (err) {
    if (err.name !== "TypeError") {
      throw err;
    }
    // Even if they do, they may only support MediaStream
    video.src = URL.createObjectURL(mediaSource);
  }
} else {
  video.src = URL.createObjectURL(mediaSource);
}

Konstruktion einer `MediaSource` in einem Worker und bergabe an den Haupt-Thread zum Abspielen

Die MediaSource.handle-Eigenschaft kann innerhalb eines dedizierten Workers zugegriffen werden und das resultierende MediaSourceHandle-Objekt wird dann ber einen postMessage() Aufruf an den Thread bertragen, der den Worker erstellt hat (in diesem Fall der Haupt-Thread):

// Inside dedicated worker
let mediaSource = new MediaSource();
let handle = mediaSource.handle;
// Transfer the handle to the context that created the worker
postMessage({ arg: handle }, [handle]);

mediaSource.addEventListener("sourceopen", () => {
  // Await sourceopen on MediaSource before creating SourceBuffers
  // and populating them with fetched media  MediaSource won't
  // accept creation of SourceBuffers until it is attached to the
  // HTMLMediaElement and its readyState is "open"
});

Im Haupt-Thread erhalten wir den Handle ber einen message-Ereignishandler, fgen ihn ber seine HTMLMediaElement.srcObject-Eigenschaft an ein <video>-Element an und spielen das Video mit play ab:

worker.addEventListener("message", (msg) => {
  let mediaSourceHandle = msg.data.arg;
  video.srcObject = mediaSourceHandle;
  video.play();
});

Hinweis:>MediaSourceHandles knnen nicht erfolgreich in oder ber einen Shared Worker oder Service Worker bertragen werden.

Spezifikationen

Spezifikation
HTML # dom-media-srcobject-dev
Media Source Extensions # htmlmediaelement-extensions-srcobject

Browser-Kompatibilitt

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden