Novos eventos de mídia no HTML5

@dukountra — Fri, 17 Feb 2012 21:40:27 +0000

Bem pessoal, como prometido, trago agora os novos eventos de mídia compatíveis com o HTML5. Não são todos, ainda faltam alguns. Porém, os que estão aqui foram devidamente testados por mim. Há também propriedades que não tinha falado antes. Veja o exemplo abaixo:

Volume

Barra de tempo

Barra de buffer

Informações do vídeo

O vídeo começou a carregar

O vídeo teve seus metadados carregados

O vídeo foi carregado

O vídeo está pronto para tocar

O vídeo tocará sem interrupção de buffer

O vídeo tem o seu carregamento paralizado

O vídeo está tocando

O vídeo está pausado

O vídeo está na espera

Acabou o vídeo

Situação da internet

Situação do arquivo

Situação do erro do arquivo

Volume

Barra de tempo

Barra de buffer

Informações do vídeo

O vídeo começou a carregar
O vídeo teve seus metadados carregados
O vídeo foi carregado

O vídeo está pronto para tocar
O vídeo tocará sem interrupção de buffer
O vídeo tem o seu carregamento paralizado

O vídeo está tocando
O vídeo está pausado
O vídeo está na espera
Acabou o vídeo

Situação da internet

Situação do arquivo

Situação do erro do arquivo

Novos eventos:

oncanplay: Script para ser executado quando a mídia está pronta para começar a tocar (quando se tem buffer o suficiente para começar).
oncanplaythrough: Script para ser executado quando a mídia pode ser executada até o fim sem pausa para buffer.
onended: Script para ser executado quando a mídia chega ao fim.
onerror: Script para ser executado quando um erro ocorre ao carregar o arquivo de mídia.
onloadeddata: Script para ser executado assim que os dados de mídia forem lidos.
onloadedmetadata: Script para ser executado assim que os metadados (como dimensão e duração) de mídia forem lidos.
onloadstart: Script para ser executado assim que a mídia começa a ser carregada.
onpause: Script para ser executado quando a mídia é pausada pelo usuário ou por programa.
onplay: Script para ser executado assim que o usuário começa a tocar a mídia.
onplaying: Script para ser executado quando a mídia começou a tocar.
onprogress: Script para ser executado quando o navegador está em processo de obter os dados de mídia.
onstalled: Script para ser executado quando o navegador não é capaz de buscar os dados de mídia por qualquer motivo.
ontimeupdate: Script para ser executado quando a posição de reprodução muda.
onvolumechange: Script para ser executado assim que o volume muda (incluindo coloca-lo no “mute”).
onwaiting: Script para ser executado quando a mídia pausa para buscar mais dados.

Novos métodos:

play(): Executa o arquivo de mídia.
pause(): Pausa o arquivo de mídia.
webkitEnterFullScreen(): Coloca o vídeo em tela cheia. Funciona somente no Chrome.

Novas propriedades:

volume: Define o volume da mídia. Seu valor padrão é 1.
muted: Define se a mídia está no modo mudo ou não.
duration: Define o tempo total de duração da mídia, em milisegundos.
currentTime: Define o tempo transcorrido da mídia, em milisegundos.
height: Altura em pixels da mídia.
width: Comprimento em pixels da mídia.
src: URL onde a mídia está localizada.
buffered: Define o buffer da mídia. Possui os métodos start() e end() (serão explicados em outro post).
networkState: informa estado da rede em relação ao carregamento do vídeo. É definida pelos seguintes valores:
1) Ainda não inicializado.
2) Rede não está sendo usado agora (vídeo está completamente carregado, por exemplo).
3) Navegador está carregando dados da rede.
4) Dados foram carregados.
5) Recurso de vídeo não pôde ser encontrado / carregado.
readyState: informa estado da mídia. É definida pelos seguintes valores:
1) Não há dados disponíveis.
2) Duração e dimensões estão disponíveis.
3) Os dados para a posição atual estão disponíveis.
4) Os dados para a posição atual e futura estão disponíveis para que a reprodução possa começar.
5) Dados suficientes para reproduzir o vídeo completo estão disponíveis.
error: informa o erro, caso ocorra. É definida pelos seguintes valores:
1) Usuário abortou a reprodução do vídeo.
2) Erro na rede (não pode ler a stream).
3) Erro de decodificação, o vídeo está quebrado ou o codec tem problemas.
4) O formato não é suportado.

Analisem o código e, caso tenham alguma dúvida, não esqueçam de comentar.

Confira aqui o Tutorial Completo HTML5 2012

Aprenda a colocar uma barra de tempo no seu vídeo usando HTML5 e javascript

@dukountra — Sat, 11 Feb 2012 17:49:44 +0000

Vamos neste post como colocar uma barra de tempo no seu vídeo, utilizando um simples código HTML5 / Javascript.

Recomendo visualizar o post anterior, que dá uma introdução sobre o assunto.

Veja o código abaixo:


function tocar(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  arquivo_de_midia.play();
  document.getElementById("progresso").max = Math.round(arquivo_de_midia.duration);
}
function pausar(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  arquivo_de_midia.pause();
}
function tela_cheia(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  arquivo_de_midia.webkitEnterFullScreen();
}
function aumentar_vomume(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  arquivo_de_midia.volume += 0.1;
}
function diminuir_volume(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  arquivo_de_midia.volume -= 0.1;
}
function cortar_som(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  arquivo_de_midia.volume = 0.0;
}
function rebominar(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  arquivo_de_midia.currentTime -= 5.0;
}
function avancar(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  arquivo_de_midia.currentTime += 5.0;
}
function atualizar(id_do_video) {
  var arquivo_de_midia=document.getElementById(id_do_video);
  var tempo = Math.round(arquivo_de_midia.currentTime);
  if (tempo%60 < 10)
    {
    document.getElementById("atual").value = parseInt(tempo/60) + ":" + "0" + tempo%60;
    }
  else
    {
    document.getElementById("atual").value = parseInt(tempo/60) + ":" + tempo%60;
    }
  document.getElementById("progresso").value = tempo;
}

Observe que a barra de tempo do vídeo se dá através da tag "progress". Ela tem os seguintes atributos:
max: valor máximo em número inteiro.
value: valor atual em número inteiro.

Além disso (eu ainda vou postar detalhadamente sobre os novos eventos javascript compatíveis com o HTML5), temos o evento "ontimeupdate". Ele é acionado toda vez que a posição da mídia muda, fazendo com que o tempo de execução seja constantemente atualizado.

Vale lembrar que o código não está refatorado. Eu preferi colocar desta forma para que o leitor entenda melhor.

Até mais!

Confira aqui o Tutorial Completo HTML5 2012

Saiba inserir botões nas tags “audio” e “video” usando javascript

@dukountra — Mon, 06 Feb 2012 23:10:04 +0000

Neste post começa uma série de artigos que visam explicar novas funcionalidades que o HTML5 nos proporciona junto com o javascript, de uma forma fácil, de modo que que um usuário noob em javascript possa entender perfeitamente.

Veja o áudio é o vídeo abaixos:

Observe que o código acima é um simples html5, inserindo um áudio e um vídeo. Foi criado alguns botões e, para cada botão, foi dado o evento “onclick”, que aciona uma função diferente.
Acredito que a grande “mágica” é transformar o arquivo de mídia em um objeto javascript. Isso foi feito através do recurso “getElementById”.

Feito isso, podemos notar as seguintes funções:

play(): Executa o arquivo de mídia.
pause(): Pausa o arquivo de mídia.
webkitEnterFullScreen(): Coloca o vídeo em tela cheia. Funciona somente no .

E as seguintes propriedades:

volume: Define o volume da mídia. Seu valor padrão é 1.
duration: Define o tempo total de duração da mídia, em milisegundos.
currentTime: Define o tempo transcorrido da mídia, em milisegundos.

Façam os seus testes!

Confira aqui o Tutorial Completo HTML5 2012

Use o recurso de correção gramatical no HTML5

@dukountra — Sat, 28 Jan 2012 15:10:25 +0000

Oi pessoal,

Voltando com mais um atributo no HTML5: “spellcheck“. Ele permite que o navegador faça uma correção gramatical, de acordo com o idioma definido para o documento. Veja abaixo:

Tente editar este texto.

O atributo “spellcheck” pode ser aplicado para os seguintes elementos:
1) Dentro do campo “input”
2) Dentro do campo “textarea”
3) Dentro de qualquer elemento editável (“contenteditable“)

O atributo “spellcheck” é aceito pelos navegadores , que fazem correções somente em inglês.
Porém, se você colocar o atributo e valor “lang=”pt”" na tag “html”, o irá lhe proporcionar fazer correções em português.

Façam os seus testes e até a próxima!

Confira aqui o Tutorial Completo HTML5 2012

Trabalhe com aplicações offline com HTML5

@dukountra — Fri, 20 Jan 2012 21:47:45 +0000

Bem pessoal, hoje vou explicar como é possível trabalhar com aplicações offline usando somente HTML5. É através do atributo “manifest”, da tag “html”.
Ele faz com que os arquivos discriminados fiquem no cache, no momento que o usuário acessa a página pela primeira vez. Isso possibilita o acesso ao conteúdo da página em modo offline.
Além disso, o carregamento da página fica mais rápido, pois o navegador não vai precisar fazer novamente o download dos arquivos, pois eles estarão no cache do navegador.

Clique no link abaixo:

http://bit.ly/zTG3oQ

Visualize o código fonte das páginas. Observe que em todas foi colocado o seguinte atributo na tag “html”: manifest=”exemplo_cache.manifest”

Este atributo faz referência ao arquivo manifest “exemplo_cache.manifest”. Vamos ver o código fonte dele para entendê-lo:


CACHE MANIFEST

#Isto é um comentário

CACHE:
index.html
index2.html
index3.html
index4.html
index5.html
index6.html
index7.html
index8.html
index9.html
index10.html
css/style1.css
css/style2.css
css/style3.css
css/style4.css
css/style5.css
css/style6.css
css/style7.css
css/style8.css
css/style9.css
css/style10.css
css/demo.css
css/reset.css

FALLBACK:
modo_offline.html

NETWORK:
*

CACHE MANIFEST: indica que o arquivo é um arquivo “manifest”. Seu uso é obrigatório.
CACHE: indica todos os arquivos vinculados à página que ficarão armazenados no cache do navegador, por ocasião do carregamento da página.
FALLBACK: indica o endereço de destino que o usuário será mandado, caso algum arquivo do CACHE não esteja disponível. Por exemplo, se o arquivo demo.css por algum motivo não for armazenado no cache do navegador, o usuário será redirecionado para o arquivo offline.html.
NETWORK: indica os arquivos que nunca deverão entrar no cache do navegador. No meu caso, eu coloquei “*”, que quer dizer que todos os arquivos que não estão no CACHE ou no FALLBACK nunca deverão entrar no armazenamento no cache do navegador.
#: indica que o texto contido na linha é um comentário.

Fiz aqui os meus testes e notei que este atributo funciona em todos os navegadores exceto o IE.

Baixe o arquivo zipado contendo todos os documentos do exemplo acima.

Confira aqui o Tutorial Completo HTML5 2012

Valeu gente.

Criando uma lista predefinida de dados

@dukountra — Sat, 14 Jan 2012 20:17:44 +0000

Nesse post vou trazer mais uma novidade do HTML5: a tag “datalist”, que cria uma lista predefinida de opções para um elemento “input”. Funciona no e no . Veja o exemplo abaixo:


Informe sua cidade preferida:

Informe sua cidade preferida:

datalist: abre e fecha uma lista de dados que servem como sugestões para o usuário, por ocasião do preenchimento de um formulário.
option: define um elemento dentro da lista de dados, que irão aparecer após o usuário clicar dentro da caixa do “input”.

É isso aí pessoal. Façam os testes. Ahhh… segue abaixo o link, conforme prometido no post anterior, de todas as tags no HTML5, atualizado neste mês de janeiro de 2012.

Confira aqui o Tutorial Completo HTML5 2012

Valeu

A tag “meter” no html5

@dukountra — Thu, 05 Jan 2012 20:53:19 +0000

Nesse post, vou descrever como funciona a tag “meter”. Infelizmente, não encontrei um conteúdo na internet em português explicando detalhadamente seu funcionamento. Então, peguei de alguns sites em inglês e fiz os testes (funciona somente no ). Vamos lá:

Tag “meter”:

high: especifica a parte do intervalo que é considerada alta.
low: especifica a parte do intervalo que é considerada baixa.
min: define o limite inferior.
max: define o limite superior.
optimum: Especifica o valor que é considerado o “ideal”, ou melhor, o valor. Se este valor for superior ao valor “alto”, então isso indica que quanto maior o valor, melhor. Se for menor do que a marca “low”, então isso indica que os valores mais baixos são melhores. Se for no meio, então isso indica que os valores nem alta nem baixa são boas.
value: atual valor no intervalo

Tive um pouco de dificuldade para entender a função do atributo “optimum”. Fiz vários testes e cheguei a seguinte conclusão que pode ser vista na tabela abaixo:

Confira aqui o Tutorial Completo HTML5 2012

Até a próxima!

Saiba como utilizar as tags “details” e “summary”

@dukountra — Mon, 19 Dec 2011 03:42:34 +0000

Nesse post vou falar sobre as tags “details” e “summary”. Elas servem para fornecer mais especificações para o leitor acerca de um nome. Infelizmente, o único navegador que aceita esse recurso é o . Veja o exemplo abaixo:

Nas ilhas de Komodo, Rinca, Gili Motang e Flores, na Indonésia, vive o

Dragão-de-komodo

Como criar uma “div” editável

@dukountra — Sat, 10 Dec 2011 23:15:50 +0000

Trago agora neste post uma função interessante do HTML5 – o atributo “contenteditable”. Veja o código abaixo:



alou vc

alou vc

Quando a página é atualizada, o conteúdo dentro da div volta a ser o inicial.

Funciona nos seguintes navegadores:

Valeu pessoal e até o próximo post!

Confira aqui o Tutorial Completo HTML5 2012

Saiba como usar o Kaltura – O player em HTML5 e Javascript

@dukountra — Tue, 25 Oct 2011 13:09:48 +0000

Olá, pessoal. Nesse post vou mostrar como usar o Kaltura, um player open-source baseado em HTML5 e javascript.

Ele oferece compatibilidade com os cinco navegadores (nas versões mais atuais). Além disso, disponibiliza recursos de legenda e tela cheia.

Vamos ver como funciona passo a passo:

1) Vá na página principal do Kaltura e clique em “downloads”.

2) Vá em “HTML5 Video Player” e faça o download da versão atual, clicando no link logo abaixo. Caso não encontre, faça o download Kaltura Player.

3) O arquivo está zipado. Descompacte-o localmente e upe para o servidor onde hospedado seu site.

4) Abra o arquivo examples/captions.html em um editor de texto e veja o código fonte.

5) Observe que dentro do “head” há os seguintes códigos de javascript e css:

Copie e cole no “head” do seu site. Não se esqueça de ajeitar os endereços dos links!!

6) A partir disso, todo link de vídeo em html5 que esteja dentro do “body” de seu site, vai estar com as configurações e designer do Kaltura. Vá, então no corpo do arquivo examples/captions.html e veja a seguinte configuração de como vc deve escrever no código-fonte:

“width”, “height” e “poster” indicam, respectivamente, largura, altura e imagem do vídeo (antes de ser executado). Caso, vc queira que seu vídeo seja executado assim que o usuário visualize seu site, coloque o atributo “autoplay” dentro da tag “video”.

“source” nos permite ter uma flexibilidade quanto a compatibilidade dos navegadores aos formatos de vídeo. O referido vídeo só não tocará em um navegador que não suporte extensões mp4, webm e ogv.

“durationHint” mostra o tempo do vídeo na interface do Kaltura Player.

7) Caso o vídeo tenha legenda, coloque-a dentro da seguinte tag (não coloque “_” no nome do arquivo da legenda. Dá erro!):

Pronto! Vc já pode desfrutar dos recursos do Kaltura Player.

Veja a seguinte página com um código do Kaltura: exemplo e visualize seu código-fonte:

O recurso de legenda funciona somente no Mozilla Firefox. A opção de tela cheia somente é válida para dentro do navegador. Para se ter tela cheia totalmente, é preciso colocar o navegador também em tela cheia. Para mudar a aparência, é só substituir “/skins/jquery.ui.themes/redmond/jquery-ui-1.7.2.css” a palavra em negrito pelas aparências disponíveis na pasta “skins”.

Façam seus testes!

Confira aqui o Tutorial Completo HTML5 2012