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

Page Visibility API demo screenshot

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

Video playbackRate demo screenshot


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?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s