Visual Dicas

quarta-feira, 11 de outubro de 2017

Visual Dicas

Posted: 10 Oct 2017 01:43 PM PDT

Inserir vídeo no blog

Neste artigo vamos mostrar como inserir players de vídeo diretamente em um blog de forma fácil, simples e sem precisar de nenhum tipo de plugin externo e nem do Youtube.

Video courtesy of Big Buck Bunny.

Seus vídeos poderão ser inseridos diretamente no post através do editor HTML quando estiver escrevendo um artigo (leia: Como inserir códigos HTML nas postagens do Blogger e Como inserir códigos HTML nas postagens do Wordpress), ou no sidebar do blog (leia: Como instalar um Widget no seu Blog -(Blogger) e Como inserir Widgets no Wordpress sem a instalação de plugins).

Usando HTML5

O HTML5 trouxe muitas facilidades para os desenvolvedores de sites e blogs. Uma delas é permitir a inserção de vídeo diretamente no nosso blog sem a necessidade de plugins externos, que muitas vezes causam problemas de compatibilidade com o browser ou com o sistema operacional utilizado.

A tag HTML5 utilizada para inserir vídeo funciona praticamente em todos os navegadores. Entretanto, existe um problema de compatibilidade com o formato do arquivo de vídeo utilizado. Veja a seguir uma tabela que mostra a compatibilidade dos formatos de vídeo com diferentes navegadores.

Arquivos mp4, ogg e WebM

Neste tutorial vamos utilizar como exemplo vídeos no formato mp4 e ogg. Mas você também poderá utilizar a extensão WebM.

Atenção: O formato mp4 é suportado por todos navegadores modernos. Entretanto, o mesmo não acontece outros formatos. Veja a tabela abaixo:

Extensão	IE	FIREFOX	OPERA	CHROME	SAFARI
Ogg	não	sim	sim	sim	não
MP4	sim	sim	sim	sim	sim
WebM	não	sim	sim	sim	não

Se seus arquivos de vídeo estiverem em outros formatos, utilize um programa conversor.

Hospedando arquivos de vídeo (mp4, ogg ou webM)

Para utilizarmos o display mostrado aqui, será necessário hospedar suas músicas em servidores na internet.

Se você possui um site hospedado, poderá enviar seus arquivos de áudio para o servidor via FTP (O que significa FTP e para que serve? – recomendo que utilize o software FileZilla).

Se você não possui um servidor ou não sabe com utilizar transferência via FTP, poderá deixar hospedado seus arquivos gratuitamente no Google Sites (leia: Usando o Google Sites como servidor de arquivos para blogs e sites), ou em qualquer outro aplicativo para armazenagem de arquivos em nuvem.

No nosso exemplo, hospedamos os arquivos no Google Sites…

https://sites.google.com/site/servidorvisualdicas/arquivos-mp4-ogg/mov_bbb.mp4

https://sites.google.com/site/servidorvisualdicas/arquivos-mp4-ogg/mov_bbb.ogg

Código display HTML5

Para você utilizar o display HTML5, basta copiar o código abaixo e colar no blog. Depois altere o que estiver em vermelho, colocando os links dos arquivos mp4g e/ou ogg.

<video width="largura do vídeo" controls>
<source src="SEU_ARQUIVO.ogg" type="video/ogg" />
<source src="SEU_ARQUIVO.mp4" type="video/mp4" />
Seu navegador não suporta este vídeo
</video>

Observação 1: Você poderá optar apenas pelo link do arquivo MP4, que é compatível com todos os navegadores modernos. O uso de dois links pode ser útil para navegadores mais antigos.

Observação 2: Você poderá colocar colocar a largura do vídeo em pixels utilizando o atributo "width". Se você omitir este atributo, o vídeo será inserido no tamanho original.

Observação 3: Você também poderá inserir a frase "Seu navegador não suporta este vídeo", que deverá aparecer somente em navegadores não compatíveis com os formatos utilizados.

Veja como ficou o código do nosso exemplo:

<video width="530" controls>
   <source src="https://sites.google.com/site/servidorvisualdicas/arquivos-mp4-ogg/mov_bbb.mp4" type="video/mp4">
   <source src="https://sites.google.com/site/servidorvisualdicas/arquivos-mp4-ogg/mov_bbb.ogg" type="video/ogg">
   Seu navegador não suporta este vídeo.
< /video>

E abaixo o exemplo em ação:

Autoplay - Rodar o vídeo automaticamente

Se você desejar que o vídeo inicie automaticamente quando a página é carregada, basta acrescentar o atributo "autoplay", ficando o código da seguinte forma:

<video controls autoplay>
<source src="SEU_ARQUIVO.ogg" type="video/ogg" />
<source src="SEU_ARQUIVO.mp3" type="video/mp4" />
Seu browser não suporta este vídeo
</video>

Agora é só substituir os textos em vermelho pelos arquivos mp4 e ogg hospedados na web. Assim, toda vez que o seu leitor rodar a página onde está inserido o código HTML, automaticamente irá iniciar o vídeo inserido. Tente você mesmo » (Squids Editor)

Leia também o artigo: Como inserir músicas (áudio) no seu blog…

byALF