Os elementos HTML de áudio e vídeo permitem carregar, decodificar e reproduzir mídia fornecendo apenas um URL src:
<video src='foo.webm'></video>
Isso funciona bem em casos de uso simples, mas para técnicas como o streaming adaptável, a API Media Source Extensions (MSE) oferece mais controle. O MSE permite que os streams sejam integrados em JavaScript a partir de segmentos de áudio ou vídeo.
Você pode testar o MSE em simpl.info/mse:
O código abaixo é desse exemplo.
Um MediaSource representa uma fonte de mídia para um elemento de áudio ou vídeo. Depois que um objeto MediaSource é instanciado e o evento open é acionado, SourceBuffers podem ser adicionados a ele. Eles funcionam como buffers para segmentos de mídia:
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.
}
Os segmentos de mídia são "transmitidos" para um elemento de áudio ou vídeo adicionando cada segmento a um SourceBuffer com appendBuffer(). Neste exemplo, o vídeo é buscado do servidor e armazenado usando as APIs 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);
}
};
Definir a ordem de reprodução
O Chrome 50 adiciona suporte adicional ao atributo mode SourceBuffer, permitindo que você especifique que os segmentos de mídia sejam reproduzidos continuamente, na ordem em que foram anexados, mesmo que os segmentos de mídia tenham carimbos de data/hora descontínuos.
Use o atributo mode para especificar a ordem de reprodução para segmentos de mídia. Ele tem um destes dois valores:
- segments: o carimbo de data/hora de cada segmento (que pode ter sido modificado por
timestampOffset) determina a ordem de reprodução, independentemente da ordem em que os segmentos são anexados. - Sequência: a ordem dos segmentos armazenados em buffer na linha do tempo de mídia é determinada pela ordem em que os segmentos são anexados ao
SourceBuffer.
Se os segmentos de mídia tiverem carimbos de data/hora analisados a partir de dados de fluxo de bytes quando forem anexados ao SourceBuffer, a propriedade mode do SourceBuffer será definida como segmentos. Caso contrário, mode será definido como sequência. Os carimbos de data/hora não são opcionais: eles precisam estar presentes na maioria dos tipos de transmissão e não podem estar presentes em outros. Os carimbos de data/hora na banda são inatos aos tipos de transmissão que os contêm.
Definir o atributo mode é opcional. Para streams que não contêm carimbos de data/hora (áudio/mpeg e áudio/aac), mode só pode ser alterado de segments para Sequence: um erro será gerado se você tentar alterar mode de Sequence para segments. Para transmissões com carimbos de data/hora, é possível alternar entre segmentos e sequência, mas, na prática, isso provavelmente produziria um comportamento indesejável, difícil de entender ou difícil de prever.
Para todos os tipos de stream, é possível alterar o valor de segments para Sequence. Isso significa que os segmentos serão reproduzidos na ordem em que foram anexados e novos carimbos de data/hora gerados de acordo:
sourceBuffer.mode = 'sequence';
A possibilidade de definir o valor de mode como Sequence garante a reprodução contínua de mídia, independentemente de os carimbos de data/hora dos segmentos de mídia serem descontínuos. Por exemplo, se houve problemas com o muxing do vídeo ou se, por qualquer motivo, segmentos descontínuos foram anexados. Um app poderá usar o polyfill com timestampOffset para garantir a reprodução contínua se os metadados de stream corretos estiverem disponíveis, mas o modo sequência torna o processo mais simples e menos propenso a erros.
Apps e demonstrações de MSE
Eles mostram a MSE em ação, mas sem a manipulação de SourceBuffer.mode:
- API Media Source
- Shaka Player: demonstração do player de vídeo que usa MSE para implementar DASH com a biblioteca JavaScript Shaka.
Suporte ao navegador
- Chrome 50 e versões mais recentes
- Para o Firefox, consulte o MDN para mais detalhes.