MediaSource

MediaSource – это интерфейс Media Source Extensions API для предоставления интерактивного источника медиаданных объектам типа HTMLMediaElement.

Конструктор

MediaSource()

Создаёт и возвращает новый объект MediaSource не имеющий подключённых буферов данных.

Свойства

Наследует свойства родительского интерфейса , EventTarget.

MediaSource.sourceBuffers Только для чтения

Возвращает объект типа SourceBufferList содержащий список объектов типа SourceBuffer , связанных непосредственно с текущим MediaSource.

MediaSource.activeSourceBuffers Только для чтения

Возвращает объект типа SourceBufferList содержащий подмножество объектов типа SourceBuffer хранящих в себе другие объекты типа SourceBuffers — список объектов, предоставляющих доступ к выбранному видео, доступным аудиодорожкам, текстовым данным и тд.

MediaSource.readyState Только для чтения

Возвращает enum, отображающий состояние текущего MediaSource-объекта, будь то отсутствие подключения к медиа-элементу(closed), подключённый и готовый к передаче объектов типа SourceBuffer (open), или подключённый, но с завершённым потоком MediaSource.endOfStream() (ended.)

MediaSource.duration

Возвращает или устанавливает продолжительность предоставляемых медиаданных.

Методы

Наследует свойства родительского интерфейса, EventTarget.

MediaSource.addSourceBuffer()

Создаёт новый объект типа SourceBuffer, с указанным MIME-типом и добавляет в список MediaSource's SourceBuffers.

MediaSource.removeSourceBuffer()

Удаляет указанный SourceBuffer из списка SourceBuffers, связанного с текущим MediaSource-объектом.

MediaSource.endOfStream()

Сигнализирует об окончании потока.

Статичные методы

MediaSource.isTypeSupported()

Возвращает значение Boolean, поясняющее, поддерживается ли клиентом полученный MIME-тип — если это так, то можно успешно создать объект типа SourceBuffer для этого MIME-типа.

Примеры

Нижеприведённый простой пример подгружает видео фрагмент за фрагментом так скоро, как может, воспроизводя их "как только так сразу". Этот пример был написан Nick Desaulniers и может быть просмотрен здесь в виде демо (также вы можете загрузить исходный код для дальнейшего изучения.)

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();
}

Спецификации

Совместимость с браузерами

Смотрите также

• SourceBuffer
• SourceBufferList