Há várias maneiras de adicionar mídia a uma página da Web. Anteriormente, você aprendeu a usar a tag <video> padrão. Neste artigo, você aprenderá sobre alguns dos frameworks (ou bibliotecas) de mídia disponíveis que podem ser usados para estender ou substituir o comportamento do player de vídeo HTML5 padrão.
Frameworks de mídia têm variedades reservadas e de código aberto e, em seu núcleo, há um conjunto de APIs com 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á fornece a maioria dos recursos, por que eu usaria uma estrutura ou biblioteca?" Essa é uma ótima pergunta, vamos nos aprofundar.
Benefícios de usar uma estrutura
Na maioria das situações que estão além das necessidades de uma página da Web básica, convém usar um framework de mídia para exibir seu conteúdo. A menos que você esteja preparado para desenvolver e manter um conjunto avançado de recursos, 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 cabeçalho, para citar alguns, você provavelmente precisa 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 é o certo para seu projeto. No próximo artigo, discutiremos como criamos um PWA com streaming off-line que implementa vários recursos complexos. Spoiler: 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.
Existem muitas opções disponíveis. Por enquanto, este artigo se concentrará em três: Shaka Player, JW Player e Video.js.
Tocador shaka
De acordo com a documentação, o Shaka Player do Google é uma biblioteca JavaScript de código aberto para mídia adaptável. 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 Extensões da MediaSource e Extensões de mídia criptografada (links em inglês).
O Shaka Player também oferece suporte para armazenamento e reprodução off-line de mídia usando o IndexedDB. O conteúdo pode ser armazenado em qualquer navegador. O armazenamento de licenças depende do suporte ao navegador.
Há instruções de uso básico no site da documentação do Shaka Player. No entanto, para usar o Shaka Player, você primeiro precisa criar uma página HTML com um elemento de vídeo ou áudio. Em seguida, no JavaScript do aplicativo, instale os polyfills e verifique se o navegador é compatível. Depois que o navegador confirmar o suporte ao Shaka Player, um script criará um objeto Player para encapsular o elemento de mídia, detectar erros e carregar um arquivo de manifesto. A partir daí, o Shaka Player vai assumir.
Com o Shaka, você mesmo precisará hospedar e codificar seus arquivos de mídia. A criação de um servidor de mídia não é excessivamente complexa. No entanto, codificar/transcodificação de mídia pode ser demorado e complicado. É recomendável descarregar essa parte em um serviço como o Zencoder, o Amazon Elastic Encoder ou a API Google Transcoder para automatizar tarefas repetitivas e acelerar o processo.
O mais legal do Shaka Player é que ele também tem uma ferramenta fantástica e um SDK de empacotamento de mídia para empacotamento e criptografia DASH e HLS chamado 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 estiver procurando uma opção que forneça serviços de hospedagem e codificação/transcodificação, consulte o JW Player, mas lembre-se de que o JW Player é um software reservado. Ou seja, você não tem muito controle sobre a plataforma ou o roteiro. Há uma versão sem custo financeiro básica 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) (com Vualto), publicidade interativa, personalização da interface e incorporações. Há uma API e um SDK bem documentados. No entanto, se você está procurando apenas uma maneira rápida e sem custo financeiro de hospedar sua mídia, a incorporação de vídeos do YouTube normalmente é a melhor opção.
Video.js
De acordo com o site da empresa, o Video.js foi criado do zero para o mundo do HTML5. Ele é compatível com vídeo HTML5 e formatos de streaming modernos, como DASH e HLS, além de YouTube e Vimeo. Ele é compatível com a reprodução de vídeo em computadores e dispositivos móveis e tem uma boa aparência em qualquer lugar com seles baseadas em CSS.
Existem algumas maneiras de usar o Video.js, mas a mais fácil é usar a versão da CDN sem custo financeiro fornecida pelo Fastly. Saiba mais sobre como configurar o player na página de introdução. O Video.js é um player de vídeo muito poderoso e, assim como o Shaka Player, você também precisará hospedar e codificar seu vídeo. No entanto, uma diferença é que o sistema de plug-ins permite realizar ações como reproduzir vídeos do YouTube no player Video.js, que também pode ser personalizado.
Outras estruturas
Existem muitos frameworks e bibliotecas diferentes disponíveis, mas este artigo é apenas o começo. Ao escolher um framework, considere quais recursos você precisa para o projeto e como planeja hospedar e codificar ou transcodificar sua mídia. Você precisa de anúncios precedentes ou de outras estratégias de monetização? Sua mídia estará disponível off-line? Qual é o tamanho do seu orçamento? ou qualquer outro número de considerações. Faça sua pesquisa e peça sugestões às pessoas em sua rede. Há dezenas de outras ótimas opções e, antes de fazer qualquer escolha, reserve um tempo para escolher uma que seja certa para sua equipe e evitar criar dívida técnica ou complexidade desnecessária para manter durante o ciclo de vida do projeto.
Em seguida, você vai aprender sobre o PWA com streaming off-line que criamos para demonstrar como abordar e enfrentar os principais desafios que surgem ao implementar sua própria solução usando apenas o objeto de vídeo HTML5 sem um framework para lidar com o trabalho pesado.