Banner propaganda da DevMedia - Cursos de desenvolvimento web

Como inserir vídeos com uso da HTML5

visualizações Publicado em: 26/02/2017 Quero ser um autor
foto do autor
Autor: Terry Smith

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:

HTML

<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.

HTML

<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.

HTML

<video controls poster="demo.jpg">
  <source src="video/demo.mp4" type="video/mp4">
  <source src="video/demo.webm" type="video/webm">
  <sourceo 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 (http://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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo