Inserindo Video na pagina HTML usando o marcador IMG

É possível colocar vídeo em uma página HTML utilizando o marcador <img>. A única diferença é que se acrescenta o atributo DYNSRC.

Exemplo:

<img dynsrc="origem do vídeo" />

Primeiramente vou ensinar a colocar vídeo numa página usando o marcador <img>. Depois ensinarei a colocar vídeos usando o marcador <embed>.

Principais atributos do marcador <img> para se exibir vídeos.


Compatível apenas com o Internet Explorer, permite a inclusão do vídeo no formato AVI
(Áudio Vídeo Interlave) e em outros formatos numa página HTML. Mais para frente
explicarei como colocar vídeos compatíveis em qualquer browser.

O marcador utilizado como já falei acima é o <img> o mesmo utilizado para imagens. A diferença está na utilização do atributo DYNSRC (Dynamic Source) indicado que a origem do objeto é a dinâmica. Os outros browsers não entendem o atributo DYNSRC e, neste caso para que pelo menos possam exibir uma imagem estática do vídeo. utiliza-se o atributo SRC, indicando o arquivo imagem que corresponde ao vídeo. O caminho do vídeo precisa ser dado corretamente. Caso esteja no mesmo diretório em que a página, uma referência simples ao nome do arquivo é o suficiente.

Exemplo:

<img src="racha.mpeg" />

Clique aqui e veja o exemplo pronto! (Precisa estar conectado a internet) Se você viu o vídeo pode perceber que não existe a barra com o botão EXECUTAR, PAUSAR, PARAR, ETC. Isso porque para o navegador não é um vídeo e sim uma imagem. Mas é possível PARAR e pedir para TOCAR novamente usando o botão direito do mouse.

Largura e Altura


<img dynsrc="origem do vídeo" height="valor" width="valor" />

Especifica respectivamente a largura e a altura do vídeo. Para que não ocorra um redimensionamento é preciso que a imagem alternativa tenha as mesmas dimensões que o vídeo.

Exemplo:

<img dynsrc="racha.mpeg" height="321" width="321" />

Imagem alternativa

<img dynsrc="origem do vídeo" src="valor" />

Para que os browsers que não entendem o atributo DYNSRC ou por algum motivo o endereço dinâmico não for encontrado, usa-se o SRC para que eles possam exibir uma imagem alternativa.

Exemplo:

<img dynsrc="racha.mpeg" src="carro.jpg" />

Inicialização

<img dynsrc="origem do vídeo" start="opção" />

Refere-se ao momento da exibição na página. Para que o vídeo seja iniciado, automaticamente no carregamento da página é preciso utilizar START="FILEOPEN" Para que o vídeo seja iniciado quando o usuário passar o mouse sobre ele é preciso usar START="MOUSEOVER"

Exemplo:

<img dynsrc="racha.mpeg" start="MOUSEOVER" />

Obs: Não precisa especificar o atributo START; apenas se não quiser a função FILEOPEN, pois essa opção é padrão.

Repetições

<img dynsrc="origem do vídeo" loop="número" />

Especifica o número de vezes que o vídeo vai ser exibido. Para que o vídeo seja exibido continuamente é preciso utilizar LOOP=INFINITE

Exemplo:

<img dynsrc="racha.mpeg" loop="INFINITE" />

Caso não coloque este atributo o vídeo só irá reproduzir uma vez! Daí se o usuário quiser rever o vídeo ele vai ter que clicar em cima do quadro com o botão direito do mouse e pedir para “Tocar”.

Assine nosso Feed ou receba os artigos por email