Como inserir vídeos com uso da HTML5

Introdução

O vídeo é uma das maneiras de visualizar um produto que permite aumentar a conversão de uma página da web. Às vezes, é melhor usar uma apresentação multimídia de seu produto ou serviço do que uma imagem com texto. Este artigo descreve como adicionar vídeo a uma página usando tags html5. Isso é conveniente se você não possui seu próprio canal no YouTube e o arquivo de mídia é armazenado em seu computador e você precisa colocá-lo no site.

Muitos desenvolvedores sabem que uma das principais inovações da nova especificação é o surgimento de tags especiais para incorporar arquivos de áudio e vídeo na página web. Elementos de vídeo e áudio permitem adicionar o arquivo de mídia desejado ao seu blog sem adicionar plugins especiais e sem problemas.

Por que usar a tag video

Talvez você saiba que alguns recursos do HTML5 ainda são pouco suportados. Assim, a tag video refere-se à parte da especificação que é quase totalmente suportada. Claro, não no IE6, mas quem precisa disso agora? Se falamos sobre navegadores modernos, todos eles podem entender essa tag e processá-la corretamente.

Como inserir um vídeo no site usando tags do HTML5

Em geral, para incorporar vídeo no site usando tags do html5, uma linha de código é suficiente:

<video src="video/demo.mp4"></video>

Mas, neste caso, podem surgir problemas. O fato é que nem todos os navegadores suportam absolutamente todos os formatos. Talvez em alguns de navegadores seu vídeo não seja reproduzido. Para evitar tais problemas, é necessário salvar o vídeo em vários formatos e adicionar algumas linhas de código. Os formatos mais populares são mp4, webm, ogg.

<video poster="demo.jpg">
  <video src="video/demo.mp4" type="video/mp4">
  <video src="video/demo.webm" type="video/webm">
  <video src="video/demo.ogv" type="video/ogg">
</video>

Assim, o navegador lerá o código e escolherá o formato que ele pode reproduzir. Mas isso não é tudo. Para economizar o tempo que o navegador gasta procurando a linha direita do código, bem como o tempo para tentar iniciar o vídeo, é necessário adicionar o atributo type, que contém o formato de vídeo. O fato é que o navegador primeiro verifica esse atributo.

Atributo poster - especifica a imagem que será exibida antes do início da reprodução. Mais precisamente, antes da definição do formato que o navegador pode reproduzir.

Os navegadores mais antigos não suportam a HTML5. Portanto, você precisa inserir atributos adicionais para que o navegador tente reproduzir o vídeo usando o flash player.

<video controls poster="demo.jpg">
  <source src="video/demo.mp4" type="video/mp4">
  <source src="video/demo.webm" type="video/webm">
  <source src="video/demo.ogv" type="video/ogg">
  <object>
    <embed src="demo.mp4" type="application/x-shockwave-flash" 
    allowfullscreen="false" allowscriptaccess="always">  		
  </object>
  Formato não suportado  
</video>

Como você pode ver, o atributo controls foi adicionado ao código para que os elementos de controle, como rebobinar e pausar, apareçam. E também a tag <object>, que diz ao navegador o que fazer se nenhum dos formatos não puder ser reproduzido. No nosso caso, o navegador tenta abrir o vídeo no flash player. Em caso de falha, dê uma mensagem de que o formato não é suportado.

Existem atributos adicionais que podem ser especificados para a tag <video>. Aqui estão os principais:

Autoplay

Com este atributo, o vídeo começa a ser reproduzido automaticamente após a página ser carregada. Este truque é muitas vezes presente nas páginas de venda para chamar a atenção de uma pessoa. Agora o Google Chrome proíbe a reprodução automática de vídeos.

Controls

Um parâmetro muito importante que adiciona controles de vídeo. Na verdade, este atributo é usado quase sempre, porque você precisa dar à pessoa a oportunidade de colocar filme em pausa ou rebobinar.

width e height

São atributos obrigatórios para redimensionar a imagem.

Preload

Quando você adiciona esse atributo, o vídeo começa a carregar junto com o carregamento da página. Isso é muito conveniente, porque o usuário não precisa esperar até que o conteúdo seja totalmente carregado. Embora muitos usuários agora tenham uma conexão rápida à Internet e não há problemas com o carregamento de páginas. Além disso, é importante lembrar sobre usuários que não têm tráfego ilimitado e o carregamento automático sem permissão não será agradável para eles.

Loop

Esta opção define a repetição automática do vídeo após a conclusão da reprodução.

Como obter código pronto HTML5

Hoje em dia, existem muitas ferramentas para criar automaticamente o código HTML5, o que simplifica muito o trabalho. O Freemake Video Converter (https://www.freemake.com/br/free_video_converter/ - link abre em nova janela ) é um programa que suporta quase todos os formatos de vídeo como material de origem, converte o arquivo em HTML5 (H.264, WebM, VP8) e fornece o código pronto para incorporação no site.

Como obter o código usando o programa

1. Adicione seu arquivo ao programa. Use o botão de vídeo para fazer isso ou simplesmente arraste o arquivo para o programa.
2. Clique no botão redondo HTML5 na parte inferior da tela. Selecione a resolução do seu vídeo de saída e clique em Converter. Como resultado, você receberá três arquivos de vídeo e uma página com HTML5 na pasta que será nomeada como seu ficheiro original.
3. Siga o guia "Como incorporar vídeo na sua página web", que se abre no seu navegador após a conclusão da conversão.

Como inserir um vídeo do YouTube

Se o clipe que você precisa estiver no YouTube, você pode simplesmente copiar o código pronto e colá-lo no editor (no modo html).

1. Abra o YouTube no seu computador e vá para a página de vídeo que deseja embedar.
2. Clique no botão Compartilhar abaixo do player.
3. Selecione Incorporar.
4. Copie o código.
5. Cole o código em seu blog ou site.

Se você tem um site no wordpress, basta inserir o URL no lugar certo e o mecanismo irá incorporá-lo automaticamente na página. Esta é a maneira mais fácil.

Com o advento de novas tags, a inserção de arquivos de mídia na página web tornou-se muito mais simples. Sem dúvida, qualquer desenvolvedor web precisa saber como isso é feito. Além disso, usando a tag video ou classes de estilo, você pode adicionar um quadro ou alguns outros elementos decorativos ao seu conteúdo visual.

Compartilhe essa matéria com seus amigos