My Two Favourite (underused) HTML5 Media Features

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

In first place it has to be the Page Visibility API. Supported in all major desktop andmobile browsers, it’s a clever JavaScript API that knows when the user is a viewing a page or not. That sounds creepy and big brother-ish but fortunately it’s not. The API simply does two main things:

1. Sets a document.hidden or document.visibilityState attribute saying whether the page is being viewed or not;
2. Provides a visibilitychange event 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 attributefor HTML5 <audio> and <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 video.setAttribute().

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?