Utilização da Tag <video> no HTML 5
Uma tag especial para melhorar a experiência do seu site
Em 2014 quando o World Wide Web Consortium (W3C) lançou a quinta versão do padrão HTML, muitas novidades impressionaram os desenvolvedores. Entre as mais comentadas, estavam o suporte a SVG, MathML, sintaxe mais semântica com a adição das tags <main>, <aside>, <header>, <footer> e <section>, entre outras. Mas duas novas tags causaram um burburinho especial, pois eram muito esperadas, <video> e <audio>, que resolveriam a deficiência do HTML em relação a suporte multimídia.
Para ter uma ideia do avanço que esse padrão trouxe, antes do HTML5 era necessário a utilização de Flash para executar elementos multimídia, o que aumentava a complexidade de desenvolvimento e o tamanho do site, fazendo com que o carregamento da página fosse mais lento.
Nesse artigo vamos focar na utilização da tag <video>, pois, apesar da sua grande utilidade, ainda é desconhecida pela maioria dos desenvolvedores Web.
Antes de explicar como utilizar a tag <video>, iremos começar falando quais são os seus principais atributos. Afinal, não se faz uma receita de bolo sem antes dizer quais são seus ingredientes, não é mesmo?
Atributos
Nesta seção será detalhado os atributos da tag <video>, dentre elas: src, height, width, controls, poster, autoplay, loop, preload e muted.
O atributo src ou source é utilizada não somente para tag <video> , mas também para outras tags semânticas. Sua função consiste em definir o diretório da mídia utilizada, no caso, o vídeo. Sua utilização pode ser feita de duas formas.
A primeira forma, o src, é ideal para quando vamos declarar apenas um único formato de vídeo. Inserimos ela dentro da tag de abertura <video>, da seguinte forma:
Os navegadores não suportam todos os formatos de vídeo. Com isso, precisamos declarar mais de um tipo de formato. A melhor forma de se fazer é utilizando uma outra tag, o <source>, também usando o atributo src. Ele não será declarado na tag de entrada, mas sim, dentro da tag. Sendo então codificado de seguinte maneira:
Os atributos height e width podem definir, respectivamente, altura e largura de um vídeo, fazendo suas declarações na própria tag de abertura, como segue abaixo:
Já o atributo controls permite que o usuário controle a reprodução do vídeo.
Essa não é a única maneira de criar o controle de reprodução do vídeo, há outra maneira em que podemos personalizar o seu painel, mas essa nova forma necessita da utilização de JavaScript. Porém, não vou entrar em detalhes, pois o foco desse artigo é no HTML 5.
Agora, sabe aquela imagem padrão antes da inicialização do vídeo? Saiba que é possível personalizar ela com o atributo poster da seguinte maneira:
Quando acessamos um página e o vídeo começa a reproduzir automaticamente, se deve ao atributo autoplay. Logo abaixo é mostrado sua utilização.
Mas vale lembrar, tome cuidado ao fazer o uso desse atributo, pois ele pode gerar desconforto ao usuário quando acessar o seu site. Use com responsabilidade!
Já percebeu que, em alguns locais, quando você assisti um vídeo, ao terminar, ele reproduz novamente , de forma automática? Esse acontecimento ocorre devido ao atributo loop, que é declarado da seguinte forma:
O atributo preload é o pré carregamento do vídeo na página. Ele sugere ao navegador qual das formas, que irão ser citadas abaixo, é melhor para o usuário.
A string pode ser definida como:
- None - indica que não deve haver pré carregamento.
- metadata - somente metadados de vídeo (por exemplo, comprimento) são obtidos.
- auto ou “ “(string vazia) - o vídeo pode ser baixado sem consentimento do usuário.
Por fim, o atributo muted silencia a página quando carregada.
Afinal, como se usa a tag <video>?
Agora, que os “ingredientes” foram informados, podemos partir para a criação:
1. Abra a tag <video> dentro do <body> em seu HTML.
2. Dentro da tag de abertura coloque o atributo controls .
3. Na tag <source> inclua o atributo src com o diretório do vídeo e em type coloque o tipo de mídia e o seu formato.
4. Determine a altura(height) e a largura(width) do seu vídeo.
O resultado é este:
Suporte dos navegadores
É importante lembrar que existem variados formatos de vídeo, e que os navegadores não reproduzem todos, cada navegador reproduz determinados formatos de vídeos.
No HTML 5, os formatos de vídeo suportados são esses: MP4, WebM e Ogg.
Com isso, se deve declarar as opções de formatos para o navegador acessar qual ele suporta. E como faço isso? É simples! Declare um <source src> para cada formato de vídeo, como no exemplo abaixo:
Mas se o navegador não suportar nenhum desses formatos, ainda podemos fazer com o que navegador diga quando o vídeo não é suportado, da seguinte maneira:
Ao escrever isso após os formatos, você acredita que essa mensagem irá aparecer no navegador, não é mesmo? Mas a resposta é a seguinte: esse texto só será exibido quando o formato do navegador não for compatível com os declarados.
Vantagem / Desvantagem
O surgimento dessa tag proporcionou mais agilidade ao programador para colocação de vídeos em sites. Antes era feito com a utilização de Flash para reprodução de mídia, que era de complexa execução e consumia alta largura de banda.
Mas, como na vida “nem tudo são flores” , ao contratar o serviço de hospedagem do site é necessário um maior consumo de banda, o que pode acabar saindo um pouco mais caro. Com isso, muitos optam por utilizar o embed de videos de outros servidores, como o do YouTube. Além disso, muitos não escolhem essa ferramenta pelo fato de seus usuários não utilizarem versões atualizadas dos navegadores, não possuindo, então, suporte para reprodução de multimídias do HTML 5.
Conclusão
Como esperado, a nova tag cumpriu com as expectativas, atuando no seu papel de facilitar o trabalho executado pelo programador. A abordagem dessa inovação se demonstra tão significativa pelo fato do avanço trazido por ela, como exemplo já difundido, a diminutiva complexidade no desenvolvimento do site, pela qual antes se fazia através da utilização de Flash. Essa tecnologia foi aprimorada por algumas empresas, como o Youtube e o Vimeo, que a utilizam em sua plataforma.
Fazendo relação com a utilização e viabilidade dos navegadores antigos, recomendo fortemente que sejam feitas suas atualizações, para que haja maior proveito de seus atributos e se tire vantagem de tudo de bom que essa tag tem a oferecer. Ou então caberá a opção de encontrar algum polyfill para tal recurso.
