HTML - Vídeo

» HTML » HTML Tutorial - Inserindo vídeo em páginas HTML

Um arquivo de vídeo pode ser inserido em uma página HTML de duas maneiras. A primeira seria usando a tag <embed/> . Essa tag não significa tag de fechamento. Ela funciona, geralmente, da mesma forma que as tags para fotos.

html<embed src="example.mpeg" autostart="false" height="30" width="144" />

Você também pode inserir um arquivo de vídeo usando um link.

html<a href="example.mpeg" title="Download movie">nome do filme</a>

Extensões suportadas para as tags embeb

São:

.swf - feitos por Macromedia Flash
.wmv - Microsoft Windows Media Video
.mov - Quick Time Movie, pertence a Apple
.mpeg - criado por Moving Pictures Expert Group.

As mais usadas são .mpeg and .swf, por causa de seu formato compacto.

Atributos das tags embed

autostart - define se o arquivo irá rodar atomaticamente depois que a página é aberta. Você pode ter um valor de verdadeiro ou falso aqui.
hidden - define se os botões são escondidos ou não. Você pode ter um valor de verdadeiro ou falso aqui.
volume - pode ter qualquer valor entre 0 e 100
loop- define se o arquivo tocará novamente depois de terminar. Você pode ter um valor de verdadeiro ou falso aqui.
playcount - estabelece quantas vezes o arquivo irá rodar. Por exemplo, playcount="2" significa que irá repetir duas vezes antes de parar.

Inserindo um vídeo do Youtube usando tag embeb

Você pode fazer isso de maneira bem fácil, já que o Youtube tem em todas as páginas um código HTML.

html<object width="425" height="344" data="https://www.youtube.com/embed/yUtUHfwHI9I"></object>

html<embed src="https://www.youtube.com/embed/yUtUHfwHI9I" allowfullscreen="true" width="425" height="344">

html<iframe  width="425" height="344" src="https://www.youtube.com/embed/yUtUHfwHI9I" frameborder="0" allowfullscreen></iframe>

Demo

Apesar de que parece um tanto quanto caótico, a parte boa é que você só precisa copiar do Youtube e colar em seu site, e já verá o seu vídeo. Apesar de que ultimamente o Youtube tem disponibilizado uma simples iFrame para divulgar seus propósitos.

Devemos mencionar que embed scripts no youtube não são XHML válidos. Para gerar códigos válidos para vídeos no youtube em XHML recomendamos essa ferramenta para vídeos generates valid XHTML YouTube embed code . Apenas entre com o URL que você encontrou no vídeo e você terpa um código XHMTL válido.

HTML5 tag de vídeo

Com a introdução de HTML5 as tags de vídeo se espalharam rapidamente com um bom suporte de navegadores. Tags de vídeo são usadas para adicionar vídeo a página HTML. No momento HTML5 video tag, suporta três tipos de arquivos de vídeo:

mp4 - MIME-type video/mp4
webm - MIME-type video/webm
ogg - MIME-type video/ogg

html<video width="320" height="240" controls>
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.mp4" type="video/mp4">
  <source src="/assets_tutorials/media/Shaun-the-Sheep-The-Movie-Official-Trailer.ogg" type="video/ogg">
Seu navegador n~~ao suporta tags de vídeo.
</video>