 |
|
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: 1046 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 ::: Referência Tags/Elementos HTML5 ::: Tag/Elemento <Video> |
Como usar a tag/elemento <video> do HTML5 em suas aplicações webQuantidade de visualizações: 1592 vezes |
|
A tag/elemento <video> do HTML5 é usada quando queremos incorporar um vídeo em nossos documentos HTML sem incluir plugs adicionais, tais como o Flash Player. Contudo, o suporte a este elemento pode variar de navegador para navegador (faça testes com seus navegadores alvos antes). Em geral, navegadores que dão suporte ao elemento <video> suportam os seguintes formatos de vídeo: MP4, Ogg e WebM. Veja um documento HTML que carrega um vídeo MP4: ---------------------------------------------------------------------- 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" src="filme.mp4"> Seu browser não dá suporte ao elemento video do HTML5. </video> </body> </html> Quando você abrir esta página HTML, você verá um vídeo na tela já com os controles para iniciar, pausar, e parar a execução (contanto que você tenha informado um endereço válido para o vídeo). Note que não especificamos o tamanho do vídeo na página, o que fará com que o elemento <video> tenha as dimensões do vídeo que foi carregado. |
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: 4146 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): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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
// o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
// e vai até o ânculo 180 (graus)
// as medidas na função arc() são em radianos, não em graus
contexto.arc(100, 100, 80, Math.PI, 1.5 * Math.PI, false);
contexto.lineWidth = 2; // largura da linha
contexto.strokeStyle = '#990000'; // cor da linha
contexto.stroke(); // realiza o desenho
</script>
</body>
</html>
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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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
// primeiro movemos a caneta de desenho para o centro do círculo
contexto.moveTo(100, 100);
// o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
// e vai até o ânculo 180 (graus)
// as medidas na função arc() são em radianos, não em graus
contexto.arc(100, 100, 80, Math.PI, 1.5 * Math.PI, false);
contexto.lineWidth = 2; // largura da linha
contexto.strokeStyle = '#990000'; // cor da linha
// agora desenhamos uma linha de volta para o arco
contexto.lineTo(100, 100);
contexto.stroke(); // realiza o desenho
</script>
</body>
</html>
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): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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);
// o arco começa no x = 100, y = 100, começa no ângulo 90 (em graus)
// e vai até o ânculo 180 (graus)
// as medidas na função arc() são em radianos, não em graus
contexto.arc(100, 100, 80, Math.PI, 1.5 * Math.PI, false);
contexto.lineWidth = 2; // largura da linha
contexto.strokeStyle = '#990000'; // cor da linha
// agora desenhamos uma linha de volta para o arco
contexto.lineTo(100, 100);
// vamos preencher o gráfico
contexto.fillStyle = "#CCCCCC"; // cor do preenchimento
contexto.fill(); // preenche de fato
contexto.stroke(); // realiza o desenho
</script>
</body>
</html>
Agora o resultado será:  |
HTML5 ::: HTML5 + JavaScript ::: Canvas |
Programação gráfica para iniciantes - Como desenhar círculos com ou sem preenchimento usando o método arc() do objeto Canvas do HTML5Quantidade de visualizações: 6463 vezes |
Podemos usar o método arc() do objeto Canvas do HTML5 para desenhar círculos com ou sem prenchimento. Veja nos exemplos abaixo como isso pode ser feito. Primeiro um círculo sem preenchimento:----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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 círculo sem preenchimento com raio de 80
contexto.beginPath(); // início um novo caminho
// o círculo começa no x = 100, y = 100, começa no ângulo 0
// e vai até o ângulo 360 (as medidas são em radianos, não em graus)
contexto.arc(100, 100, 80, 0, 2 * Math.PI, false);
contexto.lineWidth = 2; // largura da linha
contexto.strokeStyle = '#990000'; // cor da linha
contexto.stroke(); // realiza o desenho
</script>
</body>
</html>
Ao abrir esta página HTML nós teremos o seguinte resultado:  E agora um círculo preenchido: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!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 círculo sem preenchimento com raio de 80
contexto.beginPath(); // início um novo caminho
// o círculo começa no x = 100, y = 100, começa no ângulo 0
// e vai até o ângulo 360 (as medidas são em radianos, não em graus)
contexto.arc(100, 100, 80, 0, 2 * Math.PI, false);
// vamos preencher o círculo
contexto.fillStyle = "#CCCCCC"; // cor do preenchimento
contexto.fill(); // preenche de fato
contexto.lineWidth = 2; // largura da linha
contexto.strokeStyle = '#990000'; // cor da linha
contexto.stroke(); // realiza o desenho
</script>
</body>
</html>
Ao abrir esta página HTML nós teremos o seguinte resultado:  |
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 |
