Os elementos de áudio e vídeo HTML permitem carregar, decodificar e reproduzir mídias simplesmente fornecendo um URL de src:
<video src='foo.webm'></video>
Isso funciona bem em casos de uso simples, mas para técnicas como o streaming adaptativo, a API Media Source Extensions (MSE) oferece mais controle. O MSE permite que os streams sejam criados 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 dos segmentos de mídia. Ele tem um destes dois valores:
- segmentos: o carimbo de data/hora de cada segmento (que pode ter sido modificado por
timestampOffset) determina a ordem de reprodução, não importa a 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 segmentos para sequência: um erro será gerado se você tentar mudar mode de sequência para segmentos. 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 transmissão, é possível mudar o valor de segmentos para sequência. Isso significa que os segmentos serão reproduzidos na ordem em que foram anexados, e novos carimbos de data/hora serão gerados de acordo com isso:
sourceBuffer.mode = 'sequence';
A capacidade de definir o valor mode como sequence garante a reprodução contínua de mídia, mesmo que os carimbos de data/hora do segmento de mídia sejam descontínuos, por exemplo, se houver problemas com a muxagem de vídeo ou se (por qualquer motivo) segmentos descontínuos forem anexados. É possível que um app use o polifill timestampOffset para garantir a reprodução contínua, se os metadados corretos do stream estiverem disponíveis, mas o modo sequência simplifica o processo e reduz a probabilidade de 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 de um player de vídeo que usa MSE para implementar o 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.