Stream
Ligação
Gestão
Mensuração
Eventos
Business
Organizações
Entretenimento e Média
API
Ferramentas
Centro de Aprendizagem
Apoio
Artigos de ApoioThe video experts blog
Reprodutores de vídeo Video.js e HTML5: Tudo o que você precisa saber
O número de espectadores de vídeo tem vindo a explodir nos últimos anos. Além disso, a multiplicidade de dispositivos utilizados para transmitir também está a aumentar rapidamente. Isto significa que é mais complicado do que nunca oferecer uma experiência de utilizador sem falhas.
Uma vez que um leitor de vídeo é a parte mais tangível do processo de transmissão de vídeo, só faz sentido escolher um que seja construído com base nas tecnologias mais recentes, como Video.js. No atual panorama digital, isso significa um inovador leitor de vídeo HTML5.
Neste artigo, vamos falar sobre o suporte de vídeo HTML5, o player Video.js e o surgimento do streaming HLS. Ficará também a saber porque é que as empresas estão a abandonar o RTMP e o Flash em favor do streaming de vídeo HTML5. Por fim, abordaremos a forma como o leitor de vídeo e a API do Dacast se integram na mistura.
Vamos lá começar.
Nós cobriremos:
- Vantagens da utilização de um leitor de vídeo HTML5
- O que é o Video.js?
- Vantagens do streaming com Video.js
- O que é a transmissão em fluxo contínuo HLS?
- O que é RTMP?
- HLS vs. RTMP: Qual é o protocolo superior?
- Leitor de vídeo HTML5 da Dacast
- API de vídeo da Dacast
- Conclusão
Vantagens da utilização de um leitor de vídeo HTML5
Todas as páginas Web na Internet são escritas em HTML, que é uma série de etiquetas que descrevem o conteúdo da Web. Com a mais recente especificação HTML5, existe também uma nova etiqueta <video> para adicionar vídeos a uma página.
Vejamos o que esta nova atualização significa para a transmissão de vídeo e por que razão deve considerar a sua utilização.
Como é que reproduzo um vídeo em HTML?
Embora as páginas Web tenham vídeos há muito tempo, sempre necessitaram de plug-ins adicionais como o Flash Player, Silverlight ou QuickTime. No entanto, com os vídeos HTML5, a reprodução é incorporada diretamente nos browsers. Isto significa que estes vídeos podem ser incorporados em quase todo o lado na Internet e podem ser visualizados na maioria dos dispositivos.
Os vídeos incorporados em páginas Web utilizando a etiqueta <video> são apresentados num leitor de vídeo predefinido, a menos que as marcas optem por modificá-lo. Os atributos básicos relacionados com a reprodução de vídeo podem ser alterados diretamente na etiqueta <video>, mas qualquer personalização avançada requer conhecimentos adicionais de desenvolvimento Web.
Por que razão devo utilizar vídeo HTML5?
Talvez o aspeto mais valioso do leitor de vídeo HTML5 seja o facto de poder ser personalizado para experiências de marca. Já não é necessário utilizar plug-ins de leitores de vídeo de marca da Adobe ou da Microsoft, pelo que as empresas têm controlo total sobre a experiência de visualização.
Além disso, o HTML5 traz um novo nível de normalização que permite a difusão universal. Isto porque qualquer navegador Web compatível com HTML5 e, por sua vez, praticamente qualquer dispositivo, pode agora transmitir vídeo. O HTML5 é suportado por computadores portáteis, tablets, smartphones, smart TVs e muito mais.
O que é o Video.js?
Vídeo.js é um leitor de vídeo HTML5 de código aberto que utiliza JavaScript e CSS para oferecer uma experiência consistente em todos os browsers. Existe um tema base predefinido, mas é fácil substituir os seus estilos e ícones para criar skins personalizados.
Para além de tratar do aspeto e da sensação, o Video.js inclui uma API e um sistema de plug-ins para personalização avançada. Existem centenas de plug-ins de comunidade à escolha para adicionar funcionalidades como listas de reprodução, análises e publicidade. Os programadores também podem criar os seus próprios plugins para casos de utilização específicos da empresa.
Como é que utilizo o Video.js?
Uma vez que o Video.js é de fonte aberta e consiste apenas em ficheiros JavaScript e CSS, é fácil de configurar. A ligação à rede de distribuição de conteúdos que contém estes ficheiros na secção <head> de uma página Web é tudo o que é necessário para o instalar.
Depois, qualquer etiqueta <video> que especifique “video-js” como parâmetro de classe utilizará Video.js para reprodução. É provável que também queira incluir o atributo “data-setup”, que diz à biblioteca para ler opções adicionais. Desta forma, pode personalizar o leitor de vídeo de acordo com as necessidades da sua empresa.
Vantagens do streaming com Video.js
Embora os vídeos HTML5 sejam um enorme passo em direção ao streaming de vídeo normalizado, ainda existem problemas entre browsers e utilizadores com browsers antigos.
Se necessário, o leitor Video.js pode recorrer a tecnologias mais antigas, como o Flash, ou eliminar funcionalidades que um navegador não suporta. O Video.js também oferece uma API JavaScript consistente para gerir a reprodução com HTML5, Flash e outras tecnologias de transmissão.
A compatibilidade dos browsers tem sido um desafio para os programadores Web desde há muito tempo. Cada navegador tem implementações ligeiramente diferentes de tecnologias Web padrão, como HTML, CSS e JavaScript, pelo que surgem frequentemente problemas. O Video.js elimina as inconsistências entre navegadores, para que haja uma experiência de visualização perfeita numa grande variedade de dispositivos.
Há também uma série de funcionalidades que a maioria das empresas vai querer que o seu leitor de vídeo tenha, como o modo de ecrã completo e as legendas. O Video.js fornece estas funcionalidades de imediato, pelo que os programadores não precisam de perder tempo a reinventar a roda.
O que é a transmissão em fluxo contínuo HLS?
A Apple criou o protocolo HTTP Live Streaming (HLS) para fornecer transmissões mais rápidas e mais fiáveis do que as tecnologias existentes. Na altura, o HLS corrigiu um problema que os iPhones tinham quando os dispositivos alternavam entre redes WiFi e móveis a meio da transmissão.
O protocolo protocolo de streaming HLS funciona dividindo o conteúdo de vídeo em pequenos pedaços e armazenando-os em servidores HTTP. Estes blocos de vídeo são entregues aos utilizadores finais através de HTTP, pelo que não é necessária uma infraestrutura especial para armazenar conteúdos HLS.
Isso significa que o HLS pode ser facilmente escalado em redes de distribuição de conteúdo (CDNs) em todo o mundo. As CDNs de primeira linha podem permitir transmissão em direto de alta qualidade que limita o armazenamento em buffer, a lentidão e outras interrupções.
Existe também um ficheiro de lista de reprodução M3U8, que é um índice dos blocos de vídeo e das suas variantes para diferentes larguras de banda. Este ficheiro permite que os leitores de vídeo ofereçam transmissão de taxa de bits adaptável, ajustando a transmissão em tempo real com base na largura de banda do utilizador final e noutros factores.
À medida que o vídeo HTML5 se torna o padrão de streaming, o HLS segue o mesmo caminho. Isto deve-se ao facto de o HLS ser o método de entrega preferido pela maioria das empresas que utilizam HTML5 e Video.js.
O que é RTMP?
O protocolo RTMP (Real-Time Messaging Protocol ) é um protocolo de transmissão de dados de áudio e vídeo através da Internet para um leitor Flash. No passado, esta era uma das principais formas de transmissão de vídeo.
O RTMP funciona através da transferência de dados por ligações TCP para manter uma baixa latência. O conteúdo de vídeo é dividido em pacotes e enviado aos utilizadores finais a partir de um servidor especializado ou de qualquer CDN de streaming que ainda suporte RTMP.
No entanto, com as crescentes preocupações sobre a segurança e a velocidade da tecnologia Flash, a adoção do vídeo HTML5 está a aumentar. Isso significa que há uma mudança em direção ao streaming HLS e à adoção do Video.js para muitas organizações também.
HLS vs. RTMP: Qual é o protocolo superior?
Ao escolher o protocolo de transmissão a utilizar, é sobretudo uma questão de reprodução de vídeo. O RTMP não pode ser transmitido num leitor HTML5 e o HLS não funciona com o Flash por defeito. Existem soluções alternativas, mas porquê tornar as coisas mais difíceis? Escolha um formato de transmissão que funcione com a tecnologia de leitor de vídeo mais comum atualmente.
Qual é o melhor formato de transmissão em fluxo contínuo?
Como o RTMP e o Flash continuam a diminuir, o HLS está a tornar-se a forma preferida de fornecer vídeo em fluxo contínuo aos utilizadores finais. A utilização do protocolo baseado em HTTP permite o armazenamento em cache nos servidores, uma entrega fiável e uma experiência de visualização mais suave.
De longe, o maior incentivo para olhar para o HLS é o facto de o Google Chrome ter vindo a eliminar gradualmente o suporte para Flash desde 2015. Desde então, o Chrome utiliza por defeito o leitor de vídeo HTML5 e o Firefox seguiu o exemplo. Isto significa que o Flash poderá não estar disponível durante muito mais tempo para visualizar conteúdos de vídeo baseados em RTMP.
O RTMP – especialmente quando utilizado com o Flash – está a ficar desatualizado, mas ainda pode ser utilizado em conjunto com o leitor de vídeo HTML5 como parte de um processo de transmissão mais amplo, se as empresas o desejarem. De facto, o RTMP ainda é frequentemente utilizado para fornecer transmissões em direto de um codificador para uma plataforma de vídeo em linha.
Em última análise, o streaming de vídeo exige que várias tecnologias trabalhem em conjunto, e a escolha de um protocolo de entrega é apenas parte do processo. Dito isto, se planear utilizar o leitor de vídeo HTML5, o HLS terá vantagem.
Leitor de vídeo HTML5 da Dacast
O Leitor de vídeo HTML5 Dacast fornecido com a plataforma de vídeo em linha é baseado em Video.js. Isto significa que os vídeos podem ser transmitidos nativamente nos navegadores e facilmente incorporados em praticamente qualquer lugar para atingir um público mais vasto.
O leitor de vídeo HTML5 da Dacast apresenta uma série de vantagens em relação ao leitor Video.js em termos de experiência do utilizador, funcionalidades de monetização, capacidades de personalização e suporte de transmissão de áudio.
1. Experiência do utilizador
Juntamente com as funcionalidades pré-construídas do Video.js, o leitor de vídeo Dacast inclui capacidades de visualização mais avançadas. Por exemplo, as empresas podem melhorar a experiência do utilizador utilizando comerciantes de capítulos para facilitar o alojamento e a navegação em vídeos mais longos.
O suporte multilingue significa que as marcas podem fazer corresponder o idioma do leitor de vídeo ao seu público-alvo com apenas alguns cliques. Também é fácil adicionar legendas ocultas ou legendas para uma acessibilidade e comodidade ainda maiores.
As restrições de acesso baseadas na geografia ou no referenciador permitem às marcas manter um controlo total sobre o seu conteúdo. Isto também permite aos organismos de radiodifusão enviar vídeos para a China sem violar os regulamentos.
2. Monetização
O Dacast tem um paywall integrado para monetização de vídeos. As marcas podem utilizar uma barreira de pagamento para uma monetização totalmente baseada em subscrições ou barreiras de pagamento flexíveis que oferecem acesso gratuito a alguns conteúdos e bloqueiam outros com avisos de pagamento.
Um acesso pago integrado é uma excelente forma de gerar receitas, mas os utilizadores precisam de confiar que a sua utilização é segura. O leitor de vídeo HTML5 da Dacast é compatível com a encriptação HTTPS e SSL para garantir a segurança do sistema de pagamento no leitor.
Ferramentas de marketing mais avançadas, como os apelos à ação (CTA), ajudam as marcas a obter o máximo de ROI da sua estratégia de conteúdo de vídeo. As CTAs podem direcionar os espectadores para o sítio Web da marca, sugerir vídeos adicionais ou capturar e-mails para a equipa de vendas.
3. Personalização
Ao contrário de muitos dos plugins de vídeo do passado, o leitor de vídeo HTML5 é uma solução de marca branca e está completamente livre da marca Dacast. As empresas podem personalizar as cores, os logótipos e outros elementos do leitor de vídeo para refletir a sua marca.
Com o Dacast, as marcas têm o controlo total da experiência de visualização e mantêm a propriedade do seu conteúdo durante todo o processo de transmissão.
4. Fluxo de áudio
Embora tenhamos abordado principalmente o vídeo, o Dacast também pode transmitir facilmente áudio em direto ou a pedido. As pessoas recorrem cada vez mais a podcasts ou emissões de rádio enquanto estão em movimento, pelo que o streaming de áudio se tornou outro meio popular para as marcas.
O Dacast pode fornecer fluxos de áudio através de HLS, para que os utilizadores finais possam aceder ao conteúdo e às poderosas funcionalidades do leitor HTML5, tal como os fluxos de vídeo. Isto facilita às marcas a incorporação de áudio em toda a Internet e a expansão do seu alcance.
API de vídeo da Dacast
Muitas marcas vão querer personalizar ainda mais o leitor de vídeo Dacast para satisfazer as suas necessidades. É por isso que a Dacast fornece uma API de vídeo para a gestão de conteúdos e o seu leitor de vídeo.
A API de gestão de conteúdos de vídeo foi concebida para integrar facilmente aplicações e serviços baseados na nuvem com a plataforma Dacast. Desta forma, as marcas podem tirar o máximo partido das suas plataforma de vídeo em linha e fornecer conteúdos de vídeo relevantes e de elevada qualidade aos seus utilizadores finais, tirando partido de sistemas empresariais adicionais.
A API do leitor JavaScript oferece aos programadores controlo total sobre o leitor de vídeo do Dacast, desde a reação a eventos externos até à utilização de plug-ins personalizados. Por conseguinte, a API facilita a personalização da experiência de visualização para utilizadores individuais e apresenta anúncios relevantes antes dos vídeos.
Como posso criar um leitor de vídeo personalizado para o meu sítio Web?
Embora recomendemos a utilização do leitor de vídeo com muitas funcionalidades do Dacast, pode criar o seu próprio leitor utilizando a API do leitor ou o SDK móvel.
Para além do Video.js, a API do leitor Dacast suporta outros leitores como o Flowplayer. Escolha um leitor HTML5 de código aberto para editar ou crie o seu próprio leitor de raiz, continuando a utilizar a API do leitor para tirar partido das funcionalidades do Dacast.
Conclusão
No final, a escolha das tecnologias de transmissão de vídeo resume-se a proporcionar uma experiência perfeita ao utilizador final. Não quer que os utilizadores tenham de pensar em leitores de vídeo, protocolos e outros detalhes de implementação. Considere um reprodutor de vídeo HTML5 criado com Video.js que simplesmente funciona.
Nos Prémios de Escolha dos Leitores do Streaming Media 2019 A Dacast foi nomeada como a melhor plataforma para pequenas e médias empresas. Isto porque a solução oferece, para além do seu leitor de vídeo, transmissão em direto, gravação em fluxo contínuo, vídeo a pedido e muito mais. Se está à procura de uma solução abrangente de vídeo online que lhe permita ter controlo total sobre a experiência do utilizador, considere tirar partido da nossa avaliação de 14 dias.
Descubra se o leitor de vídeo HTML5 da Dacast e as tecnologias de transmissão de vídeo subjacentes são adequadas para a sua organização. O nosso alojamento de vídeo e a plataforma de transmissão em direto são ricas em funcionalidades e acessíveis.
Incentivamo-lo a tirar partido da nossa avaliação sem riscos e a testar todas as nossas funcionalidades gratuitamente durante 14 dias (não é necessário cartão de crédito)!
Para ofertas exclusivas e dicas de transmissão em direto, pode também juntar-se ao nosso grupo no LinkedIn. Ainda tem perguntas, comentários ou feedback? Diga-nos na secção de comentários abaixo e entraremos em contacto consigo.
