Extensões de fonte de mídia HTML5: trazendo vídeo de produção para a web

Na última década, plugins como Flash e Silverlight possibilitaram um rico consumo de vídeo em navegadores, potencializando serviços populares como YouTube e Netflix. No entanto, essa abordagem mudou para HTML5 nos últimos anos.

Há quase dois anos, o W3C publicou a recomendação final da especificação HTML5, que veio com um novo conjunto de elementos HTML e APIs, especialmente para vídeo. Alguns deles visam mais semântica nas páginas da web, mas não introduzem novos recursos. Outros estendem as possibilidades da web e aprimoram as possibilidades para desenvolvedores sem a necessidade de plugins como Adobe Flash, Microsoft Silverlight ou Java.

Leitura adicional no SmashingMag:

• Fornecendo uma experiência nativa com tecnologias da Web
• Fazendo um polyfill completo para o elemento de detalhes do HTML5
• Um guia para iniciantes para aplicativos da Web progressivos
• O logotipo HTML5: o que você acha?

Isso é especialmente importante porque, por exemplo, o Google anunciou a remoção do NPAPI (uma API usada por esses plug-ins), assim como o Firefox, e a Microsoft defende a navegação sem plug-ins. Embora esses fornecedores ainda forneçam um Flash player, provavelmente é apenas uma questão de tempo até que eles não o façam. Além disso, os navegadores em dispositivos móveis estão um passo além, pois a maioria deles não suporta plugins e não possui Flash player.

Vejamos alguns dos novos elementos HTML5 e o que eles melhoram para o vídeo:

• <canvas> fornece scripts para renderizar gráficos, gráficos de jogos e muito mais. Isso às vezes é chamado de API JavaScript do Canvas. O elemento canvas também pode ser usado com WebGL para renderizar gráficos 2D e 3D, usando a GPU da placa gráfica.
• <video> permite a reprodução de vídeo pronta para uso, o que é realmente incrível. Isso finalmente torna realidade a multimídia sem plug-ins na web. Na verdade, os fornecedores de navegadores parecem concordar com um único formato – MPEG-4/H.264, que é universalmente suportado em navegadores modernos, com uma notável exceção do Opera Mini.
• <audio> permite a reprodução imediata de conteúdo de áudio em uma página da web. Assim como no vídeo, a decisão de quais formatos de contêiner e codecs suportar é deixada para os fornecedores de navegadores.
• <track> pode ser usado para faixas de texto temporizadas, como legendas e legendas em um vídeo. Os arquivos WebVTT são suportados imediatamente.

A maioria dos novos elementos são conhecidos e usados ​​há algum tempo no código do player de vídeo HTML5 porque são implementados em todos os navegadores modernos. A especificação é estável. Ainda assim, o W3C ainda tem muito trabalho a fazer.

Para mim, o padrão mais importante no qual o W3C está trabalhando é o padrão “Media Source Extensions” (MSEs), que atualmente tem o status de “Candidate Recommendation”. Essa API JavaScript nos permite gerar fluxos de mídia para o <video> , <audio> e outros elementos, permitindo padrões de streaming adaptativos como MPEG-DASH em puro HTML5 e JavaScript.

Outro interessante é o padrão “Encrypted Media Extensions”, que permite a reprodução de conteúdo protegido em HTML5 e JavaScript. No entanto, este é atualmente um “rascunho de trabalho” e levará um tempo para ser finalizado.

Saudamos o novo padrão e esperamos o momento em que não precisaremos de um Flash player ou plugin, quando a multimídia poderá ser visualizada em praticamente qualquer dispositivo com uma única implementação.

Por que MPEG-DASH?

Vejamos o formato de streaming MPEG-DASH e por que ele é usado em HTML5. MPEG-DASH (o DASH é a abreviação de streaming adaptativo dinâmico sobre HTTP) é um padrão internacional independente de fornecedor ratificado por MPEG e ISO (ISO/IEC 23009-1). As tecnologias de streaming adaptáveis ​​anteriores — como Apple HLS, Microsoft Smooth Streaming e Adobe HDS — foram lançadas por fornecedores com suporte limitado para servidores de streaming independentes de fornecedor ou para clientes de reprodução. Uma situação dependente do fornecedor claramente não era desejável e, portanto, os órgãos de padronização iniciaram um processo de harmonização, resultando na ratificação do MPEG-DASH em 2012.

Estes são os objetivos e benefícios do MPEG-DASH em poucas palavras:

• Reduza os atrasos de inicialização, bem como buffers e travamentos durante a reprodução de vídeo.
• Continue a adaptação à situação da largura de banda do cliente.
• Use a lógica de streaming baseada no cliente para permitir a mais alta escalabilidade e flexibilidade.
• Use CDNs, proxies e caches baseados em HTTP existentes e econômicos.
• Ignore com eficiência NATs e firewalls por meio do uso de HTTP.
• Habilite a criptografia comum por meio da sinalização, entrega e uso de vários esquemas DRM simultâneos do mesmo arquivo.
• Ative a junção simples e a inserção de anúncios (segmentada).
• Apoie o “modo truque” de forma eficiente.
• E muito mais!

Nos últimos anos, o MPEG-DASH foi integrado em novos esforços de padronização - como os MSEs HTML5, que permitem a reprodução de DASH por meio de tags de video e audio HTML5, bem como as extensões de mídia criptografada HTML5, que permitem a reprodução protegida por DRM em navegadores da web . Além disso, a proteção DRM com MPEG-DASH é harmonizada em diferentes sistemas com MPEG-CENC (para criptografia comum); e a reprodução de MPEG-DASH em diferentes plataformas de smart TV é habilitada através da integração com Hybrid Broadcast Broadcast TV (HbbTV 1.5 e HbbTV 2.0).

Além disso, o uso do padrão MPEG-DASH foi simplificado pelos esforços da indústria em torno do DASH Industry Forum e suas recomendações DASH-AVC/264, bem como por iniciativas voltadas para o futuro, como a recomendação DASH-HEVC/265 sobre o uso de H.265/HEVC dentro do MPEG-DASH.

Hoje, o MPEG-DASH está sendo implantado cada vez mais, acelerado por serviços como Netflix e Google, que mudaram recentemente para esse novo padrão. Com essas duas principais fontes de tráfego, o MPEG-DASH já responde por 50% do tráfego total da Internet.

Como funcionam as MPEs?

Agora vamos examinar os detalhes dos MSEs e como eles podem ser usados ​​pelos desenvolvedores. Os MSEs são uma especificação que estende o HTMLMediaElement para permitir que o JavaScript construa dinamicamente fluxos de mídia para tags de audio e video . Isso não era possível antes porque essas tags só podiam acessar arquivos completos (ou seja, arquivos MP4). Essa abordagem também é chamada de streaming progressivo ou download progressivo, porque os arquivos de mídia são baixados e reproduzidos ao mesmo tempo, permitindo pseudo-streaming.

No entanto, isso traz consigo uma baixa capacidade de busca e nenhuma possibilidade de adaptar a qualidade de vídeo e áudio à situação de largura de banda do usuário. Ao construir fluxos de mídia em JavaScript como entradas para as tags de audio e video , os desenvolvedores agora podem adaptar dinamicamente um fluxo de mídia ao contexto do usuário, melhorando assim a experiência de streaming.

Como mencionado, MPEG-DASH é o formato de streaming escolhido para os MSEs. Então, vejamos as etapas necessárias para criar um player de vídeo baseado em HTML5 MSE:

1. Baixe e analise o arquivo de manifesto - chamado MPD em MPEG-DASH - que descreve os detalhes do fluxo de vídeo, como o número de níveis de qualidade e resoluções do fluxo de vídeo, idiomas de áudio e legendas, bem como o nome dos segmentos de mídia e arquivos no servidor de origem baseado em HTTP ou CDN.
2. Estime a largura de banda disponível no dispositivo cliente, escolha a qualidade de vídeo apropriada para obter streaming sem buffer e baixe os segmentos de mídia em JavaScript.
3. Entregue os segmentos de mídia baixados para o buffer MSE em JavaScript.
4. Decodifique e renderize o vídeo por meio da tag de video , normalmente no hardware.

É assim que funcionam os players de streaming adaptáveis ​​baseados em HTML5, usados ​​pela Netflix e pelo YouTube. Já existem soluções bastante maduras por aí, o que torna mais fácil para desenvolvedores e provedores de conteúdo mudarem para streaming de taxa de bits adaptável em HTML5, como o projeto de código aberto DASH-IF dash.js e o player Bitdash HTML5.

A geração de conteúdo MPEG-DASH também é direta e suportada por ferramentas de código aberto como x264 e MP4Box, bem como por serviços de codificação comerciais como Bitcodin

No entanto, o uso dos MSEs não se limita ao MPEG-DASH. Mais e mais projetos (incluindo hls.js) e players (incluindo Bitdash) suportam o formato HLS da Apple em HTML5 usando os MSEs. Eles fazem isso transmultiplexando os segmentos de mídia HLS — que são contêineres MPEG2-TS — para o formato de arquivo de mídia de base ISO exigido pelo HTML5 e MPEG-DASH.

Extensões de mídia criptografada para DRM

Grandes mudanças estão acontecendo atualmente no mercado de DRM, causadas pela queda iminente de plugins NPAPI – como Silverlight, que levou à queda do principal sistema DRM, PlayReady – do Chrome e Firefox. Isso coloca quase todos os provedores de conteúdo premium em uma situação difícil, porque eles terão que mudar de tecnologia e encontrar uma solução à prova de futuro.

Os editores de mídia de streaming premium não poderão confiar no DRM PlayReady da Microsoft para proteger seu conteúdo no Chrome e Firefox em dispositivos PC e Android. Eles terão que reavaliar sua estratégia de proteção de conteúdo e plataforma de streaming e terão que encontrar uma solução à prova de futuro e, em seguida, trocar de tecnologia em breve.

Para muitos provedores de conteúdo, o MPEG-DASH surgiu como a tecnologia de escolha. Os projetos DASH foram lançados em ritmo acelerado, e os MSEs e as extensões de mídia criptografada (EMEs) com Widevine DRM parecem ser a alternativa mais viável. Além disso, o MPEG-CENC possibilita o suporte a sistemas DRM separados com apenas uma versão de conteúdo protegido, e os EMEs são baseados nos MSEs para conteúdo baseado em MPEG-DASH.

Portanto, essa combinação de diferentes sistemas DRM - por exemplo, Widevine Modular para Chrome e Android, Microsoft PlayReady para Internet Explorer e Edge e Adobe Primetime para Firefox - para uma versão de um conteúdo oferece aos provedores de conteúdo incentivo adicional para migrar para MPEG -DASH como padrão internacional, dada sua flexibilidade com streaming, DRM e CDNs.

Suporte de navegador para MSEs e EMEs

Após alguns anos de adoção lenta por fornecedores de navegadores de HTML5 e MSEs em particular, agora estamos vendo a maioria deles dando suporte a ele. Isso também vale para EMEs, embora neste caso cada fornecedor esteja optando por um sistema DRM diferente e o ecossistema seja um pouco mais diferenciado.

No entanto, para atingir 99% dos usuários, temos que ter uma configuração de streaming de vídeo que também suporte navegadores que não suportam os MSEs, em particular versões antigas de navegadores e Safari no iOS. Navegadores antigos podem ser servidos facilmente usando um player baseado em Flash, que pode reproduzir o mesmo conteúdo MPEG-DASH usado pelos MSEs, conforme mostrado pelo player Bitdash. Para oferecer suporte a dispositivos iOS, temos que usar o formato de streaming da Apple, chamado HLS, que a Apple está exigindo para HTML5. Padrões abertos como os MSEs não são suportados pela Apple, embora sejam suportados no Safari no OS X.

A matriz a seguir fornece uma visão geral do status do suporte a MSE e EME em navegadores e plataformas hoje (cortesia de Bitmovin):

O futuro do vídeo HTML5

Novos codecs de mídia estão entrando no mercado, tornando a compactação de vídeo ainda mais eficiente, o que é especialmente importante para formatos de alta qualidade, como 4K e UHD, e para streaming para dispositivos móveis. O codec mais comum é HEVC/h.265 , que pode ser o codec padrão daqui a alguns anos (se a situação da patente não atrapalhar). E também utilizará os MSEs integrados do navegador para reprodução e usará MPEG-DASH como formato de streaming, o que mostra a flexibilidade desse padrão aberto.

Os desenvolvedores de players de vídeo só precisam fazer algumas adaptações simples, como mudar o atributo do codec ao criar o SourceBuffer; e, se o navegador subjacente suportar a decodificação HEVC (provavelmente feita por um decodificador de hardware), você poderá assistir seus fluxos HEVC MPEG-DASH em HTML5! Testamos com sucesso com navegadores, como o Microsoft Edge, que vem com suporte HEVC. Além disso, o Google anunciou recentemente suporte em seu navegador Chromium.

No entanto, o HEVC ainda não está disponível para a grande maioria dos ativos de vídeo da Internet e apenas alguns dispositivos são capazes de decodificá-lo. E, claro, não é o único codec da cidade. O formato de codificação de vídeo aberto e isento de royalties VP9 (o sucessor do VP8) visa ter uma eficiência de codificação ainda melhor e já é suportado por navegadores populares como Google Chrome e Microsoft Edge, e este codec também é compatível com MSE. No entanto, não podemos prever quais codecs entrarão em nossa rotina diária de streaming. Mas seja VP8/9, AVC ou HEVC, os MSEs e MPEG-DASH estão prontos!

Uma tendência futura é o vídeo em 360 graus, que é bastante simples de usar em HTML5. Os desenvolvedores podem usar o suporte de streaming adaptável de MSEs e apenas adicionar uma camada de renderização JavaScript ou WebGL para uma experiência de 360 ​​graus em cima dela. Recentemente, dei uma palestra sobre esse tema e sobre como construir um serviço tipo Netflix para realidade virtual usando HTML5, JavaScript, DASH e WebGL.

Conclusão

Espero que este artigo tenha lhe dado uma boa visão geral do estado e do futuro do vídeo na web. Os MSEs e EMEs são grandes passos em direção a um ecossistema de padrões abertos para vídeo na web, substituindo plugins como Flash e Silverlight. Além disso, o HTML5 está chegando às plataformas de escolha no mundo multiplataforma de hoje, incluindo ambientes de desktop, móveis e smart TV.

Junto com os padrões de streaming como MPEG-DASH, os provedores de conteúdo podem ter uma solução de vídeo unificada entre plataformas e dispositivos . Eles podem melhorar a experiência do usuário por meio de formatos de streaming adaptáveis, que evitam o armazenamento em buffer, diminuem os tempos de carregamento e fornecem a melhor qualidade possível para a largura de banda e a situação do dispositivo de cada usuário.