Primeiramente desde já agradeço aqueles que estão acompanhando
meus posts sobre HTML5, espero que estejam gostando, nesse post abordarei mais novidades do HMTL5, como os
elementos AUDIO, VIDEO e CODEC.
Áudio
Para inserir áudio em uma página web, basta usar o elemento audio:
<audio src="audio.oga" controls="true" autoplay="true" />
O valor de controls define se um controle de áudio, com botões
de play, pause, volume, barra de progresso, contador de tempo, etc. serão
exibido na tela, caso seja "false", será preciso controlar o player
via Javascript, com métodos como play() e pause(). O valor de autoplay define se o áudio vai começar a tocar
assim que a página carregar.
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Audio</title>
</head>
<body>
<audio src="C:/audio.oga" controls="true" autoplay="true" />
</body>
</html>
Origens alternativas de áudio
Pode acontecer de seu browser não ter suporte ao formato de
áudio informado, e assim não consegui reproduzir o áudio, mas acalme-se! Nem
tudo esta perdido, para tentar solucionar esse problema formaram desenvolvidas
formas alternativas de áudio, esta que funcionam como uma lista de tentativas,
caso o formato informado não funcione o browser tentara reproduzir a próxima forma
informada, caso esta também não funcione, o browser tentara a próxima forma e
assim sucessivamente.
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Audio</title>
</head>
<body>
<audio controls="true" autoplay="true" >
<source src="C:/audio.oga" />
<source src="C:/audio.wma" />
<source src="C:/audio.mp3" />
</audio>
</body>
</html>
Entretanto, o browser pode ainda não saber tocar nenhum desses
formatos, ou sequer ter suporte a áudio. Para esses casos recomendo que você
disponibilize um link para download da música, para que o reprodutor de áudio
local de cada um se responsabilize pela reprodução do áudio desejado.
Exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Audio</title>
</head>
<body>
<audio controls="true" autoplay="true" >
<source src="C:/audio.oga" />
<source src="C:/audio.wma" />
<source src="C:/audio.mp3" />
<p>Faça
o <a href="C:/audio.mp3">download
da música</a>.</p>
</audio>
</body>
</html>
Vídeo
O uso de vídeo é muito semelhante ao de áudio, Observe a
semelhança.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Video</title>
</head>
<body>
<video src="C:\video.ogv" controls="true" autoplay="true" width="400" height="300"/>
</body>
</html>
E com vários elementos no source:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Menus</title>
</head>
<body>
<video controls="true" autoplay="true" width="400" height="300">
<source src="C:\video.ogv" />
<source src="C:\video.mp4" />
<source src="C:\video.wmv" />
<p>Faça
o <a href="C:\video.mp4">download
do vídeo</a>.</p>
</video>
</body>
</html>
Codecs
É muito importante que você inclua, nos seus elementos source de
áudio e vídeo, informação a respeito do container e codecs utilizados. Isso vai
evitar que o navegador tenha que baixar, pelo menos parcialmente, o arquivo de
mídia para, depois, descobrir que não consegue tocá-lo. É importante lembrar
que a extensão do arquivo não é informação relevante para isso, pelo contrário,
não significa nada. Uma URL pode não ter extensão de arquivo e pode levar a um
redirecionamento.
Para indicar ao navegador o container e codecs de determinado
arquivo, usa-se o atributo type. Por exemplo, um vídeo em Ogg, usando os codecs Theora e Vorbis,
terá seu source assim:
<source src='video.ogv' type='video/ogg; codecs="theora,
vorbis"'>
Com MPEG-4 a coisa é um pouco mais complicada, por que é preciso
indicar ao navegador também o profile do codec de vídeo utilizado. Veja um
exemplo:
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
Para dar continuidade aos posts sobre HTML5, escolha um dos links abaixo:
- HTML5 Parte I - Doctype, Html, head, body
- HTML5 Parte II Atributo Type: tel, search, email, url, number, color
- HTML5 Parte III - Validadores: autofocos, placeholder, required, pattern etc.
- HTML5 Parte IV motores de Renderização, utilização de Modernizr e muito mais.
- HTML5 Parte V - details, summary, Drag and Drop e spellcheck
- HTML5 Parte VI - Audio, Video e Codec.
Tudo o que é bom dura tempo o bastante para que se torne inesquecível.
(Chorão)
0 comentários:
Postar um comentário