MediaSource
Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
MediaSource
– это интерфейс Media Source Extensions API (en-US) для предоставления интерактивного источника медиаданных объектам типа HTMLMediaElement
.
Конструктор
MediaSource()
(en-US)-
Создаёт и возвращает новый объект
MediaSource
не имеющий подключённых буферов данных.
Свойства
Наследует свойства родительского интерфейса , EventTarget
.
MediaSource.sourceBuffers
(en-US) Только для чтения-
Возвращает объект типа
SourceBufferList
(en-US) содержащий список объектов типаSourceBuffer
(en-US) , связанных непосредственно с текущимMediaSource
. MediaSource.activeSourceBuffers
(en-US) Только для чтения-
Возвращает объект типа
SourceBufferList
(en-US) содержащий подмножество объектов типаSourceBuffer
(en-US) хранящих в себе другие объекты типаSourceBuffers
— список объектов, предоставляющих доступ к выбранному видео, доступным аудиодорожкам, текстовым данным и тд. MediaSource.readyState
(en-US) Только для чтения-
Возвращает enum, отображающий состояние текущего
MediaSource-объекта
, будь то отсутствие подключения к медиа-элементу(closed
), подключённый и готовый к передаче объектов типаSourceBuffer
(en-US) (open), или подключённый, но с завершённым потокомMediaSource.endOfStream()
(en-US) (ended
.) MediaSource.duration
(en-US)-
Возвращает или устанавливает продолжительность предоставляемых медиаданных.
Методы
Наследует свойства родительского интерфейса, EventTarget
.
MediaSource.addSourceBuffer()
(en-US)-
Создаёт новый объект типа
SourceBuffer
(en-US), с указанным MIME-типом и добавляет в списокMediaSource
'sSourceBuffers
. MediaSource.removeSourceBuffer()
(en-US)-
Удаляет указанный
SourceBuffer
(en-US) из спискаSourceBuffers
, связанного с текущимMediaSource-объектом
. MediaSource.endOfStream()
(en-US)-
Сигнализирует об окончании потока.
Статичные методы
MediaSource.isTypeSupported()
(en-US)-
Возвращает значение
Boolean
(en-US), поясняющее, поддерживается ли клиентом полученный MIME-тип — если это так, то можно успешно создать объект типаSourceBuffer
(en-US) для этого MIME-типа.
Примеры
Нижеприведённый простой пример подгружает видео фрагмент за фрагментом так скоро, как может, воспроизводя их "как только так сразу". Этот пример был написан Nick Desaulniers и может быть просмотрен здесь в виде демо (также вы можете загрузить исходный код для дальнейшего изучения.)
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();
}
Спецификации
Specification |
---|
Media Source Extensions™ # mediasource |
Совместимость с браузерами
BCD tables only load in the browser