This page was translated from English by the community.Learn more and join the MDN Web Docs community.
MediaSource
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
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'sSourceBuffers.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 Codecvar 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 |