 |
|
|
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Video - HTMLVideoElement |
Como retornar a duração de um vídeo carregado em um elemento <video> do HTML5Quantidade de visualizações: 3031 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: ----------------------------------------------------------------------
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>
<br><button onClick="obterDuracao()">Obter Duração</button>
<script type="text/javascript">
function obterDuracao(){
// vamos obter uma referência ao elemento <video>
var video = document.getElementById('video');
// agora obtemos a duração do vídeo em segundos
// (descartando os milisegundos)
var duracao = Math.trunc(video.duration);
var segundos = Math.trunc(duracao % 60);
var minutos = Math.trunc((duracao % 3600) / 60);
var horas = Math.trunc(duracao / 3600);
window.alert("A duração do vídeo é: " + horas.toString().padStart(2, '0')
+ ":" + minutos.toString().padStart(2, '0') + ":" +
segundos.toString().padStart(2, '0'));
}
</script>
</body>
</html>
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: |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
