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 algumas das estruturas de mídia (ou bibliotecas) disponíveis que podem ser usadas para estender ou substituir o comportamento do player de vídeo HTML5 padrão.
Os frameworks de mídia existem tanto na variedade reservada quanto na de código aberto, e, na essência, estão 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 apresenta uma 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 lá.
Benefícios de usar uma estrutura
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 exibir 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álises, 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, então você provavelmente precisará transferir essa complexidade para uma solução existente.
É aqui que entram as estruturas de mídia. Elas fornecem um conjunto de recursos e condições em que é possível usá-los, e você precisa decidir qual framework é ideal para seu projeto. No próximo artigo, discutiremos como criamos um PWA com streaming off-line que implementa vários recursos complexos. Spoiler: deu muito trabalho e ainda está longe de ser uma solução pronta para produção. Evite problemas 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 de shaka
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 é compatível com armazenamento off-line e reprodução 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 de documentação do Shaka Player. No entanto, em poucas palavras para usar o Shaka Player, primeiro você precisa 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 ao navegador. Depois que o navegador confirmar o suporte ao Shaka Player, um script vai criar um objeto Player para unir o elemento de mídia, detectar erros e carregar um arquivo de manifesto. Shaka Player vai assumir a partir daí.
Com o Shaka, você mesmo terá que hospedar e codificar seus arquivos de mídia. A criação de um servidor de mídia não é excessivamente complexa, mas a codificação/transcodificação de mídia pode ser demorada e complicada. É recomendável transferir 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 melhor do Shaka Player é que há também uma ferramenta fantástica e um SDK de empacotamento de mídia para empacotamento e criptografia de DASH e HLS chamado Shaka Packager. Ele pode preparar e empacotar conteúdo de mídia para streaming on-line, o que você aprendeu anteriormente em Conversão de mídia e Criptografia de mídia.
JW Player
Se você procura uma opção que ofereç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 sem custo financeiro.
Video.js
De acordo com o site da empresa, o Video.js foi criado do zero para um mundo HTML5. Ela é compatível com vídeos em HTML5 e formatos modernos de streaming, como DASH e HLS, além do YouTube e Vimeo. Ele é compatível com reprodução de vídeo em computadores e dispositivos móveis e fica bem em qualquer lugar com skins baseadas em CSS.
Há algumas maneiras de usar o Video.js, mas a mais fácil é usar a versão sem custo financeiro da CDN fornecida pelo Fastly. Saiba mais sobre como configurar o player na página de primeiros passos. O Video.js é um player de vídeo muito eficiente e, assim como o Shaka Player, você também precisará hospedar e codificar seu vídeo. No entanto, uma diferença está no sistema de plug-ins, onde é possível fazer coisas 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, então este artigo mostra apenas o que há por aí. Ao escolher um framework, considere quais recursos são 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? Sua mídia estará disponível off-line? Qual é o seu orçamento? Ou qualquer outro número de considerações. Faça pesquisas e peça sugestões às pessoas da sua rede. Há dezenas de outras opções excelentes e, antes de fazer qualquer escolha, reserve um tempo para escolher a que será ideal para sua equipe e evitar a criação de dívidas ou complexidades técnicas desnecessárias para manter durante o ciclo de vida do projeto.
Em seguida, você aprenderá sobre o PWA com streaming off-line que criamos para demonstrar como abordar e enfrentar os principais desafios decorrentes da implementação de sua própria solução usando apenas o objeto de vídeo HTML5 sem uma estrutura para lidar com o trabalho pesado.