Both of these are stable, simple and useful, yet they don’t seem to be used much in the wild (yet). Maybe it’s just lack of awareness so here are a couple of demos to hopefully generate a bit of interest.
Page Visibility API
- Sets a
document.visibilityStateattribute saying whether the page is being viewed or not;
- Provides a
visibilitychangeevent which fires when the page (i.e. its tab) is visible or hidden.
A use case that immediately springs to mind is silencing audio or video when switching to another tab, so here’s a example of it in action: Page Visibility API demo
playbackRate media attribute
A close second is the
playbackRate attribute for HTML5
<video> elements. The default value is 1 but you can change the rate on-the-fly, e.g. to 2 to double the playing speed. The cool thing is the audio pitch stays the same so human voices don’t go higher or lower and sound silly. Note that you can only set this with
video.playbackRate — you can’t use
I’d love to see this added to the many HTML media players out there because it’s so useful to be able to slow down complex educational explanations or speech where the listener is a non-native speaker. Similarly, it’s helpful to speed up media when you’re in a rush or simply bored. Again, here’s an example of it in use: HTML5 playbackRate demo
So what d’ya say? Can we get a bit more love for these two simple but oh-so-useful features?