Este é o terceiro post da série “HTML 5: Início, Meio e Fim”. Se você está chegando agora, recomendo efetuar a leitura dos dois primeiros artigos da série para fins de contextualização. Abaixo disponibilizo os links para estes conteúdos.
- HTML 5: Início, Meio e Fim – Introdução
Neste post apresento uma contextualização do ambiente web e uma justificativa para a nova especificação do HTML. - HTML 5: Início, Meio e Fim – Novos elementos
Neste post apresento um overview da nova especificação, bem como os principais novos elementos.
Após apresentar a justificativa para a especificação do HTML 5 e o overview dos principais recursos que estão/estarão disponíveis, é chegado o momento de aumentar-mos o zoom sobre cada um deles e apresentarmos suas características, formas de utilização e cenários de aplicação.
A tag <video>
Quando temos que descrever uma série de elementos, em geral começamos falando primeiro daqueles mais bacanas (bacana no sentido de que gostamos mais de utilizar) para só então, apresentarmos aqueles mais “chatos”. Nesta série, falaremos primeiro dos elementos cool e depois dos demais.
Até aqui, não havia um padrão para exibição de vídeos em aplicativos web. O que se fazia basicamente para realizar esta tarefa era, construir um player com tecnologias adjacentes (Flash ou Silverlight) e anexá-lo com o auxílio de funções Javascript, por exemplo.
Muito embora esta solução atenda a boa parte dos casos, ela não é generalista, e isso, gera alguns problemas. Apenas para justificar esta afirmação, considere o caso de um usuário com conhecimentos básicos sobre informática. Ao abrir um site de vídeos, por exemplo, caso o plugin específico que possibilita a visualização do player não esteja disponível, a chance daquele usuário deixar o site é grande, pois não possui a intuição para procurar o plugin e instalá-lo adequadamente. Assim, a web atual “clama” pela padronização deste elemento.
O HTML 5 traz suporte nativo para inserção de vídeos através da tag <video>. Assim, o problema mencionado acima e outros, tendem a desaparecer ou ao menos, serem minimizados. Abaixo é apresentada a relação browser + formato de vídeo suportado + versão.
- OGG (arquivos OGG com codec’s Theodora e Vorbis)
Internet Explorer (qualquer versão): Não suportado
Firefox (3.5 ou superior): Suportado
Opera (10.5 ou superior): Suportado
Chrome (5.0 ou superior): Suportado
Safari (qualquer versão): Não suportado - MPEG-4 (arquivos MPEG-4 com codec’s H.264 e AAC)
Internet Explorer (9.0 ou superior): Suportado
Firefox (qualquer versão): Não suportado
Opera (qualquer versão): Não suportado
Chrome (5.0 ou superior): Suportado
Safari (3.0 ou superior): Suportado - WebM (arquivos WebM com codec’s VP8 e Vorbis)
Internet Explorer (qualquer versão): Não suportado
Firefox (4.0 ou superior): Suportado
Opera (10.6 ou superior): Suportado
Chrome (6.0 ou superior): Suportado
Safari (qualquer versão): Não suportado
Como trabalhar com a tag <video>?
O HTML 5 não perdeu a típica simplicidade na utilização dos recursos, e isto, é uma boa notícia. A seguir, apresentamos as formas de trabalho possíveis com o recurso de vídeo e os atributos associados com os respectivos comportamentos proporcionados. Considere o código apresentado pela Listagem 1.
[html]
<html>
<body>
<video src=”pass-countdown.ogg” controls=”controls”>
Recurso não suportado pelo browser.
</video>
</body>
</html>
[/html]
Listagem 1: Adicionando um vídeo no formato OGG
Testamos o código apresentado pela Listagem 1 no IE 9 e no Chrome e obtivemos dois diferentes resultados, os quais são apresentados nas Figuras 1 e 2. Como apresentado no início deste post, o IE 9 não oferece suporte para o formato ogg de vídeo e portanto, a mensagem da Figura 1 é exibida. Ao testar no Chrome, obtivemos o resultado apresentado pela Figura 2 (exibição do vídeo).
Figura 1: Processamento no Internet Explorer 9
Figura 2: O vídeo sendo exibido no Chrome
Você pode visualizar o exemplo em funcionamento clicando AQUI.
Outra característica interessante associada a tag <video> é a possibilidade de adicionarmos múltiplas fontes para exibição. Através do subelemento <source> no interior das tag’s <video></video>, é possível “linkar” diferentes tipos de vídeos em sequência, conforme apresenta a Listagem 2.
[html]
<html>
<body>
<video width=”300″ height=”200″ controls=”controls”>
<source src=”pass-countdown.ogg” type=”video/ogg” />
<source src=”lamboandsq_sqb87829.mp4″ type=”video/mp4″ />
O browser não dá suporte ao recurso de vídeo.
</video>
</body>
</html>
[/html]
Listagem 2: Diversos vídeos em um mesmo local
Você pode visualizar o exemplo apresentado pela Listagem 2 online clicando AQUI (vide suporte do browser).
Atributos passíveis de utilização com <video>
Nos exemplos apresentados pelas Listagens 1 e 2 foi possível notar alguns atributos que podem ser utilizados para parametrizar e alterar as formas de exibição dos vídeos, tais como: type, width, height, controls, etc. Muito embora estes sejam importantes neste contexto, não são os únicos. A seguir, é apresentada uma lista com um overview sobre os atributos disponíveis.
- src: permite especificar a url a qual indica o local onde o arquivo fonte de vídeo encontra-se hospedado. O caminho pode ser informado de forma relativa ou absoluta.
- poster: permite especificar uma imagem enquanto o vídeo não é carregado/exibido. Vários formatos de imagem são aceitos (JPG, GIF, PNG, dentre outros). Assim como no atributo src, a imagem pode ser informada relativamente ou absolutamente.
- preload: indica se o vídeo deve ser pré-carregado ou não. Em caso positivo, qual deve ser o método de pré load? (none, metadata ou auto). Este atributo é interessante, pois, pode fornecer alguma informação ao usuário a respeito do tempo para exibição do vídeo. É importante observar que, o atributo autoplay naturalmente sobrepõe o preload, já que a “bufferização” da mídia ocorre antes de qualquer outro evento.
- autoplay: caso o vídeo informado exista, automaticamente a “bufferização” inicia até o nível mínimo e o vídeo começa a ser reproduzido. Este atributo é “booleano”, portanto, sua adição sem a definição explícita de valor implica no funcionamento da mesma forma.
- loop: indica ao browser se o vídeo deve ser reproduzido novamente após sua exibição. Este processo é cíclico, daí o nome “loop“. A exemplo de autoplay, loop é “booleano”, portanto, a declaração explícita de um valor é dispensada.
- controls: indica a presença ou ausência dos comandos “play, pause, volume, etc.) A exemplo dos atributos anteriores, controls é “booleano” e segue o mesmo conceito.
- width:permite definir a largura do player de vídeo. É especificado em número de pixels.
- height: permite definir a altura do player de vídeo. É especificado em número de pixels.
O exemplo prático
Conforme prometido nos posts introdutórios desta série, para cada elemento apresentado, além da parte conceitual, apresentaremos também um exemplo prático utilizando tais conceitos. Assim, para demonstrar a utilização da tag <video>, o que faremos é uma lista de reprodução, cujos vídeos, estão cadastrados em um banco de dados e a exibição é dinâmica. Para construção do exemplo, utilizaremos o WebMatrix e o banco de dados acoplado a ele, isto é, SQL Server CE.
O primeiro passo de nossa aplicação exemplo é a criação do banco de dados. A tabela (chamada “tbVideos”) possui estrutura extremamente simplidicada, como pode ser visualizado na Figura 3. Neste post, não entraremos em detalhes sobre como criar um banco de dados e uma tabela utilizando WebMatrix.
Figura 3: Estrutura da tabela “tbVideos”
Após a definição da estrutura de “tbVideos”, o que fizemos foi popular a tabela com apenas dois registros (como pode ser visualizado na Figura 4).
Figura 4: Tabela populada para realização dos testes
Com a tabela devidamente preenchida, podemos criar nossa “mini” central de vídeos. A Listagem 3 apresenta a estrutura da página inicial da relação de vídeos.
[html]
<!DOCTYPE html>
@{
var db = Database.Open(“HTML5”);
string sentenca = “SELECT * FROM tbVideos ORDER BY IDVideo DESC”;
var dados = db.Query(sentenca);
}
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>HTML 5 – Utilizando a tag video</title>
<link href=”CSS/Estilos.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
<h1>
Relação de Vídeos
</h1>
<span class=”subtitulo”>
Escolha o vídeo que deseja assistir
</span>
<fieldset>
<legend><span class=”subtitulo”>Vídeos</span></legend>
@{
foreach(var v in dados){
<div class=”div_video_geral”>
<div class=”div_imagem”><img src=”Images/@v.ImagemExibicao” /></div>
<div class=”div_titulo”><a href=”@Href(“Player.cshtml”, v.IDVideo)” class=”link_titulo”>@v.TituloVideo</a></div>
</div>
}
}
</fieldset>
</body>
</html>
[/html]
Listagem 3: Página que exibe a relação de vídeos cadastrados
O ASP.NET Razor já foi tratado em mais detalhes em posts anteriores neste site. Você pode visualizá-los clicando aqui. Assim, de forma geral, o que ocorre na Listagem 4 é a exibição dos vídeos cadastrados anteriormente. Uma observação importante é que, os vídeos e as imagens de exibição estão agrupadas em subdiretórios (“/Videos/pass-countdown.ogg” e “/Images/dotnetinterior_128.jpg” respectivamente) do projeto.
Ao clicar no link com o título do vídeo, o usuário é levado para uma página que deverá exibir o vídeo solicitado. A Listagem 4 exibe o código que apresenta o player e exibe o vídeo de forma automática.
[html]
<!DOCTYPE html>
@{
var db = Database.Open(“HTML5”);
var VideoID = UrlData[0];
string sentenca = “SELECT * FROM tbVideos WHERE IDVideo = @0″;
var dados = db.QuerySingle(sentenca, VideoID);
}
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>HTML 5 – Utilizando a tag video</title>
<link href=”CSS/Estilos.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
<h1>
@dados.TituloVideo
</h1>
<fieldset>
<legend><span class=”subtitulo”>Em execução</span></legend>
<video src=”/Videos/@dados.URLVideo” width=”600px” height=”400″ autoplay=”autoplay” controls=”controls” poster=”Images/@dados.ImagemExibicao”>
Seu browser não dá suporte para este formato de vídeo.
</video>
</fieldset>
</body>
</html>
[/html]
Listagem 4: Exibindo o player e o vídeo
Finalmente, a Figura 5 apresenta o resultado final da execução de nosso projeto em execução.
Figura 5: Projeto com HTML 5 em execução
Bom pessoal, por hoje é só. Espero que este post possa tê-lo ajudado a compreender o funcionamento da tag <video> e que possa estimulá-lo a utilizar o recurso em seus projetos atuais e futuros.
Não se esqueça de deixar seu feedback através dos comentários.
Facebook
Twitter
Instagram
LinkedIn
RSS