Há várias maneiras de adicionar mídia a uma página da Web. Você já aprendeu a
usar a tag <video> padrão. Neste artigo, você vai conhecer alguns dos
frameworks de mídia (ou bibliotecas) disponíveis que podem ser usados para estender ou substituir
o comportamento do player de vídeo HTML5 padrão.
Os frameworks de mídia são de tipo proprietário e de código aberto, e, no núcleo, há um conjunto de APIs que oferecem suporte à reprodução de áudio e/ou vídeo para vários formatos de contêiner e protocolos de transmissão. Um bom framework tem uma arquitetura modular e fornece documentação clara e detalhada. O ideal é que ele também seja relativamente fácil de configurar e usar. Você pode estar se perguntando: "Se o player de vídeo HTML5 já oferece a maioria dos recursos, por que eu usaria um framework ou uma biblioteca?" Essa é uma ótima pergunta. Vamos nos aprofundar.
Benefícios do uso de um framework
Na maioria das situações que vão além das necessidades de uma página da Web básica, é recomendável usar uma estrutura de mídia para veicular seu conteúdo. A menos que você esteja preparado para desenvolver e manter um conjunto de recursos avançados, como reprodução off-line, streaming, análise, picture-in-picture, miniaturas de visualização, incorporação e monetização, como otimização da taxa de preenchimento, programação de anúncios ou lances de header, para citar alguns, é melhor transferir essa complexidade para uma solução existente.
É aí que entram os frameworks de mídia. Eles fornecem um conjunto de recursos e condições em que você pode usá-los. Depois, você precisa decidir qual framework é ideal para seu projeto. No próximo artigo, vamos discutir como criamos um PWA com streaming off-line que implementa vários recursos complexos. Spoiler alert, foi muito trabalho e ainda está longe de ser uma solução pronta para produção. Evite a dor de cabeça e use uma estrutura.
Há muitas opções disponíveis. Por enquanto, este artigo vai se concentrar em três: Shaka Player, JW Player e Video.js.
Shaka Player
De acordo com a documentação, o Shaka Player do Google é uma biblioteca JavaScript de código aberto para mídia adaptativa. Ele reproduz formatos de mídia adaptáveis (como DASH e HLS) em um navegador, sem usar plug-ins. Em vez disso, o Shaka Player usa os padrões abertos da Web MediaSource Extensions e Encrypted Media Extensions.
O Shaka Player também oferece suporte a armazenamento e reprodução off-line de mídia usando IndexedDB. O conteúdo pode ser armazenado em qualquer navegador. O armazenamento de licenças depende do suporte do navegador.
Há instruções para o uso básico no site de documentação do Shaka Player. No entanto, para usar o Shaka Player, primeiro é necessário criar uma página HTML com um elemento de vídeo ou áudio. Em seguida, no JavaScript do aplicativo, você instala os polyfills e verifica o suporte do navegador. Depois que o navegador confirmar o suporte ao Shaka Player, um script vai criar um objeto Player para agrupar o elemento de mídia, detectar erros e carregar um arquivo de manifesto. O Shaka Player vai assumir a partir daí.
Com o Shaka, você precisa hospedar e codificar seus arquivos de mídia. Criar um servidor de mídia não é muito complexo, mas codificar/transcodificar mídia pode ser demorado e complicado. É recomendável transferir essa parte para um serviço como o Zencoder, o Amazon Elastic Encoder ou a API Google Transcoder para automatizar tarefas repetitivas e acelerar o processo.
O legal do Shaka Player é que ele também tem uma ferramenta e um SDK de empacotamento de mídia fantásticos para empacotamento e criptografia DASH e HLS, chamados Shaka Packager. Ele pode preparar e empacotar conteúdo de mídia para streaming on-line, que você aprendeu anteriormente em Conversão de mídia e Criptografia de mídia.
JW Player
Se você está procurando uma opção que ofereça serviços de hospedagem e codificação/transcodificação, confira o JW Player. No entanto, lembre-se de que ele é um software proprietário. Ou seja, você não tem muito controle sobre a plataforma ou o roteiro. Há uma versão básica sem custo financeiro, em que os vídeos são exibidos com uma marca d'água, e uma versão comercial.
O JW Player oferece suporte a streaming com MPEG-DASH (somente versão paga), gerenciamento de direitos digitais (DRM, na sigla em inglês) (com o Vualto), publicidade interativa, personalização da interface e incorporações. Há uma API e um SDK bem documentados. No entanto, se você quer apenas uma maneira rápida e sem custo financeiro de hospedar sua mídia, a incorporação de vídeos do YouTube geralmente é a melhor opção sem custo financeiro.
Video.js
De acordo com o site, o Video.js foi criado do zero para um mundo HTML5. Ele oferece suporte a vídeos HTML5 e formatos modernos de streaming, como DASH e HLS, além do YouTube e do Vimeo. Ele oferece suporte à reprodução de vídeos em computadores e dispositivos móveis e fica bom em qualquer lugar com skins baseados em CSS.
Há algumas maneiras de usar o Video.js, mas a mais fácil é usar a versão CDN sem custo financeiro fornecida pelo Fastly. Saiba como configurar o player na página Primeiras etapas. O Video.js é um player de vídeo muito eficiente. Assim como o Shaka Player, você também precisa hospedar e codificar seu vídeo. No entanto, uma diferença é no sistema de plug-ins, em que você pode fazer coisas como reproduzir vídeos do YouTube no player Video.js, que também pode ser personalizado.
Outras estruturas
Há muitos frameworks e bibliotecas diferentes disponíveis, e este artigo apenas arranhou a superfície do que está disponível. Ao escolher um framework, considere os recursos necessários para o projeto e como você planeja hospedar e codificar ou transcodificar sua mídia. Você precisa de anúncios precedentes ou de outras estratégias de monetização? A mídia vai estar disponível off-line? Qual é o tamanho do seu orçamento? Ou qualquer outra consideração. Faça sua pesquisa e peça sugestões às pessoas da sua rede. Há dezenas de outras opções ótimas e, antes de fazer qualquer escolha, reserve um tempo para escolher uma que seja adequada para sua equipe e evite criar uma dívida técnica desnecessária ou complexidade para manter durante o ciclo de vida do projeto.
A seguir, você vai aprender sobre o PWA com streaming off-line que criamos para demonstrar como abordar e resolver os principais desafios que vêm com o lançamento da sua própria solução usando apenas o objeto de vídeo HTML5 sem uma estrutura para lidar com o trabalho pesado.