HTML5: Tag Video com alternativa em Flash
Postado por: Pedro Rogério em
Com a tag <video> do HTML5 torna-se possível inserir vídeos em páginas web de uma forma muito simples, semelhante a inseção de imagens em documentos HTML, onde o próprio browser fornece as funções de reprodução sem a necessidade de plugins como Flash ou Quicktime.
A marcação HTML para isso é muito simples, e você pode ver um exemplo abaixo:
<video src="someclip.mp4" controls />
Safari (versão e posteriores), Google Chrome e Firefox 3.1b2 (e versões posteriores) possuem suporte a HTML5. A Opera no atual momento possui um experimento onde dá suporte superficial a tag video.
Safari reproduz arquivos do tipo MPEG4 (e, pelo menos no Mac, é coisa que o QuickTime pode reproduzir). Firefox atualmente só suporta arquivos Ogg Theora.
Essa falta de suporte aos codecs pode ser superada através da inserção de 2 formatos de arquivo na mesma tag <video>:
<video controls> <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 para Safari --> <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora para Firefox --> </video>
Já os browsers antigos que não suportam a tag <video>, temos que usar uma alternativa em Flash. Uma alternativa muito simples é utilizar o SWFObject.
Observem o HTML:
<div id="demo-video-flash">
<video id="demo-video" poster="snapshot.jpg" controls>
<source src="video.m4v" type="video/mp4" /> <!-- MPEG4 para Safari -->
<source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora para Firefox -->
</video>
</div>
Nós colocamos a tag <video> dentro de uma div que é para anexá-la ao SWFObject. Observem abaixo o JavaScript com o auxílio da biblioteca jQuery:
<script type="text/javascript">
$(document).ready(function() {
var v = document.createElement("video"); // Para browsers que suportam a tag <video>
if ( !v.play ) { // Caso contrário, utilize Flash.
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var flashvars = {
file: "video.f4v",
image: "snapshot.jpg"
};
swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
}
});
</video></script>
A detecção de suporte do browser é feita através da criação de uma tag <video>, caso o elemento não possa ser criado, então entra em ação o flash que usa o SWFObject para montar o player no HTML.
Vejam agora um exemplo em funcionamento. Caso seja de seu interesse, você pode baixar aqui os arquivos utilizados nesse tutorial para estudo.
A desvantagem para essa solução, já que nem todos os browsers possuem suporte nativo e a utilização de codecs ainda não é padronizada, é que você tem que fornecer 3 opções do mesmo arquivo (MPEG4, Ogg e FLV)
Esse tutorial foi escrito com base no original do site de Henrik Sjökvist. Todo o material aqui utilizado compete ao autor original do post.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Com o uso correto do ActionScript no Flash mais tecnologias como o Flash Access da familia Flash Media Server, você pode além de reproduzir uma mídia protege-la de abuso.
Como ficará a segurança com essa nova tag do HTML 5? Já que agora uma simples visualização no HTML você já tem o endereço do vídeo.
Muito bom post!!! E também outra coisa, como dito no post, “torna-se possível inserir vídeos em páginas web de uma forma muito simples, semelhante a inseção de imagens em documentos HTML”. Tão semelhante que ao clicar com o botão direito em cima do vídeo ainda tem a opção de salvar como.
Ótima dica Pedro, testei e funcionou aqui no IE6 ( com flash ) e no Firefox normalmente. ShoW =D
abraço
Belo post cara! Estou estudando HTML5 também e estou gostando demais, utilizei ano passado o flex e já larguei dele.
Vou fazer um site pra banda do meu irmão e vou utilizar essa tag video do HTML5, mas eu não vou fazer esse tratamento aí pra colocar flash se o usuário estiver usando o IE, eu vou fazer o seguinte: se estiver usando o IE vou fazer um alert dizendo: “Vê se cria vergonha na cara, tira essa b*&$%# de browser e instala um decente” aehsuaeaueha.
abraço
O Dênis, não precisa criar um alert pra isso. Coloca a seguinte linha no da sua página e seja feliz:
;)
Opa parece que não é permitido postar código no meio do comentário. Desculpa ae… de qualquer forma, basta importa esse js no seu html. http://renie.com.br/scripts/barraSemIe.js
O que o código faz exatamente cara? Se o cara não tiver suporte coloca uma lista de browsers? Entendi certo?
Quase, ele verifica qual browser está acessando, se for o IE, em qq versão, aparece uma barrinha no topo do site com links para ele intalar um navegador melhor e uma mensagem bacana ;). Abra o meu site no firefox e no IE para você ver como funciona.
mto bom cara, meus parabéns, ótimo script, consegui acessar com o IE dum colega de trabalho aki do lado, affff, eu uso Ubuntu e nada de Microsoft, aehuaseuh, a barrinha que se abre em cima é linda, show de bola, heheheh
verdade seja dita, na verdade o script não é meu, é do iMasters, eu só personalizei a barra, mudei um pouco as funções e a ideologia, vamos dizer q uns 10% do código fui eu que fiz. Mas modéstia a parte eu acho que a minha ficou melhor que a original hahahahah
Boooa, html5 vem pra apavorar, e ja começou detonando os plugins \o/. Flash sucks….
Outra coisa que passou despercebido, mas foi notada pelo Lee Brimelow.
Terei sempre dois arquivos de vídeo (H.264 e Ogg) pro site ser visualizado em todos os browser no mercado? O codec é mais outra incompatibilidade de browsers?
Abraço.
Leo,
O que acontece é o seguinte. A Apple e a Microsoft fazem parte da MPEG-LA, empresa detentora da patente do codec h264. Já a Mozilla, no atual momento não quer utilizar softwares proprietários e por esse motivo utiliza o formato aberto OGG Theora. Agora, quem perde com essa guerra de egos?
É, quem se f#de é o desenvolvedor. Imaginei um tipo de formato standard pra acompanhar as WebStandards, mas talvez demore um consenso desse.
Muito bom! Mas pelo jeito o HTML5 só começará a ser suportado no Internet Explorer 10… 11… Hahaha, até lá, “workarounds”
Última coisa (prometo rs)
E quanto a interatividade nos vídeo, coisas tipo: http://www.youtube.com/watch?v=oD-sSolVDiY
Serão possíveis?
Leo,
Por enquanto pouca coisa ainda é possível ser feita, mas dê uma olhada aqui o que já andaram fazendo: http://www.dailymotion.com/openvideodemo
Valeu Pedro
Valeu, Renie, amei a barrinha ….
Abraço!
Social comments and analytics for this post…
This post was mentioned on Twitter by pinceladasdaweb: Novo Post: HTML5: Tag Video com alternativa em Flash – http://migre.me/hFOQ...