Элементы HTML audio и video позволяют загружать, декодировать и воспроизводить медиа, просто указав URL-адрес источника:
<video src='foo.webm'></video>
Это хорошо работает в простых случаях использования, но для таких методов, как адаптивная потоковая передача , API Media Source Extensions (MSE) обеспечивает больший контроль. MSE позволяет создавать потоки в JavaScript из сегментов аудио или видео.
Вы можете попробовать MSE на сайте simpl.info/mse :
Приведенный ниже код взят из этого примера.
MediaSource представляет собой источник медиа для аудио- или видеоэлемента. После создания экземпляра объекта MediaSource и срабатывания его события open к нему можно добавить SourceBuffer s. Они действуют как буферы для сегментов медиа:
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer =
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// Get video segments and append them to sourceBuffer.
}
Медиа-сегменты «транслируются» в аудио- или видеоэлемент путем добавления каждого сегмента в SourceBuffer с помощью appendBuffer() . В этом примере видео извлекается с сервера, а затем сохраняется с помощью API-интерфейсов File:
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk(++i);
}
};
Установка порядка воспроизведения
В Chrome 50 добавлена дополнительная поддержка атрибута mode SourceBuffer , позволяющая указать, что сегменты мультимедиа воспроизводятся непрерывно в том порядке, в котором они были добавлены, независимо от того, имели ли сегменты мультимедиа изначально прерывистые временные метки.
Используйте атрибут mode для указания порядка воспроизведения медиа-сегментов. Он имеет одно из двух значений:
- сегменты : временная метка каждого сегмента (которая могла быть изменена параметром
timestampOffset) определяет порядок воспроизведения, независимо от порядка добавления сегментов. - последовательность : порядок сегментов, буферизованных на временной шкале мультимедиа, определяется порядком, в котором сегменты добавляются в
SourceBuffer.
Если сегменты мультимедиа имеют временные метки, проанализированные из данных потока байтов при их добавлении в SourceBuffer , свойство mode SourceBuffer будет установлено на segments . В противном случае mode будет установлен на sequence . Обратите внимание, что временные метки не являются необязательными: они должны быть там для большинства типов потоков и не могут быть там для других: внутриполосные временные метки являются неотъемлемыми для типов потоков, которые их содержат.
Установка атрибута mode необязательна. Для потоков, не содержащих временных меток (audio/mpeg и audio/aac), mode можно изменить только с segments на sequence : при попытке изменить mode с sequence на segments возникнет ошибка. Для потоков, имеющих временные метки, можно переключаться между segments и sequence , хотя на практике это, вероятно, приведет к нежелательному, труднопонимаемому или труднопредсказуемому поведению.
Для всех типов потоков можно изменить значение с segments на sequence . Это означает, что сегменты будут воспроизводиться в том порядке, в котором они были добавлены, и новые временные метки будут генерироваться соответствующим образом:
sourceBuffer.mode = 'sequence';
Возможность установки значения mode на последовательность обеспечивает непрерывное воспроизведение мультимедиа, независимо от того, были ли временные метки сегментов мультимедиа прерывистыми — например, если были проблемы с мультиплексированием видео или если (по какой-либо причине) были добавлены прерывистые сегменты. Приложение может выполнить полифил с timestampOffset , чтобы обеспечить непрерывное воспроизведение, если доступны правильные метаданные потока, но режим последовательности упрощает процесс и снижает вероятность ошибок.
Приложения и демонстрации MSE
Они демонстрируют MSE в действии, хотя и без манипуляций SourceBuffer.mode :
- API источника мультимедиа
- Shaka Player : демонстрационный видеоплеер, использующий MSE для реализации DASH с библиотекой Shaka JavaScript
Поддержка браузера
- Chrome 50 и выше по умолчанию
- Для Firefox подробности см. на MDN