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, SourceBuffer
s 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