 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Video - HTMLVideoElement |
|
Definindo a posição atual do vídeo que está sendo executado no elemento video do HTML5Quantidade de visualizações: 1004 vezes |
|
|
Em algumas situações nós gostaríamos de definir a posição do vídeo sendo executado no elemento <video> do HTML5. Isso pode ser feito fornecendo um valor em segundos (pode ser fracionário) para a propriedade currentTime do elemento HTMLMediaElement, herdada pelo elemento HTMLVideoElement. No trecho de código abaixo nós temos um elemento <video>, no qual o vídeo será carregado, uma caixa de texto e um botão. Informe a posição desejada do vídeo no formato hh:mm:ss e clique no botão para visualizar o resultado. Veja a listagem: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Como usar a tag video do HTML5</title>
</head>
<body>
<video controls="controls" id="video" src="filme.mp4">
Seu browser não dá suporte ao elemento video do HTML5.
</video>
<form>
Digite a posição do vídeo (formato hh:mm:ss):<br>
<input type="text" id="posicao" name="posicao"/>
<input type="button" onClick="definirPosicao()"
value="Definir Posição do Vídeo" />
</form>
<script type="text/javascript">
function definirPosicao(){
// vamos obter uma referência ao elemento <video>
var video = document.getElementById('video');
// vamos obter a nova posição do vídeo
var posicaoTxt = document.getElementById('posicao').value;
var partes = posicaoTxt.split(':');
var segundos = (parseInt(partes[0]) * 60 * 60) +
(parseInt(partes[1]) * 60) + (parseInt(partes[2]));
// vamos ajustar a posição do vídeo
video.currentTime = segundos;
}
</script>
</body>
</html>
|
|
 Link para compartilhar na Internet ou com seus amigos: |
|
HTML5 ::: HTML5 + JavaScript ::: Geolocation API |
Como usar a API Geolocation do HTML5Quantidade de visualizações: 1686 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Testando a existência da API Geolocation</title>
</head>
<body>
<script type="text/javascript">
if(window.navigator.geolocation) {
window.alert("A API Geolocation foi encontrada.");
}
else{
window.alert("A API Geolocation não foi encontrada neste navegador.");
}
</script>
</body>
</html>
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. |
HTML5 ::: HTML5 + JavaScript ::: Geolocation API |
Como retornar a localização do usuário usando o método getCurrentPosition() da API Geolocation do HTML5Quantidade de visualizações: 2311 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Obtendo a latitude e longitude usando a API
Geolocation</title>
</head>
<body>
<script type="text/javascript">
function mostrarPosicao(posicao) {
document.writeln("<h1>Latitude: " + posicao.coords.latitude +
"; Longitude: " + posicao.coords.longitude + "</h1>");
}
// não se esqueça de testar se o navegador web suporta a API
// Geolocation do HTML5
if(window.navigator.geolocation) {
// chamamos o método getCurrentPosition() fornecendo a função
// JavaScript que receberá o objeto de coordenadas
navigator.geolocation.getCurrentPosition(mostrarPosicao);
}
else{
document.writeln("A API Geolocation foi encontrada.");
}
</script>
</body>
</html>
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: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- Latitude: -16.7143838; Longitude: -49.2327622 É 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 ::: Canvas |
Como carregar uma imagem (ou foto) no objeto Canvas do HTML5Quantidade de visualizações: 2227 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:---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- var imagem = new Image(); // vamos carregar a logo do nosso site imagem.src = "https://www.arquivodecodigos.com.br/logo.jpg"; O passo seguinte é adicionar um "ouvidor" de evento neste objeto Image para que ele nos avise quando a imagem estiver 100% carregada. Veja: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
// vamos adicionar um "ouvidor" de evento no objeto Image
imagem.addEventListener('load', desenharImagem);
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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
function desenharImagem(){
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// e finalmente desenhamos a imagem
contexto.drawImage(imagem, 0, 0);
}
E aqui está o código completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>O objeto Canvas do HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
var imagem = new Image();
// vamos carregar a logo do nosso site
imagem.src = "https://www.arquivodecodigos.com.br/logo.jpg";
// vamos adicionar um "ouvidor" de evento no objeto Image
imagem.addEventListener('load', desenharImagem);
function desenharImagem(){
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// e finalmente desenhamos a imagem
contexto.drawImage(imagem, 0, 0);
}
</script>
</body>
</html>
Ao executar a página nós teremos o seguinte resultado:  |
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| Evolução das estruturas O concreto armado, no qual barras de aço são inseridas nas peças de concreto, foi desenvolvido na década de 1850. A junção do aço ao concreto contribui na melhoria do desempenho estrutural do concreto em relação à: Selecione a resposta: A) Resistência à compressão. B) Resistência à tração. C) Resistência à umidade. D) Resistência ao fogo. E) Resistência à infiltração. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Ano: 2023 Banca: ACCESS Órgão: Prefeitura de Dores do Indaiá - MG Prova: ACCESS - 2023 - Prefeitura de Dores do Indaiá - MG - Agente Fiscal Com base no universo da ética, analise as afirmativas a seguir: I. A ética depende dos valores que a pessoa carrega, e pode, assim, ser adaptável às situações em que vive, dependendo dos seus interesses e carga cultural. II. O estudo da ética demonstra que a consciência moral nos inclina para o caminho da virtude, que seria uma qualidade própria da natureza humana. III. Um homem para ser ético precisa necessariamente ser virtuoso, ou seja, praticar o bem usando a liberdade com responsabilidade constantemente. Assinale A) se apenas as afirmativas I e II estiverem corretas. B) se apenas as afirmativas I e III estiverem corretas. C) se apenas as afirmativas II e III estiverem corretas. D) se todas as afirmativas estiverem corretas. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| Estrutura e propriedade dos materiais A compreensão de muitas propriedades físicas dos materiais baseia-se no entendimento das forças existentes entre as moléculas. Em relação às ligações atômicas, assinale a alternativa correta. A) Cada ligação tem por objetivo fazer com que os átomos adquiram ligações metálicas. B) As ligações não costumam ocorrer concomitantemente em um mesmo material. C) Há três tipos de ligações diferentes: iônica, covalente e a força de Van der Waals. D) As ligações atômicas em alguns materiais podem ser puramente iônicas ou covalentes. E) A ligação metálica se dá por meio de uma aproximação muito intensa dos elementos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Estruturas de Aço e Madeira |
| O aço no edifício A estrutura de estabilização da moldura estrutural da edificação da figura abaixo, que caracteriza-se pela criação de configurações triangulares estáveis, ou amarrações diagonais, pode ser chamada de:  A) Estrutura contraventada. B) Moldura amarrada excentricamente. C) Moldura resistente a momentos. D) Paredes de cisalhamento. E) Nenhuma das alternativas anteriores. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
| Qual é o local correto para a inserção de códigos JavaScript em um documento HTML? A) Seção <head> B) Seção <body> C) Os códigos JavaScript podem ser colocados tanto na seção <head> quanto na seção <body> Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga 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 |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
