I love that media has moved from custom plugins (Flash…gross) to basic HTML
<audio> elements. Treating these media sources as just another element allows us to use CSS filters to adjust display, for example. The less we need to do with ffmpeg or plugins, the better.
I’ve been noticing that many video sites have implemented a feature to adjust video playback speed, which is awesome if you’re trying to get through some sports highlights faster or to see that monster slam dunk in super slow motion. I was hoping it didn’t require some special type of server to send the file in slower or faster chunks and I was right: all you need is the
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;
Using a number less than 1 slows the video down, a number larger than 1 speeds the video up, and 1 restores the video to normal speed. Also note that
playbackRate is not a HTML attribute — it’s a property.
Adjusting playback rate isn’t something you’d want to do for all video sites, but if you think your users may like it, it’s only one HTML element property away!
5 HTML5 APIs You Didn’t Know Existed
When you say or read “HTML5”, you half expect exotic dancers and unicorns to walk into the room to the tune of “I’m Sexy and I Know It.” Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature…
6 Things You Didn’t Know About Firefox OS
Multiple Backgrounds with CSS