Ofereço ajuda em Java, C/C++, Python, C#, LISP, AutoLisp, AutoCAD
+55 (062) 98553-6711
Ofereço ajuda em PHP, Python, C#, JavaScript, Laravel, Google Ads e SEO
+55 (062) 98243-1195

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresCódigo-Fonte Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
Diga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Video - HTMLVideoElement

Como retornar a duração de um vídeo carregado em um elemento <video> do HTML5

Quantidade de visualizações: 2720 vezes
Em algumas situações nós precisamos obter, via JavaScript, a duração do vídeo que foi carregado na tag/elemento <video> do HTML5. Para isso podemos acessar a propriedade duration da interface HTMLMediaElement, herdada pelo elemento HTMLVideoElement.

Esta propriedade é somente leitura e retorna a duração do vídeo em segundos (um valor float que poderá conter uma parte fracionária). Fique atento ao fato de que, se o arquivo de mídia ainda não tiver sido carregado, o valor retornado será NaN. Se o vídeo estiver sendo carregado a partir de uma stream ao vivo, o valor retornado será +Infinity.

Veja um trecho de código no qual carregamos um vídeo no elemento <video> e depois clicamos em um botão para chamar a função que nos retornará a duração do vídeo no formato hh:mm:ss:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


Ao clicar no botão você terá um resultado parecido com:

A duração do vídeo é: 01:24:00.

Link para compartilhar na Internet ou com seus amigos:

HTML5 ::: HTML5 + JavaScript ::: Canvas

Como carregar uma imagem (ou foto) no objeto Canvas do HTML5

Quantidade de visualizações: 2339 vezes
O objeto Canvas do HTML5 nos permite carregar uma imagem ou foto em tempo de execução e desenhá-la em sua superfície. Para isso, comece criando um objeto Image para guardar a imagem temporariamente na memória:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


O passo seguinte é adicionar um "ouvidor" de evento neste objeto Image para que ele nos avise quando a imagem estiver 100% carregada. Veja:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


Pronto! Veja que agora, quando o evento load do objeto Image disparar, a função desenharImagem será chamada e a imagem será então desenhada no Canvas. Veja:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


E aqui está o código completo para o exemplo:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


Ao executar a página nós teremos o seguinte resultado:




HTML5 ::: HTML5 + JavaScript ::: Geolocation API

Como retornar a localização do usuário usando o método getCurrentPosition() da API Geolocation do HTML5

Quantidade de visualizações: 2480 vezes
O método getCurrentPosition() da API Geolocation do HTML5 nos permite obter tanto a latitude quanto a longitude do usuário que está acessando nossas páginas web. A forma mais simples deste método requer apenas uma função JavaScript que receberá o objeto de coordenadas. Veja o trecho de código a seguir:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


Ao executar este trecho de código, a primeira coisa que você verá é uma mensagem do navegador avisando que o site a partir do qual o código está sendo executado quer saber sua localização. A mensagem exibirá os botões Permitir ou Bloquear. Se você clicar no botão Permitir, a latitude e longitude serão escritas no navegador:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


É claro que, se você estiver executando o código em um laptop ou desktop, o resultado será muito diferente daquele mostrado no seu celular. O motivo é que, em geral, um GPS não está disponível nos laptops e desktops. Por essa razão, o navegador vai obter sua localização usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol).


HTML5 ::: HTML5 + JavaScript ::: Geolocation API

Como usar a API Geolocation do HTML5

Quantidade de visualizações: 1781 vezes
A API Geolocation foi uma das adições mais importantes ao HTML5. Por meio desta API, os usuários podem compartilhar sua localização com seus sites favoritos. Um código JavaScript pode, por exemplo, capturar sua latitude e longitude, enviar para o backend de um servidor web e permitir que algumas aplicações façam coisas tais como encontrar lojas e locais mais próximos de você ou até mesmo mostrar sua localização em um mapa.

Nos dias atuais (março de 2020), a maioria dos navegadores web e dispositivos móveis (celulares, computadores de bordo de veículos, etc) dão suporte à API Geolocation. É claro que, antes de usá-la, temos que estar atentos à algumas considerações:

1) A localização mais precisa é aquela fornecida por um GPS, e este geralmente não está presente em laptops ou desktop. No entanto, alguns sistemas operacionais possuem a capacidade de obter tal localização se você estiver usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol).

2) O usuário poderá se recusar a fornecer sua localização. Assim, fique atento a este fato e teste sempre a existência da API Geolocation e também a concordância do usuário antes de efetuar alguma ação crucial nas suas aplicações.

3) Alguns navegadores web restringem o acesso à API Geolocation somente em ambiente HTTPs. Fique atento a este detalhe também.

Vamos agora ver um trecho de código JavaScript que verifica a existência da API Geolocation no navegador:

Este código completo faz parte do nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.
Domine lógica de programação e várias linguagens de programação com o nosso Super Pack Aprenda a Programar - 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos.

Torne-se um(a) expert em Java, Portugol, VisuAlg, Python, PHP, JavaScript, Delphi, C, C++, C#, VB.NET, LISP, Ruby, e muito mais. São mais de 15.000 páginas com conteúdo exclusivo para você estudar onde e quando quiser.
Me Fala Mais


Notem que o novo objeto geolocation foi adicionado ao objeto navigator, já existente nos navegadores desde suas primeiras versões, e tudo que fizemos foi testar a existência de tal objeto.

Pronto! Agora que já sabemos para que serve a API Geolocation e como verificar a existência do objeto geolocation, o passo seguinte é aprender como detectar a latitude e longitude do usuário. Nesta seção você encontrará mais dicas relacionadas a isso.


Veja mais Dicas e truques de HTML5

Dicas e truques de outras linguagens

E-Books em PDF

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 25 usuários muito felizes estudando em nosso site.