Artigos HTML e CSS HTML5 Video Tutorial

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

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>
Esta figura é a saída de vídeo simples de incorporação na página em 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>
exemplo de demonstração de adicionar vídeo do YouTube na página 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 style="text-align:left">
<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>
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.
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.