Visit the website in English

close

Optimização de Transmissão de Vídeo HTML5 [Actualizado para 2021]

Por Tzipora Elias

20 Min de Leitura

banner image featured
author avatar

Tzipora Elias

Tzipora Elias is a PMP certified project and program manager at Agile SEO and an experienced writer, with 30 years of a variety of experience in the IT field.

Índice

    Se é novo no streaming adaptativo, pode estar a pensar: o que é todo este alarido sobre o streaming de vídeo HTML5?

    Em geral, o streaming de vídeo HTML5 permite a manipulação de conteúdos multimédia usando etiquetas HTML <audio> e <video>. A utilização da etiqueta <video> cria um leitor de vídeo HTML5 nativo, e permite opções adicionais para personalizar e exibir o conteúdo do vídeo.

    Isto pode parecer um pouco técnico e confuso, mas felizmente, a transmissão de vídeo ao vivo está agora mais acessível do que nunca para profissionais que não são muito versados em tecnologia.

    Com o apoio da plataforma de vídeo certa, as emissoras podem carregar vídeos seguros e fornecer conteúdo de alta qualidade através de algum JavaScript, CSS, código simples, e uma sólida compreensão da etiqueta HTML5 <video>.

    Neste artigo, vamos cobrir a transmissão de vídeo HTML5 e as suas principais aplicações. Depois, iremos rever brevemente os leitores de vídeo HTML5 e cobrir três formas de incorporar o seu conteúdo de vídeo num website. Estes métodos incluem a incorporação directa através de uma etiqueta de vídeo HTML5, o desenvolvimento do seu próprio leitor, e a utilização de um leitor existente.

    Para começar, vamos dar uma vista de olhos às origens de streaming de vídeo em HTML5.

    Note-se que o seu post foi actualizado para reflectir a informação mais precisa a partir de Julho de 2021. 

    Tabela de Conteúdos

    • O que é a Transmissão de Vídeo HTML5 e Como Funciona?
    • O que é um Leitor de Vídeo HTML5?
    • Benefícios de Streaming de Vídeo HTML5
    • Protocolo HLS para Streaming de Vídeo HTML5
    • Como Incorporar um Leitor HTML5 para Streaming
    • Como Optimizar um Stream de Vídeo HTML5
    • Etiquetas HTML5 Adicionais para Melhorar Transmissões
    • Conclusão

    O que é a Transmissão de Vídeo e Como Funciona?

    what is live video streaming
    O streaming de vídeo permite aos utilizadores assistir a vídeos através da Internet.

    Desde os anos 90, tem sido possível aceder a conteúdo media em formato vídeo a partir dos nossos navegadores da Internet.

    Relembrando, o streaming de um vídeo é a reprodução de um vídeo online. Este processo é único no sentido em que os visualizadores podem começar a ver o vídeo antes de este ser completamente descarregado, e o resto dos ficheiros descarregados em tempo real.

    Este processo proporciona ao visualizador um stream constante de conteúdo, sem os fazer esperar pelo carregamento local completo de todo o ficheiro antes de o visualizar.

    Ao longo dos anos, a tecnologia de software por detrás deste processo evoluiu para tornar a experiência melhor para os utilizadores. Isto ajudou a melhorar a qualidade do vídeo, reduzir o buffer, e melhorar a funcionalidade global do leitor de vídeo.

    Dito isto, existem três métodos para a transmissão de vídeo online. Vamos ver quais são.

    1. Utilização de um Formato Proprietário

    O primeiro método para a transmissão de vídeo é a utilização de um formato proprietário transmitido a partir de um site específico que é exclusivo desse mesmo sítio.

    Este método refere-se a ficheiros como .mov, .rm, ou .wmv. Quando os emissores apresentaram vídeos pela primeira vez através da Internet, a maioria dos navegadores não tinham leitores de vídeo incorporados. Na maioria dos casos, os sites podiam escolher o formato de vídeo com o qual trabalhar.

    A partir daí, apenas disponibilizavam o leitor e o vídeo na própria página web. Contudo, alguns formatos exigiam um leitor dedicado (como o Apple QuickTime para formatos .mov). Mesmo os vídeos que funcionavam sem um leitor dedicado não eram fáceis de partilhar naqueles primeiros tempos de transmissão.

    Este método é praticamente obsoleto, mas é importante mencioná-lo uma vez que faz parte da história das transmissões ao vivo.

    2. Utilização de um Leitor Intermediário

    Outro método para o streaming online é a utilização de um leitor intermédio. O YouTube é um exemplo perfeito.

    O YouTube foi lançado pela primeira vez em 2005, e durante a década seguinte, a empresa tem ajudado a tornar o streaming de vídeo mainstream. Quinze anos mais tarde, o YouTube continua a ser bastante popular.

    Quando os utilizadores carregam um vídeo para o YouTube, os visualizadores acedem ao conteúdo através do leitor incorporado do YouTube. Da mesma forma, os visualizadores podem partilhar o conteúdo do vídeo através de um código que o YouTube fornece.

    No entanto, os browsers modernos incluem agora leitores de vídeo incorporados próprios. Isto significa que nem sempre é necessário que um website forneça o leitor.

    Embora o YouTube seja gratuito, a plataforma representa desafios significativos para emissores e empresas. Nomeando apenas alguns, estes inconvenientes incluem a marca de terceiros no seu vídeo, perda de propriedade do seu conteúdo, e falta de recursos de monetização.

    Estas limitações colocam a necessidade de uma solução alternativa para emissores que queiram transmitir em directo no seu próprio site.

    3. Utilização de Streaming de Vídeo HTML5

    O método mais moderno é a transmissão de vídeo HTML5. Esta é a abordagem mais inovadora e torna possível a transmissão em praticamente qualquer tipo de dispositivo.

    Com a transmissão de vídeo HTML5, o site que hospeda o conteúdo utiliza HTTP nativo para transmitir directamente os meios de comunicação aos visualizadores.

    As etiquetas de conteúdo (por exemplo, <video>) fazem parte do código HTML. Assim, utilizando a etiqueta <video> cria um leitor de vídeo HTML5 nativo dentro do seu navegador. Estas etiquetas fornecem orientação ao protocolo HTTP quanto ao que fazer com este conteúdo. HTTP exibe o texto e um leitor de áudio reproduz o conteúdo de áudio.

    Além disso, as etiquetas HTML têm vários atributos, ou parâmetros, que fornecem mais detalhes sobre como apresentar o conteúdo. Por exemplo, com a etiqueta <img>, é possível especificar o tamanho da imagem.

    Mais recentemente, o HTML5 expandiu as capacidades de multimédia do HTML básico. Por exemplo, melhorias na etiqueta <img> e a nova etiqueta <video> proporcionam aos criadores de conteúdos maior flexibilidade e facilidade na apresentação de conteúdos multimédia.

    Esta flexibilidade permite a emissores fornecer meios de comunicação sem se preocuparem com o browser que um dado visitante utiliza.

    O que é um Leitor de Vídeo HTML5?

    HTML5 Video Player
    Os leitores de vídeo HTML5 revolucionaram a forma como transmitimos vídeo.

    Até há relativamente pouco tempo, o principal método de entrega de vídeo através da Internet era a tecnologia de vídeo Flash da Adobe.  No entanto, nos últimos anos, este protocolo foi largamente substituído por protocolos de entrega de vídeo como o streaming HLS e reproduzido em leitores de vídeo HTML5.

    Hoje em dia, o Flash é considerado um protocolo de streaming desactualizado. De facto, o Chrome matou completamente o suporte para o Flash no final de 2020, e outros grandes navegadores estão a seguir o exemplo.

    Como descrito acima, o streaming  de vídeo HTML5 fornece soluções mais modernas de streaming de vídeos directamente a partir de um website. Antes do HTML5, os sites dependiam de leitores de flash incorporados para exibir vídeos aos utilizadores.

    Com o elemento de vídeo HTML5, o processo de streaming foi simplificado e melhorado tanto para visualizadores como para emissores. Além disso, os vídeos HTML5 podem ser transmitidos por streaming em todos os tipos de dispositivos. Muitos dispositivos móveis de streaming, por outro lado, não conseguem lidar com vídeos em flash.

    Em geral, o streaming de vídeo HTML5 proporciona uma forma mais simples de utilizar o vídeo em páginas web. Antes da sua publicação como linguagem markup em 2014, os vídeos só podiam ser reproduzidos num navegador com plugins como o Flash. Ao utilizar HTML5, os programadores já não se preocupam com que browser ou que extensão os seus visitantes utilizam. 

    Além disso, HTML5 simplifica a entrega de vídeos, fornecendo suporte a vários atributos, elementos e etiquetas para ajudar na estrutura da sua página web. Estas características de suporte incluem artigos e secções e etiquetas multimédia que suportam a adição de formatos de vídeo e áudio ao seu conteúdo.

    Vantagens de HTML5 para Streaming Video

    A transmissão através de um leitor de vídeo HTML5 é a opção preferida por muitas razões, e tem uma série de benefícios de transmissão. Para começar, é altamente acessível. A maioria das plataformas de vídeo online modernas estão equipadas com leitores de vídeo HTML5. É tão comum que é praticamente a opção padrão.

    A razão pela qual o HTML5 é tão difundido é que é altamente compatível. Só isso é um benefício importante. Os métodos de streaming anteriores eram incompatíveis com o streaming num dispositivo móvel. Uma vez que a utilização de smartphones e tablets se tornou generalizada, a compatibilidade de todos os dispositivos é uma obrigação.

    Outro benefício do streaming de vídeo HTML5 é o facto de ser altamente personalizável. Isto dá a emissores mais controlo sobre o seu resultado final.

    Protocolo HLS para Streaming de Vídeo HTML5

    Nos últimos anos, o HLS tornou-se um protocolo comum para a transmissão de vídeo por leitores de HTML5.

    Estes avanços tecnológicos têm sido vantajosos tanto para emissores como para os visualizadores. Em particular, os emissores podem modificar tanto o HTML5 como o HLS de acordo com as suas especificações. Além disso, estes protocolos são mais seguros, mais fiáveis, e mais rápidos do que as tecnologias anteriores. 

    Se o termo para si é novo, HLS é um acrónimo de HTTP Live Streaming. HLS é um protocolo de streaming multimédia utilizado para fornecer media visual e áudio aos visualizadores online. 

    Lançado pela primeira vez pela Apple em 2009, o HLS streaming é agora frequentemente preferido pelos emissores pelo seu amplo apoio em múltiplos navegadores e dispositivos.

    Outros protocolos mais antigos incluem RTMP, HDS, MSS, e MPEG-Dash. Pode ler mais sobre HLS em geral, e HLS streaming com um leitor de vídeo HTML5, no nosso post sobre os protocolos de streaming HLS.

    Como Incorporar um Leitor para Streaming em HTML5

    Agora que compreende a história e o objectivo dos leitores de vídeo HTML5, vamos falar sobre algumas abordagens ao streaming HTML5.

    Para começar, vamos discutir as três principais formas de incorporar vídeos no seu site:

    • Use a etiqueta HTML5 <video> directamente no seu navegador
    • Cria o teu próprio leitor
    • Escolha um leitor de HTML5 pronto a usar

    1. Incorporar um Vídeo com HTML5

    embed video html5 tag
    Pode usar a etiqueta de vídeo HTML5 para personalizar diferentes aspectos do seu stream de vídeo.

    Quando estiver a configurar a transmissão de vídeo HTML5 no seu site web, deve declarar o seguinte:

    • A etiqueta <video>
    • O URL do vídeo
    • Qualquer exigência estilística que possa querer personalizar (para tornar um leitor de vídeo mais apelativo do que o leitor normal)

    *Nota: É importante notar que a etiqueta <video> é um simples pedaço de código que pode adicionar às suas páginas web.

     A etiqueta padrão <video> fornece a seguinte funcionalidade:

    • Especifique a largura e altura do leitor
    • Exibir ou esconder controlos de vídeo, incluindo play/pause, volume, alternância de ecrã inteiro e procurar o selector
    • Definir uma imagem de poster para mostrar enquanto o vídeo é descarregado ou não é reproduzido
    • Fornecer um conjunto de vídeos em diferentes formatos, para que cada browser possa reproduzir um formato que suporte
    • Incluir legendas incorporadas ou em várias línguas
    • Dizer ao navegador se deve começar a descarregar o vídeo quando a página é carregada ou apenas quando o utilizador carrega em “Play” (Reproduzir)
    • Controlar definições de reprodução automática
    • Decidir se deve reproduzir o conteúdo uma vez ou em loop
    • Indicar se gostaria de reproduzir o vídeo sem som (mudo). Por exemplo, os vídeos automatizados no Facebook mostram a opção mudo sobreposta no vídeo

    Nota: Gostaríamos de salientar que embora a etiqueta HTML5 <video> seja considerado o elemento de leitor de vídeo mais amplamente suportado, nem todas as versões de todos os navegadores o suportam.

    Se os utilizadores visitarem o seu site utilizando versões anteriores aos seguintes browsers, não poderão ver nenhum vídeo exibido utilizando HTML5:

    html5 browser support

    • Chrome: Versão 4.0
    • MicrosoftExplorer (predecessor de Edge): Versão 9.0
    • Mozilla Firefox: Versão 3.5
    • Safari: Versão 4.0
    • Ópera: Versão 10.5

    É também importante notar que a transmissão de vídeo HTML5 requer conhecimentos técnicos e recursos dedicados. Portanto, é melhor optar por um leitor de HTML5 existente se não tiver conhecimentos para manipular o código HTML5, mas discutiremos esta opção mais aprofundadamente neste post.

    2. Construa o seu Próprio Leitor de HTML5

    html5 video player
    Com o treino e equipa adequados, pode desenvolver o seu próprio leitor de HTML5.

    Outra opção para incorporar conteúdo vídeo no seu site é através do seu próprio leitor de vídeo HTML5. A construção de um leitor de vídeo HTML5 personalizado requer uma combinação de codificação HTML e CSS. Requer também conhecimento da API do HTML5 Media.

    Sem especificar qualquer código que estilize o leitor de vídeo HTML5, a aparência do leitor é bastante básica. Depende também do browser a partir do qual o vídeo é reproduzido. 

    Fornecer uma interface consistente para a transmissão de vídeo HTML5 no seu site é também útil para fins de brandinge apresentação visual.

    Mais uma vez, é importante notar que a transmissão de vídeo HTML5 é uma opção bastante técnica, mais adequada para pessoas com os conhecimentos necessários de codificação. Caso contrário, um leitor HTML5 existente, construído por uma equipa dedicada através de uma API de transmissão ao vivo, por exemplo, é uma opção melhor se lhe faltar o conhecimento técnico.

    3. Utilizar um Leitor de HTML5 já Existente

    html5 streaming video
    O Leitor de Vídeo Dacast com características de etiqueta branca fornece uma plataforma pronta a usar para streaming de vídeo HTML5 e personalização da experiência do utilizador.

    Se é novo a transmitir, recomendamos vivamente a utilização de um leitor de HTML5 já existente.

    Como mencionámos acima, muitos leitores HTML5 já existem e podem ser facilmente personalizados pelos emissores para melhor representar a sua marca. Isto permite aos utilizadores que não possuem os conhecimentos técnicos para a transmissão de vídeo HTML5, transmitir o vídeo que escolheram.

    Aqui estão alguns reprodutores de vídeo viáveis disponíveis hoje em dia:

    • VideoJS ié um leitor HTML5 gratuito de código aberto que utiliza Javascript e CSS. Mais de 400.000 sites em toda a web utilizam este leitor em particular.
    • Alguns leitores de HTML5 utilizam o VideoJS como base e acrescentam mais funcionalidades ao leitor básico. Um exemplo é o leitor de vídeo Dacast de todos os dispositivos, que oferece funcionalidade para transmitir vídeo ao vivo e uma skin de leitor personalizável.
    • O JW Player é um leitor de vídeo HTML5 for-pay que suporta vídeo 4K e transmissão de bitrate adaptativa.
    • Outras soluções incluem Flow Player, jPlayer, e Mediaelement.js.

    O vídeo HTML5 nativo não suporta o streaming de aplicações RTMP nem os protocolos HDS. No entanto, JW suporta estes dois protocolos. Portanto, como mencionado acima, se planeia utilizar apenas um leitor de vídeo HTML5, o HLS é provavelmente o melhor protocolo para si.

    Gostaríamos também de salientar que alguns leitores de vídeo HTML5 existentes, incluindo o do Dacast, são construídos para o streaming de baixa latência. Qualquer vídeo que transmite com um leitor de vídeo Dacast utiliza automaticamente o streaming de baixa latência.

    Como Optimizar uma Etiqueta de Stream de Vídeo HTML5

    Há algumas maneiras de tirar o máximo partido da etiqueta HTML5 <video>.

    A primeira coisa a ter em atenção é o seu formato. A utilização de formatos padrão permite que os utilizadores reproduzam facilmente os vídeos. MP4 (MPEG-4) é o formato mais amplamente utilizado. No entanto, os formatos Ogg e WebM estão a tornar-se mais amplamente conhecidos.

    WebM é agora suportado por versões recentes de Chrome, Firefox, Opera, Safari em OS/X, e Microsoft Internet Explorer 9 e superior (requer componentes WebM MF). Com este desenvolvimento, múltiplos formatos significam uma visualização mais fácil.

    Uma grande técnica de optimização na entrega de vídeo é reduzir o tempo de atraso ou latência. Actualmente, o vídeo é a forma mais popular de consumo de conteúdo. Os utilizadores passam apenas alguns segundos à espera que os vídeos comecem a ser reproduzidos.

    As emissoras também vão querer optimizar as suas definições de controlo. Aqui está uma lista rápida de algumas definições comuns a ter em conta:

    • Tamanho físico: Definir o tamanho físico máximo para proporcionar controlo sobre os carregamentos e reduzir o tempo de latência. Utilizar um tamanho de fotograma de 1280×720, por exemplo, é normalmente suficiente para a maioria dos vídeos.
    • Comprimento: Cortar os vídeos para capturar os frames mais convincentes.
    • Qualidade e Bitrate: Ajustar estas definições para diminuir o tamanho do ficheiro sem impacto significativo na qualidade do vídeo percepcionada.
    • Video-Codec: Geralmente, pode utilizar as configurações padrão para normalizar e optimizar o vídeo para a web. No entanto, em alguns casos, pretende definir manualmente o codec para diminuir ainda mais o tamanho do ficheiro.
    • Compressão: Comprima sempre os ficheiros de vídeo antes de os utilizar no seu site.

    Etiquetas HTML5 Adicionais para Melhorar o Streaming

    A etiqueta <video> não é a única ferramenta na sua caixa de ferramentas HTML5 para optimização de vídeos. Por exemplo, listando as etiquetas <source> juntamente com as suas correspondentes etiquetas <type> numa ordem optimizada, pode melhorar o seu desempenho vídeo.

    Isto é demonstrado neste exemplo de código HTML5 para streaming de vídeo ao vivo:

    <video width=”480” controls>

        <source scr=”https://myweb.org/webm/video1.webm” type=”video/webm”>

        <source scr=”https://myweb.org/mp4/video1.mg4” type=”video/mp4”>

        <source scr=”https://myweb.org/ogg/video1.ogv” type=”video/ogv”>

        <track kind=”captions” src=”sampleCaption_he.vtt” scrlang=”he”>

    </video>

    Tenha em mente que um browser irá reproduzir o primeiro tipo de formato suportado. Por outras palavras, a primeira entrada na lista é o padrão. Chrome e Firefox reproduzirão o vídeo WebM, enquanto os predecessores do Microsoft Edge saltarão para o vídeo MP4.

    Recomenda-se que liste primeiro o vídeo mais suportado e o mais pequeno, para garantir que o ficheiro é reproduzido por defeito.

    A utilização de algumas etiquetas adicionais irá ajudá-lo a personalizar o seu leitor de vídeo. Aqui estão algumas opções:

    • a etiqueta <width> controla a largura do vídeo que é reproduzido.
    • a etiqueta <controls> é um atributo Booleano que permite aos utilizadores acederem aos controlos de reprodução
    • a etiqueta <track> cria uma transcrição para aumentar a acessibilidade do conteúdo.
    • a etiqueta <embed> cria um recipiente para suportes externos.

    Finalmente, se quiser que o vídeo comece automaticamente, utilize o elemento video <autoplay>.

    Conclusão

    HTML5 video stream
    A etiqueta de script vídeo HTML5 é utilizada para incorporar um script do lado do cliente no JS (JavaScript).

    Recapitulando, o stream de vídeo HTML5 melhora as páginas web e envolve os visitantes melhor do que apenas texto. Para manter os visualizadores, as emissoras devem optimizar o streaming HTTP ao vivo para assegurar uma entrega de vídeo rápida, suave e compatível para os visualizadores. A utilização correcta das etiquetas HTML5 assegura que o seu conteúdo é acessível e mantém os visitantes sempre presentes.

    Neste artigo, definimos o HTML5 video streaming e os leitores de vídeo. Também discutimos diferentes formas de transmissão de vídeo ao vivo no seu site através de embedding. Além disso, destacamos alguns prós e contras comuns de cada método.

    Ainda não está a fazer streaming com Dacast e pronto para dar uma tentativa à nossa plataforma de streaming ao vivo? Oferecemos uma gama de novas e avançadas funcionalidades, incluindo o alojamento de vídeo na China e opções de monetização, a preços acessíveis.

    Inscreva-se para o nosso teste gratuito de 30 dias para começar a transmitir hoje. Ajudá-lo-emos a iniciar a transmissão numa questão de minutos. Não é necessário cartão de crédito.

    Comecar Gratuitamente

    Após esta leitura, qual é a sua opinião sobre a incorporação de vídeo usando HTML5? Ainda tem perguntas a que gostaria que respondêssemos, aqui ou em artigos futuros? Diga-nos através da secção de chat!

    Para ofertas exclusivas e dicas regulares sobre transmissão ao vivo, pode também juntar-se ao nosso grupo do LinkedIn.

    author avatar

    Tzipora Elias

    Tzipora Elias is a PMP certified project and program manager at Agile SEO and an experienced writer, with 30 years of a variety of experience in the IT field.

    Inscreva-se para um teste de 14 dias.