HTMLMediaElement: srcObject 屬性
HTMLMediaElement 介面的 srcObject 屬性用於設定或返回與 HTMLMediaElement 關聯的媒體源物件，如果未賦值則為 null。
該物件可以是 MediaStream、MediaSource、Blob 或 File（繼承自 Blob）。
注意：截至 2020 年 3 月，只有 Safari 完全支援 srcObject，即支援使用 MediaSource、MediaStream、Blob 和 File 物件作為值。其他瀏覽器支援 MediaStream 物件；在它們趕上之前，請考慮回退到使用 URL.createObjectURL() 建立 URL 並將其分配給 HTMLMediaElement.src（示例如下）。此外，截至 Chromium 108 版本，可以透過將專用工作執行緒 MediaSource 物件的 MediaSourceHandle 例項（從工作執行緒傳輸過來）分配給 srcObject 來附加一個專用的工作執行緒 MediaSource 物件。
值
一個 MediaStream、MediaSource、Blob 或 File 物件（但請檢視相容性表格瞭解實際支援的情況），或者在未賦值時為 null。
用法說明
媒體源規範的舊版本要求使用 URL.createObjectURL() 來建立一個物件 URL，然後將 src 設定為該 URL。現在您只需將 srcObject 直接設定為 MediaStream。
示例
基本示例
在此示例中，來自攝像頭的 MediaStream 被分配給新建立的 <video> 元素。
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true });
const video = document.createElement("video");
video.srcObject = mediaStream;
在此示例中，新的 MediaSource 被分配給新建立的 <video> 元素。
const mediaSource = new MediaSource();
const video = document.createElement("video");
video.srcObject = mediaSource;
支援回退到 src 屬性
下面的示例支援舊版本瀏覽器，這些瀏覽器要求您在 srcObject 不受支援時建立一個物件 URL 並將其分配給 src。
首先，來自攝像頭的 MediaStream 被分配給新建立的 <video> 元素，併為舊版瀏覽器提供回退支援。
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);
}
其次，新的 MediaSource 被分配給新建立的 <video> 元素，併為舊版瀏覽器以及尚不支援直接分配 MediaSource 的瀏覽器提供回退支援。
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);
}
在工作執行緒中構建 MediaSource 並將其傳遞到主執行緒播放
MediaSource.handle 屬性可以在專用工作執行緒中訪問，然後透過 postMessage() 呼叫將生成的 MediaSourceHandle 物件傳輸到建立工作執行緒的執行緒（在本例中為主執行緒）。
// 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"
});
在主執行緒中，我們透過 message 事件處理程式接收控制代碼，透過其 HTMLMediaElement.srcObject 屬性將其附加到 <video> 元素，然後 play 影片。
worker.addEventListener("message", (msg) => {
let mediaSourceHandle = msg.data.arg;
video.srcObject = mediaSourceHandle;
video.play();
});
注意： MediaSourceHandle 無法成功傳輸到共享工作執行緒或服務工作執行緒中，或透過它們進行傳輸。
規範
| 規範 |
|---|
| HTML # dom-media-srcobject-dev |
| Media Source Extensions™ # htmlmediaelement-extensions-srcobject |
瀏覽器相容性
載入中…