iwtraining

Áudio e Vídeo no HTML5 Front-end

Áudio e Vídeo no HTML5

O HTML5 fornece um padrão aberto e competitivo para apresentar multimídia na web com elementos de vídeo e áudio nativo e APIs para controle. Estes elementos são <audio> e <video>.

Por que você precisa de um elemento <video>? Anteriormente, caso desenvolvedores quisessem incluir vídeo em um página web, eles tinham de fazer uso de elemento <object>, que é um contêiner genérico para objetos estrangeiros. Devido as inconsistências dos navegadores, eles também precisavam utilizar o anteriormente inválido elemento <embed> e duplicar diversos parâmetros, o que resultava em um código feio e deselegante.

Pior que isso era que os navegadores passavam o  vídeo para plug-ins de terceiros; esperar que o usuário tenha a versão correta daquele plug-in  e então esperar que o plug-in seja acessível ao teclado. Plug-ins também podem ser uma causa significativa de instabilidades e podem preocupar usuários menos técnicos quando solicitam instalações novas.

Além dos problemas citados, existiam vários problemas relacionados a consumo de bateria, picos de processamento e a falta de suporte em dispositivos móveis de qualquer tecnologia que possa reproduzi-los.

Então agora, elementos <video> podem ser estilizados com CSS; assim como serem redimencionados com o passar do mouse e utilizando-se transições de CSS, por exemplo.

Há similaridades entre os elementos <audio> e <video> e você irá notar isto ao utilizá-los. Ações como executar, pausar e carregar fazem parte de ambas as especificações.

Para o que a multimídia HTML5 não é boa.
Proteção de cópias é uma área que ainda não é coberta pelo HTML5 – não surpreendentemente, dado que é um padrão aberto. Então as pessoas que precisam de DRM provavelmente não utilizarão vídeo e áudio em HTML5, visto que serão fáceis de baixar.

Os plug-ins continuam sendo a melhor maneira de transmitir áudio e vídeo da máquina de um usuário para outro usuário, existem elementos como o  <device> sendo desenvolvidos, mas ainda não tem suporte de nenhum navegador.

Anatomia

Em sua maneira mais simples, incluir um vídeo em uma página em HMTL5 exige meramente este código:

<video src="video.ogv"></video>

A extensão de arquivo .ogv é utilizada aqui para apontar para um vídeo Ogg Theora.

Autoplay

Você pode dizer ao navegador tocar o vídeo automaticamente ao carregar a página.

<vídeo src=”video.ogv” autoplay="true">
  Seu navegador não suporta vídeos em HMTL5
</video>

Aqui vale uma observação, se você estiver desenvolvendo aplicações para dispositivos móveis ou sites em versão para smart phones, é bom lembrar que tanto a Apple quanto o Google desabilitaram o suporte ao autoplay nos seus navegadores mobile, porque? É importante lembrar que em todo o mundo os planos de conectividade celular envolvem pagamento por uso ou franquias que limitam a quantidade de dados que o usuário pode trafegar por mês, um vídeo em boa qualidade pode fazer o seu usuário trafegar bastante informação que ele não gostaria.

Controls

Agora vamos adicionar alguns controles parar executar o vídeo. Esses controles são gerados pelo navegador, então é de se esperar que cada um mostre um layout diferente para eles.

<vídeo src=”video.ogv” autoplay="true" controls="controls">
  
        Seu navegador não suporta vídeos em HMTL5

</video>

video1

Poster

O atributo pôster aponta para uma imagem que será exibida em quanto o conteúdo do vídeo é baixado.

<vídeo src=”video.ogv” autoplay="true" controls="controls"  poster=“poster.gif">
</video>

Heigh, width

Esses atributos dizem ao navegador o tamanho e a largura do vídeo. Se você não os utilizar o navegador atribuirá valores padrões para o seu vídeo.

<vídeo src=”video.ogv” autoplay="true" controls="controls"  poster="w3html5.gif" width="640" height="480">

    Seu navegador não suporta vídeos em HMTL5

</video>

Loop

O atributo loop faz exatamente o que você espera dele,  faz com que o vídeo repita  infinitamente.

Preload

O preload diz ao navegador pré-carregar o vídeo. Se você disser apenas preload, o navegador pode decidir o que fazer seguindo seus padrões, um navegador mobile por exemplo, pode não carregar nada.

  • preload=auto – É uma sugestão ao navegador que ele deveria carregar o conteúdo do vídeo antes do mesmo ser executado, é uma sugestão porque o navegador carrega se achar que deve.
  • preload=none – Sugere que nada deve ser carregado até que o usuário peça.
  • preload=metadata – Sugere ao navegador carregar apenas os metadados (dimensões, primeiro quadro, lista de faixas, duração e por ai vai)

Codecs, o pesadelo.

Quando o HTML5 foi desenhado ele ordenava que todos os navegadores suportassem pelo menos dois codecs, o Org Vorbis, para áudio e o Org Theora para vídeo. Entretanto, esses codecs foram removidos quando a Apple e a Nokia reclamaram, então a especificação não menciona qual o formato de vídeo deve ser utilizado, no entando, cada navegador terá seu leque de formatos suportados o que faz a vida do desenvolvedor se não um inferno, no mínimo um inconveniente de ter que ter todos os seus vídeos em no mínimo 3 formatos.

Formato / Navegadores

  • H.264, mp3 / Safari, IE9
  • WebM / Chrome
Theora, Ogg / Firefox

A lista de suporte deve mudar a medida que cada fabricante aderir aos formatos adotados por outros, mas não espere ver o Firefox adotando o H.264 nunca.

<source>
  <video width="640" height="480" id="video1" > <!-- autoplay="true" loop="loop" controls="controls"-->
  <source src="media/video.mp4" type="video/mp4">
  <source src="media/video.ogg" type="video/ogg">
</video>

Controlando o seu vídeo com JavaScript

Para controlar manualmente o seu vídeo é bastante simples, o objeto vídeo possui alguns controles bem práticos.

<script type="text/javascript">
function videoControl() {
   var v = document.getElementById("video1");
   if(v.paused) {
      v.play();
   } else {
      v.pause();
   }
 };
</script>

Após recuperarmos o elemento vídeo com o document.getElementById(“video1″), podemos iniciar a sua execução utilizando apenas o .play e pausar com o .pause. Podemos ainda testar se o vídeo está em execução com o .paused.

Áudio

A tag de áudio é exatamente igual à tag de vídeo, não tem apenas os atributos referentes a largura e altura, mas tudo que fizemos no vídeo podemos fazer igual com o áudio.

<audio controls="controls">
    <source src="audio.mp3"> 
    <source src="audio.ogg">
 </audio>

Verificando Compatibilidade

Uma forma rápida de verificar o suporte as tags <video> e <audio> e testando a existência da função canPlayType(). Caso não haja suporte, você poderá usar uma outra forma para exibir o conteúdo ao usuário, como, por exemplo, usando o Flash Vídeo.

var isPossibleVideo = document.createElement("video").canPlayType;
var isPossibleAudio = document.createElement("audio").canPlayType;


if ( isPossibleVideo ) {
     alert( "Seu navegador pode executar vídeo." );
}
else {
     alert( "Seu navegador NÃO pode executar vídeo." )
;
}



if ( isPossibleAudio ) {
    
     alert( "Seu navegador pode executar áudio." );

}

else {
    
     alert( "Seu navegador NÃO pode executar áudio." )
;
}

Uma outra forma, ainda mais simples, é apenas exibir um texto. Veja o código abaixo, ele exibirá o texto que fica entre as tags caso não haja suporte a áudio ou vídeo pelo seu navegador.

<audio src="audio.ogg">
 Seu navegador NÃO pode executar áudio.
 </audio>
<video src="video.ogg">
 Seu navegador NÃO pode executar vídeo.
 </video>

Também é possível exibir uma imagem, caso ache melhor.

<video src="video.ogg">
    <img src="video.jpg" width="600" height="400" alt="Video">
</video>

Por fim, caso deseje executar uma mídia alternativa, você também pode, basta adicionar o código de incorporação dentro das tags. Vamos ver um exemplo com um arquivo .swf (Flash).

<video src="video.ogg">
   <object type="application/x-shockwave-flash" data="player.swf" width="854" height="504">
   <param name="allowfullscreen" value="true">
   <param name="allowscriptaccess" value="always">
   <param name="flashvars" value="file=video.mp4">
   </object>
</video>

Caso queira, podemos juntar tudo, e deixar nosso código bem completo.

<video controls poster="video.jpg" width="600" height="400">
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
   
   <object type="application/x-shockwave-flash" data="player.swf" width="600" height="400">
      <param name="allowfullscreen" value="true">
      <param name="allowscriptaccess" value="always">
      <param name="flashvars" value="file=video.mp4">
      <!--[if IE]>
      <param name="movie" value=“player.swf">
      <![endif]-->
   
      <img src="video.jpg" width="854" height="480" alt="Video">
   
      <p>Seu navegador NÃO pode executar vídeo.
      <a href=“video.webm”>baixe clicando aqui</a>.</p>
   </object>
</video>

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário