Spec-Zone.ru › Web APIs

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).
52Поддержка добавлена для MediaStream объектов (см. баг 41186131).
108Поддержка добавлена для MediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101).
79Поддержка добавлена для MediaStream объектов (см. баг 41186131).
42Поддерживаются только MediaStream объекты (см. баг 886194).
18–58
94Поддержка добавлена для MediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101).
39Поддержка добавлена для MediaStream объектов (см. баг 41186131).
11
108Поддержка добавлена для MediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101).
52Поддержка добавлена для MediaStream объектов (см. баг 41186131).
42Поддерживаются только MediaStream объекты (см. баг 886194).
18–58
73Поддержка добавлена для MediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101).
41Поддержка добавлена для MediaStream объектов (см. баг 41186131).
11
21.0Поддержка добавлена для MediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101).
6.0Поддержка добавлена для MediaStream объектов (см. баг 41186131).
108Поддержка добавлена для MediaSourceHandle объектов, переданных из отдельных рабочих процессов, где они были получены из MediaSource.handle (см. баг 40591101).
52Поддержка добавлена для MediaStream объектов (см. баг 41186131).

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API