Para que todos possamos relembrar brevemente, aqui está um exemplo de como incorporar vídeos clássicos em um site:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Uma sintaxe como esta está longe de ser bonita.
No entanto, mesmo que se deixe de lado o ponto estético: a sintaxe nesta forma é simplesmente muito propensa a erros e complexa. Em HTML5, os vídeos podem ser incorporados de forma muito mais fácil. Para isso, é utilizado o elemento de video.
Aqui está um exemplo de como incorporar o referido elemento de video:
<video src="video.ogv" width="300" height="200"> Seu navegador infelizmente não é compatível com HTML5 </video>
Esta é a forma mais simples. No entanto, três atributos são decisivos nesta forma de sintaxe. Através de src, é especificado o vídeo a ser incorporado. Certifique-se de fornecer o caminho correto aqui. Os dois atributos width e height determinam a largura e altura do vídeo. Se nenhum dos dois valores for especificado, o vídeo será exibido em seu tamanho original. Se apenas um dos valores for especificado, o navegador calculará automaticamente o outro valor. O atributo autoplay instrui o navegador a iniciar automaticamente o vídeo assim que a página for carregada. Normalmente, este atributo não deve ser definido, pois a reprodução automática geralmente não é desejada pelos usuários. Isso é ainda mais verdadeiro para usuários que utilizam dispositivos móveis com largura de banda limitada.
Outro atributo interessante é controls. Se este atributo for utilizado, o navegador exibirá controles nativos para reprodução e volume.
<video src="video.ogv" width="300" height="200" controls> Seu navegador infelizmente não é compatível com HTML5 </video>
Aqui está o resultado no navegador:
A barra exibida permite não só pausar e reiniciar o vídeo, mas também controlar o volume.
Você pode especificar uma imagem através do atributo poster para ser exibida até o início do vídeo. Para isso, é utilizado o atributo poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Seu navegador infelizmente não é compatível com HTML5 </video>
Certifique-se novamente de fornecer o caminho correto, para que a imagem seja realmente visualizada.
É preciso ter cuidado ao utilizar o atributo autoplay. Pois este atributo especifica que o vídeo deve ser reproduzido automaticamente assim que estiver disponível.
<video src="video.ogv" width="300" height="200" autoplay> Seu navegador infelizmente não é compatível com HTML5 </video>
No que diz respeito ao tráfego, o atributo preload pode ser interessante. Pois este atributo controla o comportamento de pré-carregamento. Este atributo pode assumir os seguintes valores:
• auto - O navegador pode carregar todo o arquivo.
• none - O arquivo não precisa ser pré-carregado.
• metadata - O arquivo pode ser pré-carregado.
Se o atributo de pré-carregamento estiver ausente, as configurações padrão do navegador serão utilizadas.
### Vídeos e os Codecs
Quem estuda a incorporação e reprodução de vídeos em páginas da web, em algum momento irá se deparar com o problema dos diferentes codecs. Graças a estes codecs, os vídeos podem ser comprimidos e descomprimidos de forma eficiente. O problema é que, até hoje, os fabricantes de navegadores não chegaram a um formato de codec comum. Para o HTML5 (e, por consequência, para vocês), isso significa que não há codecs unificados para vídeos e arquivos de áudio.
Para vídeos, os formatos Ogg e MP4 se estabeleceram. Portanto, é quase sempre seguro oferecer o vídeo nestes dois formatos. Para isso, atribuímos ao elemento de vídeo dois elementos source.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Você não está especificando a fonte do vídeo dentro do elemento video. Em vez disso, lá você fornece apenas informações gerais sobre a exibição. Qual vídeo será exibido é determinado pelo elemento source. Você associa o vídeo correspondente ao atributo src. Após o type é indicado em qual formato o vídeo está disponível.
Se vários elementos source forem fornecidos, o navegador sempre reproduzirá o primeiro vídeo que "se encaixa". A seguir, será explicado o que significa esse "encaixe".
Mas afinal, qual formato cada navegador suporta? A resposta a essa pergunta é fornecida pela tabela a seguir.
| Navegador | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | A partir da Versão 9 | |
| Mozilla Firefox | Sim | |
| Google Chrome | Sim | Sim |
| Opera | Sim | |
| Safari | Sim | |
| iPhone | Sim | |
| Android | Sim |
A tabela destaca o dilema: A distribuição de interpretação dos formatos é quase equitativa entre os diferentes navegadores. Portanto, é quase obrigatório fornecer vídeos em ambos os formatos.
Através do atributo media, que só pode ser atribuído ao elemento source, é possível especificar explicitamente para qual tipo de mídia o vídeo é adequado. Para especificar vídeos especialmente para dispositivos específicos, o atributo media é atribuído ao src. Através deste atributo media, é especificado o tipo de mídia desejado.
Uma possível aplicação para o elemento source poderia ser da seguinte forma:
<video width="400" height="300">
<!-- Apenas para dispositivos móveis -->
<source src="video_mobil.ogg" media="handheld" />
<!—Todos os outros dispositivos -->
<source src="video_normal.ogg" media="all" />
</video>
Através do atributo media, é verificado se o dispositivo é móvel. Neste caso, um vídeo de tamanho menor será reproduzido. Se for outro tipo de dispositivo, será utilizado o valor 'all'.
Vídeos integrados com segurança
Como é sabido, o HTML5 ainda não é suportado por todos os navegadores. Isso também se aplica ao elemento video. Uma solução é combinar diferentes técnicas de incorporação. Assim, os conhecidos elementos object e embed são combinados com video. Isso poderia se parecer com o seguinte:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Vídeos integrados dessa maneira serão reproduzíveis na maioria dos navegadores. Navegadores que conhecem o elemento video o usarão. Os outros navegadores, no entanto, usarão as informações nos elementos object ou embed.
