 |
|
||||
 Código-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 |
|||||
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Video - HTMLVideoElement |
Obtendo a posição atual do vídeo que está sendo executado no elemento video do HTML5Quantidade de visualizações: 1339 vezes |
|
A propriedade currentTime do elemento HTMLMediaElement, herdada pelo elemento HTMLVideoElement, retorna a posição atual do vídeo como um valor de ponto flutuante com precisão dupla. Isso pode ser interessante quando queremos, por exemplo, gravar em um banco de dados, periodicamente, a posição do vídeo que o usuário está assistindo no momento. Veja um trecho de código no qual obtemos o valor da propriedade currentTime e o exibimos em uma DIV, no formato hh:mm:ss:
<!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>
<br><button onClick="obterPosicaoAtual()">Obter Posição Atual</button>
<br><div id="posicao_div"></div>
<script type="text/javascript">
function obterPosicaoAtual(){
// vamos obter uma referência ao elemento <video>
......Ao clicar no botão você terá um resultado parecido com: A posição do vídeo é: 01:24:00. |
 Link para compartilhar na Internet ou com seus amigos: |
HTML5 ::: HTML5 + JavaScript ::: Canvas |
Como usar o método arc() do objeto Canvas do HTML5 para desenhar arcos, curvas e círculosQuantidade de visualizações: 4185 vezes |
O método arc() do objeto Canvas do HTML5 nos permite criar figuras tais como arcos, curvas e círculos. Para isso é importante entender os seus parâmetros:arc(x, y, radius, ang1, ang2, direction); Os parâmetros x e y indicam as coordenadas do centro do círculo. O parâmetro radius indica o raio do círculo. Os parâmetros ang1 e ang2 indicam o ângulo inicial e o ângulo final. O parâmetro direction indica a direção do desenho. Se o valor true for informado, a direção será anti-horário. Se for false, o desenho será no sentido horário. É importante observar que os ângulos são medidos em radianos, não em graus. Assim, o ângulo 0 representa a posição 3 horas no relógio. A posição de 9 horas é (1 * PI), 12 horas é (1.5 * PI) e 6 horas é (0.5 * PI). Portanto, se você quiser desenhar um círculo completo, deverá sair do ângulo 0 e ir até (2 * PI). Veja um trecho de código que desenha um arco equivalente a um quarto de uma pizza, ou seja, 25%, saindo do ângulo 90º (em graus) e indo até 180º (graus):
<html>
<head>
<meta charset="utf-8">
<title>Estudos HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// vamos desenhar um arco sem preenchimento com raio de 80
......Execute este código e veja que o arco realmente foi desenhado. Seu resultado deverá ser parecido com:  No entanto, para parecer um pedação de pizza, ou seja, o ponto de partida para um gráfico de pizza, é preciso que tenhamos duas linhas ligado esse arco ao centro do círculo. Veja a modificação que fiz:
<html>
<head>
<meta charset="utf-8">
<title>Estudos HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// vamos desenhar um arco sem preenchimento com raio de 80
contexto.beginPath(); // início um novo caminho
......Execute novamente e veja que agora o efeito ficou bem melhor. Seu resultado deverá ser parecido com:  Para finalizar, vamos colorir o pedação de pizza. Veja a nova versão (com o código completo):
<!doctype html>
<html>
<head>
<title>O objeto Canvas do HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// vamos desenhar um arco sem preenchimento com raio de 80
contexto.beginPath(); // início um novo caminho
// primeiro movemos a caneta de desenho para o centro do círculo
contexto.moveTo(100, 100);
......Agora o resultado será:  |
HTML5 ::: Dicas & Truques ::: Meta Tags |
HTML5 para iniciantes - Como usar a meta tag viewport para controlar o layout de suas páginas HTMLQuantidade de visualizações: 5885 vezes |
|
Quando estamos aprendendo HTML5 e queremos desenvolver páginas web responsivas, ou design responsivo, uma das primeiras tags que temos que entender e dominar bem, é a tag viewport, incluinda com a especificação do HTML5. Mas o que é a tag viewport? Esta meta tag foi originalmente apresentada no navegador Safari Mobile, e é usada para definir a largura e escala de apresentação do conteúdo da página HTML. Dessa forma, viewport é a área da página web na qual o conteúdo é exibido para o usuário. Como sabemos, uma página web pode ser acessada por dispositivos variados. A tela do laptop é muito maior se comparada à tela de um smartphone ou tablet. A meta tag viewport é adicionada na seção <head> da página HTML e pode conter os seguintes elementos: width: É a largura do viewport virtual no dispositivo. height: É a altura do viewport virtual do dispositivo. initial-scale: É o nível de zoom quando a página é acessada. maximum-scale: É o limite máximo de zoom que pode ser aplicado à página. user-scalable: Uma flag que indica se o usuário pode ou não aplicar zoom à página. Os valores permitidos são yes ou no. Veja, por exemplo, como definir um viewport de 980px e escala inicial de zoom de 1: <meta name="viewport" content="width=980, initial-scale=1"> ...... No entanto, se nossa intenção é desenvolver um design responsivo, devemos passar o valor device-width para o atributo width do viewport. Isso faz com que a largura do viewport seja igual à largura do dispositivo que está acessando a página. Veja uma página HTML completa usando esta abordagem: <html> <head> <title>Estudando HTML5</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>Java Avançado - Como obter a largura e altura da tela do seu computador em pixels usando o método getScreenSize() ...... Note que o elementos dentro do atributo content são separados por vírgulas, juntamente com seus valores individuais. |
HTML5 ::: HTML5 + JavaScript ::: Canvas |
Como carregar uma imagem (ou foto) no objeto Canvas do HTML5Quantidade 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:var imagem = new Image(); // vamos carregar a logo do nosso site ...... O passo seguinte é adicionar um "ouvidor" de evento neste objeto Image para que ele nos avise quando a imagem estiver 100% carregada. Veja: // vamos adicionar um "ouvidor" de evento no objeto Image ...... 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:
function desenharImagem(){
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
......E aqui está o código completo para o exemplo: <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 ...... Ao executar a página nós teremos o seguinte resultado:  |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
