HTML5 Video Tutorial: Trabalhando com video no c�digo HTML

Qual a relaç�o de v�deo e HTML5?

Este artigo vai lidar com execuç�o de v�deo em p�ginas web usando o padr�o HTML. Esse tutorial ir� cobrir diferentes tipos de m�todos para exibir o v�deo no HTML5; ser� apresentado uma compreens�o b�sica da tag video e tamb�m mostrar v�rios exemplos de diferentes integraç�es com outros recursos de HTML5.

HTML5 Video Tutorial

Reproduç�o de v�deo do YouTube na p�gina HTML5
DOM para tag <video>
Formato de v�deo suportados no HTML5
Conclus�o

Um dos t�picos mais pesquisados em recursos HTML5 � a tag video. A tag video � muito mais do que simplesmente uma opç�o m�dia em flash. Em comparaç�o com outras tags presentes no HTML, a tag video tag recentemente se juntou a liga, mas sua capacidade e suporte entre navegadores t�m aumentado a uma velocidade incr�vel.

Veremos a seguir como os desenvolvedores adicionam v�deos: arquivos de v�deo, incluindo v�deos YouTube, s�o incorporados em um arquivo HTML usando a tag. O atributo src define qual arquivo de v�deo para incorporar a p�gina. A tag <embed> n�o requer um fechamento (/>).

O exemplo da Listagem 1 ir� descrever um exemplo simples de incorporar um v�deo no HTML5. Para isso, tomamos uma determinada altura e largura para mostrar o v�deo. O atributo controls adiciona controles de v�deo, como play, pause, e ajuste de volume.

Relacionado: Guia do programador Front-End

Listagem 1: Script para adicionar o arquivo de v�deo simples na p�gina <!DOCTYPE html>

<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>
<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="Yes Bank Advertisment.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="Yes Bank Advertisment.mp4">
</object>
</video>
</body>
</html>

Figura 1: Esta figura � a sa�da de v�deo simples de incorporaç�o na p�gina em HTML.

Aqui vimos que o atributo de controle adiciona controles de v�deo, como play, pause, e ajuste de volume. Tamb�m pode ser visto que o v�deo est� sendo reproduzido em uma regi�o espec�fica na p�gina, raz�o � que n�s inclu�mos os atributos width e height para reproduç�o do v�deo. Se a altura e largura s�o definidas, o espaço necess�rio para o v�deo � reservado quando a p�gina � carregada. No entanto, sem esses atributos, navegador ir� adaptando-se ou ir� exibir a p�gina completa.

N�o havia nenhum procedimento padr�o para reproduzir v�deo em p�ginas web HTML5. A maioria dos v�deos hoje s�o mostrados atrav�s de flash ou v�rios plug-ins. No entanto, diferentes navegadores podem ter v�rios plug-ins. Sem qualquer m�todo padronizado torna-se dif�cil fornecer v�rios plug-ins para navegadores diferentes. Como um rem�dio para isso, o HTML5 define um novo elemento, que especifica uma forma padr�o para incorporar um v�deo/filme em uma p�gina da web: o elemento <video>. Esta tag <video> � suportado por todos os principais navegadores, tais como Internet explorer, Google Chrome, Safari, Opera etc.

A tag <video> foi proposta pelo Opera Software em fevereiro de 2007. Opera tamb�m lançou uma compilaç�o de visualizaç�o que foi mostrada na mesma data, e um manifesto que chamou de video para se tornar primeira classe de cidad�o da web.

Reproduç�o de v�deo do YouTube na p�gina HTML5:

V�deos do YouTube podem ser inclu�dos no arquivos HTML, tanto que o Google oferece o c�digo para fazer tanto na mesma p�gina como no v�deo em si. Existem alguns par�metros que est�o inclu�dos no c�digo oferecido pelo YouTube que ajuda a personalizar o objeto de v�deo incorporado. Al�m disso, se for avaliar profundamente o c�digo, voc� ser� capaz de identificar o elemento <embed> e ver o atributo src apontando para a URL do arquivo de m�dia.

Voc� tamb�m pode incorporar c�digo de v�deo HTML5 em sua p�gina da web usando a tag. Para atender os navegadores que n�o suportam a tag <object>, Voc� pode aninhar ao tag <embed> dentro da tag <object>.

O exemplo listado cobrir� uma demonstraç�o de adicionar v�deo do YouTube:

Listagem 2: Reproduç�o de v�deo do YouTube na p�gina


<!DOCTYPE html>
<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>
 
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/tIBxavsiHzM" />
<embed src="http://www.youtube.com/v/tIBxavsiHzM" type="application/x-shockwave-flash" width="425" height="350" />
</object>
</body>
</html>

Figura 2: A figura acima � exemplo de demonstraç�o de adicionar v�deo do YouTube na p�gina HTML.

Observaç�o: O script acima � suportado pelo IE 7.

DOM para tag <video>:

Esta seç�o cobrir� o m�todo de modelo de objeto de documento, propriedades e eventos para o elemento </video>. Existem v�rios m�todos, propriedades e eventos dispon�veis que permite que voc� manipule <video> e elementos usando JavaScript.

Isto fornece aos desenvolvedores trabalhar com v�rios atributos de exibiç�o (videoWidth, videoHeight), controles (Boolean): poster (URL), src (string), atributo de reproduç�o (currentTime (float):,startTime(float):, duraç�o (float), pausa (float), t�rmino (float), autoplay (float)) .

Primeiramente, no script voc� pode ver que tomamos inicialmente o atributo de controle para adicionar controle de v�deo, como play/pause volume. Em segundo lugar, podemos tomar tr�s funç�es para a regulaç�o, tela de tamanho grande, tela pequena e tela normal.

Listagem 3: DOM Propriedades e m�todos

 
<!DOCTYPE html>
<html>
<head>
<title>HTML Video Tag Example</title>
</head>
<body>
<br>
<video id="custom_video_play" width="400" controls="controls">>
<source src="Yes Bank Advertisment.mp4" type="video/mp4"><source src="mov_bbb.flv" type="video/flv"> Browser Not Supporting
</video>
</div>
<script>
var myVideo=document.getElementById("custom_video_play");
function makeBig()
{
myVideo.width=650;
}
function makeSmall()
{
myVideo.width=350;
}
 
function makeNormal()
{
myVideo.width=450;
}
</script>
<div >
<button onclick="makeBig()">Adjust: Large Screen</button>
<button onclick="makeSmall()">Adjust: Small Screen</button>
<button onclick="makeNormal()">Adjust: Normal Screen</button>
<p></p>
</body>
</html>

Figura 3: Acima a figura � uma sa�da do exemplo anterior; explicando o m�todo DOM e propriedades da tag <video> no qual voc� pode ver os tr�s bot�es para ajustar os tamanhos de tela e controle de v�deo como play/pause, e volume.

Formato de v�deo suportados no HTML5:

Que formatos de v�deo os navegadores devem apoiar, n�o est� declarado na atual especificaç�o de projecto do HTML5. Existem tr�s formatos de v�deo que funcionam nativamente em alguns navegadores. Infelizmente, nenhum formato funciona em todos os navegadores, ent�o voc� precisa fazer pelo menos dois, se voc� quiser suporte de v�deo HTML5 significativo. V�deo MP4 toca nativamente no Safari, Chrome e IE9 (Vista / Windows 7). Recomendaç�o: Minimamente, MP4 + ou WebM ou Ogg, ou talvez ambos.

Conclus�o

Vimos como um v�deo � embutido em uma p�gina web usando a tag <video> e suas definiç�es e os formato de v�deo suportados (Segundo a vers�o dos navegadores). Tutorial tamb�m explicou propriedades da tag <video>. A adiç�o de videos em HTML 5 � uma �rea ampla que vai al�m desse artigo.

Links �teis

Saiba mais sobre JavaScript ;)

Programando em HTML5:
Ao ser anunciada a vers�o 5 do padr�o HTML, inicialmente parte do mercado n�o recebeu com grande entusiasmo, acostumado a receber poucos recursos novos de uma vers�o para outra. A verdade � que, desde que a vers�o 4.0 foi lançada em 1997, poucos avanços aconteceram nos dez anos seguintes.
As Novidades do HTML5:
Neste artigo apresento as principais novidades da nova vers�o da linguagem de marcaç�o de hipertexto HTML, que j� est� dispon�vel nos principais navegadores de internet com suporte quase que total.
O que � o HTML5:
Veja neste artigo um pouco da hist�ria do HTML, o que � o HTML5 e suas principais mudanças em relaç�o �s vers�es anteriores.

HTML5 Video Tutorial

Veja neste artigo como utilizar a tag video disponível no HTML5. Vamos demonstrar a funcionalidade dando alguns exemplos com Video File, Youtube, e usando propriedades DOM.

Qual a relaç�o de v�deo e HTML5?

HTML5 Video Tutorial

Reproduç�o de v�deo do YouTube na p�gina HTML5:

DOM para tag <video>:

Formato de v�deo suportados no HTML5:

Conclus�o

Links �teis

Saiba mais sobre JavaScript ;)

Artigos relacionados