HTMLMediaElement: свойство srcObject
Ограниченная доступность
Эта функция не относится к базовому уровню, так как она не работает во всех широко используемых браузерах.
Свойство srcObject интерфейса HTMLMediaElement задаёт или возвращает объект, который служит источником медиа, связанного с HTMLMediaElement, или null, если он не назначен.
Объект может быть MediaStream, MediaSource, Blob или File (который наследуется от Blob).
Примечание: По состоянию на март 2020 года только Safari полностью поддерживает srcObject, т.е. использование MediaSource, MediaStream, Blob, и File объектов в качестве значений. Другие браузеры поддерживают MediaStream объекты; до тех пор, пока они не догонят, рассмотрите возможность использования создания URL с помощью URL.createObjectURL() и присвоения его HTMLMediaElement.src (пример ниже). Кроме того, начиная с версии 108 Chromium поддерживает подключение отдельного рабочего MediaSource объекта путём присвоения экземпляра MediaSourceHandle этого объекта (переданного из рабочего процесса) свойству srcObject.
Значение
Объект MediaStream, MediaSource, Blob или File (хотя см. таблицу совместимости для фактически поддерживаемых значений), или null если не назначен.
Примечания по использованию
Более старые версии спецификации Media Source требовали использования 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
Примеры ниже поддерживают более старые версии браузеров, которые требуют создания URL объекта и его назначения свойству src если srcObject не поддерживается.
Сначала 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 может быть использовано внутри отдельного рабочего процесса, а полученный объект MediaSourceHandle затем передаётся в поток, создавший рабочий процесс (в данном случае, основной поток) с помощью вызова postMessage():
// 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, присоединяем его к элементу <video> через его свойство HTMLMediaElement.srcObject, и play видео:
worker.addEventListener("message", (msg) => {
let mediaSourceHandle = msg.data.arg;
video.srcObject = mediaSourceHandle;
video.play();
});
Примечание: MediaSourceHandle не могут быть успешно переданы в или через общий рабочий процесс или рабочий процесс сервиса.
Спецификации
| Спецификация |
|---|
| HTML # dom-media-srcobject-dev |
| Расширения Media Source™ # htmlmediaelement-extensions-srcobject |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
srcObject |
108Поддержка добавлена дляMediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101). |
108Поддержка добавлена дляMediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101). |
18–58 |
94Поддержка добавлена дляMediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101). |
11 |
108Поддержка добавлена дляMediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101). |
18–58 |
73Поддержка добавлена дляMediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101). |
11 |
21.0Поддержка добавлена дляMediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101). |
108Поддержка добавлена дляMediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101). |
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject