Эта страница переведена с помощью Cloud Translation API.

API источника мультимедиа — автоматически обеспечивает плавное воспроизведение сегментов мультимедиа в порядке добавления.

Sam Dutton

HTML-элементы аудио и видео позволяют загружать, декодировать и воспроизводить мультимедиа, просто указав URL-адрес src:

    <video src='foo.webm'></video>

Это хорошо работает в простых случаях использования, но для таких методов, как адаптивная потоковая передача , API расширений источника мультимедиа (MSE) обеспечивает больший контроль. MSE позволяет создавать потоки в JavaScript из сегментов аудио или видео.

Вы можете попробовать MSE по адресу simpl.info/mse :

Скриншот видео, воспроизводимого с помощью MSE API.

Код ниже взят из этого примера.

MediaSource представляет собой источник мультимедиа для аудио- или видеоэлемента. После создания экземпляра объекта MediaSource и срабатывания его события open к нему можно добавить SourceBuffer . Они действуют как буферы для медиа-сегментов:

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-интерфейсов файлов:

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 будет установлено в сегменты . В противном случае mode будет установлен на последовательность . Обратите внимание, что метки времени не являются обязательными: они должны присутствовать для большинства типов потоков и не могут присутствовать для других: внутриполосные метки времени являются неотъемлемой частью типов потоков, которые их содержат.

Установка атрибута mode не является обязательной. Для потоков, которые не содержат временных меток (аудио/mpeg и аудио/aac), mode можно изменить только с сегментов на последовательность : будет выдана ошибка, если вы попытаетесь изменить mode с последовательности на сегменты . Для потоков, имеющих временные метки, можно переключаться между сегментами и последовательностями , хотя на практике это, вероятно, привело бы к нежелательному, труднопонятному или труднопредсказуемому поведению.

Для всех типов потоков вы можете изменить значение с сегментов на последовательность . Это означает, что сегменты будут воспроизводиться в том порядке, в котором они были добавлены, и соответственно генерируются новые временные метки:

sourceBuffer.mode = 'sequence';

Возможность установить значение mode для последовательности обеспечивает непрерывное воспроизведение мультимедиа, независимо от того, были ли временные метки медиасегментов прерывистыми — например, если были проблемы с мультиплексированием видео или если (по какой-либо причине) добавлялись прерывистые сегменты. Приложение может заполнить полифил с timestampOffset , чтобы обеспечить непрерывное воспроизведение, если доступны правильные метаданные потока, но режим последовательности делает процесс более простым и менее подверженным ошибкам.

Приложения и демо-версии MSE

На них показан MSE в действии, но без манипуляций SourceBuffer.mode :

API источника мультимедиа
Shaka Player : демонстрация видеоплеера, использующая MSE для реализации DASH с библиотекой Shaka JavaScript.

Поддержка браузера

Chrome 50 и выше по умолчанию
Для Firefox подробности см. в MDN.

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

Метод appendMode() расширений медиа-источника

Информация об API

MDN: SourceBuffer.mode

Sam Dutton

    <video src='foo.webm'></video>

Вы можете попробовать MSE по адресу simpl.info/mse :

Код ниже взят из этого примера.

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.
}

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 = 'sequence';

Приложения и демо-версии MSE

На них показан MSE в действии, но без манипуляций SourceBuffer.mode :

API источника мультимедиа
Shaka Player : демонстрация видеоплеера, использующая MSE для реализации DASH с библиотекой Shaka JavaScript.

Поддержка браузера

Chrome 50 и выше по умолчанию
Для Firefox подробности см. в MDN.

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

Метод appendMode() расширений медиа-источника

Информация об API

MDN: SourceBuffer.mode

Sam Dutton

    <video src='foo.webm'></video>

Вы можете попробовать MSE по адресу simpl.info/mse :

Код ниже взят из этого примера.

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.
}

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

Установка порядка воспроизведения

сегменты : временная метка каждого сегмента (которая может быть изменена с помощью timestampOffset ) определяет порядок воспроизведения, независимо от порядка, в котором сегменты добавляются.
последовательность : Порядок сегментов, буферизуемых на временной шкале мультимедиа, определяется порядком, в котором сегменты добавляются в SourceBuffer .

sourceBuffer.mode = 'sequence';

Приложения и демо-версии MSE

На них показан MSE в действии, но без манипуляций SourceBuffer.mode :

API источника мультимедиа
Shaka Player : демо-версия видеоплеера, использующая MSE для реализации DASH с библиотекой Shaka JavaScript.

Поддержка браузера

Chrome 50 и выше по умолчанию
Для Firefox подробности см. в MDN.

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

Метод appendMode() расширений медиа-источника

Информация об API

MDN: SourceBuffer.mode

Sam Dutton

    <video src='foo.webm'></video>

Вы можете попробовать MSE по адресу simpl.info/mse :

Код ниже взят из этого примера.

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.
}

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

Установка порядка воспроизведения

сегменты : временная метка каждого сегмента (которая может быть изменена с помощью timestampOffset ) определяет порядок воспроизведения, независимо от порядка, в котором сегменты добавляются.
последовательность : Порядок сегментов, буферизуемых на временной шкале мультимедиа, определяется порядком, в котором сегменты добавляются в SourceBuffer .

sourceBuffer.mode = 'sequence';

Приложения и демо-версии MSE

На них показан MSE в действии, но без манипуляций SourceBuffer.mode :

API источника мультимедиа
Shaka Player : демо-версия видеоплеера, использующая MSE для реализации DASH с библиотекой Shaka JavaScript.

Поддержка браузера

Chrome 50 и выше по умолчанию
Для Firefox подробности см. в MDN.

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

Метод appendMode() расширений медиа-источника

Информация об API

MDN: SourceBuffer.mode