O vídeo em HTML5 é empolgante, mesmo que seja apenas pelo fato de não precisarmos mais do Flash ou de outros plug-ins de terceiros para renderizar a mídia. Também podemos criar controles e exibições personalizados em torno do vídeo, e uma dessas exibições deve ser a duração do vídeo. Vou mostrar ao senhor como obter e exibir a duração do vídeo!
O JavaScript
video os elementos têm um duration que representa o número de segundos do vídeo. Para exibir a duração de uma forma bonita, o senhor precisará usar parseInt e modulus (%):
// Assume "video" is the video node
var i = setInterval(function() {
if(video.readyState > 0) {
var minutes = parseInt(video.duration / 60, 10);
var seconds = video.duration % 60;
// (Put the minutes and seconds in the display)
clearInterval(i);
}
}, 200);
É importante usar o setInterval e verificar se o vídeo é readyState caso o vídeo não tenha sido carregado até o momento em que o senhor tentar obter a duração. parseInt é usado para obter o número de minutos e modulus é usado para obter a contagem de segundos.
Animações JS responsivas e infinitamente escalonáveis
No final de 2012, não era fácil encontrar projetos de código aberto usando
requestAnimationFrame()– esse é o gancho que permite que o código Javascript seja sincronizado com o loop de pintura nativo de um navegador da Web. As animações que usam esse método podem ser executadas a 60 fps e proporcionar…
Filtros CSS
O suporte a filtros CSS foi lançado recentemente nos nightlies do WebKit. Filtros CSS fornecem um método para modificar a renderização de um elemento DOM básico, imagem ou vídeo. Os filtros CSS permitem desfocar, distorcer e modificar a intensidade da cor dos elementos. Vamos lá…
Atribuir IDs de âncora usando o MooTools 1.2
Um dos meus usos favoritos da biblioteca MooTools JavaScript é o plug-in SmoothScroll. Eu o utilizo em meu site, no site do meu empregador e em muitos sites de clientes. A melhor parte do plug-in é que ele é muito fácil de implementar. Recentemente, eu corri…