Adoro o fato de a mídia ter passado de plug-ins personalizados (Flash… que nojo) para HTML básico <video> e <audio> elementos. Tratar essas fontes de mídia como apenas outro elemento nos permite usar filtros CSS para ajustar a exibição, por exemplo. Quanto menos precisarmos fazer com o ffmpeg ou plugins, melhor.

Tenho notado que muitos sites de vídeo implementaram um recurso para ajustar a velocidade de reprodução do vídeo, o que é fantástico se o senhor estiver tentando assistir a alguns destaques esportivos mais rapidamente ou ver aquela enterrada monstruosa em câmera superlenta. Eu esperava que isso não exigisse algum tipo especial de servidor para enviar o arquivo em partes mais lentas ou mais rápidas e eu estava certo: tudo o que o senhor precisa é do playbackRate !

const video = document.querySelector("video");

// Slow it to 50% speed
video.playbackRate = 0.5;

// Twice as fast!
video.playbackRate = 2;

// Back to normal
video.playbackRate = 1;

O uso de um número menor que 1 reduz a velocidade do vídeo, um número maior que 1 aumenta a velocidade do vídeo e 1 restaura a velocidade normal do vídeo. Observe também que playbackRate não é um atributo HTML – é uma propriedade.

Ajustar a taxa de reprodução não é algo que se queira fazer em todos os sites de vídeo, mas se o senhor acha que seus usuários podem gostar, basta uma propriedade de elemento HTML!

  • Animações JS responsivas e infinitamente dimensioná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…

  • Expressões regulares para o resto de nós

    Mais cedo ou mais tarde, o senhor se deparará com uma expressão regular. Com sua sintaxe enigmática, documentação confusa e enorme curva de aprendizado, a maioria dos desenvolvedores se contenta em copiá-las e colá-las do StackOverflow e torcer para que funcionem. Mas e se o senhor pudesse decodificar as expressões regulares e aproveitar seu poder? Em…

  • Colunas CSS

    Uma das principais queixas que sempre tivemos em relação ao CSS é que a criação de layouts parece ser mais difícil do que deveria. É claro que adaptamos e dominamos as técnicas de criação de layouts, mas não há como deixar de pensar que deveria haver uma forma de…

  • PHP Woot Checker - Tech, Wine, and Shirt Woot

    Se o senhor ainda não ouviu falar do Woot.com, é porque vive debaixo de uma pedra. Para aqueles que têm vivido sob a proverbial rocha, aqui está o enredo: Todos os dias, o Woot vende um produto. Uma vez que o item esteja esgotado, não há mais itens disponíveis para compra. O senhor não sabe quantos…