Os elementos HTML de áudio e vídeo permitem carregar, decodificar e reproduzir mídia, basta fornecer um URL src:
<video src='foo.webm'></video>
Isso funciona bem em casos de uso simples, mas, para técnicas como streaming adaptável, a API Media Source Extensions (MSE) oferece mais controle. O MSE permite que os streams sejam criados em JavaScript usando segmentos de áudio ou vídeo.
Teste 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 atuam como reservas 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 no 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);
}
};
Como definir a ordem de reprodução
O Chrome 50 adiciona suporte extra ao atributo mode do SourceBuffer, permitindo que você especifique que os segmentos de mídia são reproduzidos continuamente na ordem em que são anexados, independentemente dos segmentos de mídia inicialmente terem carimbos de data/hora descontínuos.
Use o atributo mode para especificar a ordem de reprodução dos segmentos de mídia. Ela 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 da 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 com base nos dados de stream de bytes quando anexados ao SourceBuffer, a propriedade mode do SourceBuffer vai ser definida como segmentos. Caso contrário, mode será definido como sequência. Observe que os carimbos de data/hora não são opcionais. Eles precisam estar presentes na maioria dos tipos de stream e não para outros. Carimbos de data/hora in-band são inerentes aos tipos de stream que os contêm.
A definição do atributo mode é opcional. Para streams que não contêm carimbos de data/hora (áudio/mpeg e áudio/aac), o mode só pode ser alterado de segments para sequência: um erro será gerado se você tentar mudar mode de sequência para segmentos. Para streams com carimbos de data/hora, é possível alternar entre segments e sequência, embora, 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 com essas informações:
sourceBuffer.mode = 'sequence';
A capacidade de definir o valor mode como sequência garante a reprodução contínua de mídia, não importa se os carimbos de data/hora do segmento de mídia não são contínuos. Por exemplo, se houve problemas com a mixagem de vídeo ou se, por qualquer motivo, segmentos descontínuos são anexados. Um app poderá usar o polyfill com timestampOffset para garantir a reprodução contínua se os metadados corretos da transmissão 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 o 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 o MSE para implementar o DASH com a biblioteca JavaScript Shaka.
Suporte ao navegador
- Chrome 50 e mais recentes por padrão
- Para o Firefox, consulte MDN para detalhes