este é um novo capítulo 349
8
não é a TV de seu pai
Vídeo
... com a participação especial da estrela “Canvas”
Não precisamos de plugin.
Afinal, vídeo é agora um membro de
primeira-classe da família HTML — é só jogar um elemento <video> em sua
página e o terá instantaneamente, mesmo em vários dispositivos. O vídeo, no
entanto, é muito mais que apenas um elemento; é também uma API JavaScript
que nos permite controlar a reprodução, criar nossas próprias interfaces de vídeo
personalizadas e integrá-lo com o resto do HTML de maneiras completamente
novas. Falando em integração... Lembre-se de que existe aquela conexão entre
vídeo e canvas que falamos a respeito — você verá que unir vídeo e canvas nos
dá uma poderosa nova forma de processar vídeo em tempo real. Neste capítulo,
vamos começar por rodar vídeos numa página e, então, veremos o que a API
JavaScript tem de melhor. Venha. Você ficará encantado ao ver o que é possível
fazer com algumas tags, marcação, JavaScript e vídeo & canvas.
Hoje em “As Webville
Turns” é melhor
descobrirmos o que
está rolando entre
<video> e <canvas>...
PFCG_HeadFirstHTML5Prog.indb 349 05/06/2014 16:20:11
anunciando a televisão webville
350
Capítulo 8
A TV Webville — todo o conteúdo pelo qual
você tem esperado, como Destination Earth
1
,
O Ataque da Mulher de 15 metros, O Monstro do
Ártico, A Bolha Assassina, e não estaria longe
de nós passar alguns filmes educacionais
dos anos 1950. O que mais você esperaria
de Webville? Isso, porém, é só o conteúdo.
No lado da tecnologia, você esperaria algo
menos do que vídeo HTML5?
É claro, essa é só a visão. Temos de
construir a TV Webville se quisermos
torná-la realidade. Pelas próximas
páginas, vamos construí-la desde os
primórdios, usando marcação HTML5,
o elemento vídeo e um pouco de
JavaScript aqui e ali.
Conheça a TV Webville
A TV Webville
com 100% de
tecnologia HTML5.
Em breve, num
browser mais
perto de você!
1
N. E.: Sem título no Brasil, curto desenho que promovia a indústria petroleira e sinalizava como ela enriquecia (e
enriquece) a população americana. Marcou sua cultura na década de 1950, em plena Guerra Fria.
PFCG_HeadFirstHTML5Prog.indb 350 05/06/2014 16:20:12
não é a tv de seu pai
você está aqui
351
O HTML, vamos botar pra quebrar...
<!doctype html>
<html lang="en">
<head>
<title>Webville TV</title>
<meta charset="utf-8">
<link rel="stylesheet" href="webvilletv.css">
</head>
<body>
<div id="tv">
<div id="tvConsole">
<div id="highlight">
<img src="images/highlight.png" alt="highlight for tv">
</div>
<div id="videoDiv">
<video controls autoplay src="video/preroll.mp4" width="480"
height="360"
poster="images/prerollposter.jpg" id="video">
</video>
</div>
</div>
</div>
</body>
</html>
Ei, este é o Capítulo 8! Chega de ficar sem fazer nada! Vamos arregaçar as mangas e criar
um pouco de HTML.
Bem padrão HTML5.
Não se esqueça do arquivo
CSS para deixá-lo bonito.
Só um pouco de imagem para
ajudar a deixá-lo como um
arranjo de televisão.
E aqui está nosso elemento
<video> para reproduzir nosso
vídeo. Vamos dar uma olhada
mais cuidadosa num instante...
Você precisa se certificar de
algumas coisas: primeiro,
verifique se o código acima está
digitado num arquivo chamado
webvilletv.html; segundo,
verifique se baixou o arquivo CSS
e, finalmente, certifique-se também
de ter baixado os arquivos de
vídeo e posto eles num diretório
chamado video. Feito isto, carregue
a página e encoste-se para assistir.
Junte tudo e experimente...
Se estiver tendo problemas,
vire a página!
Baixe tudo em http://wickedlysmart.com/hfhtml5
Eis o que vemos. Perceba
que, se você passar o
ponteiro de seu mouse
sobre a tela, verá um
conjunto de controles
com os quais poderá dar
pause, play, ajustar o
áudio ou buscar cenas.
PFCG_HeadFirstHTML5Prog.indb 351 05/06/2014 16:20:12
Get Use A Cabeça! Programação Em HTML5 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
