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 and mobile 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 attribute for 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?

12 thoughts on “My two favourite (underused) HTML5 media features

  1. Alex Laties

    I actually use playbackRate for a video syncing app I use with friends. Speeding up or slowing down by 5% isn’t noticeable to most people, and allows for us to all eventually be watching the same moments at the same time.

    That being said, while support for playbackRate is rock-solid in Chrome, it is dodgy in Firefox. It does work, but it causes some really weird desync issues between audio and video when you speed up and slow down often. Granted, I last tested this a couple months ago and it may be fixed in the current release.

    Reply
  2. James

    What’s another use case for the Page Visibility API? I can’t think of any instance where I’d like a webpage to stop playing audio when I switch away. And that includes video as well. Often times that’s exactly what I WOULDN’T want to happen.

    Reply
    1. Daniel Post author

      I agree, there are times when you don’t want to stop audio/video or at least give users a choice.

      Another use case is controlling animation. Stopping CSS animation when a page is not being viewed, for example, would save CPU/GPU cycles and therefore battery. Another alternative is stopping unnecessary HTTP requests in a page that checks for new content (tweets, news stories, etc.) every minute or so.

      Reply
  3. Jeanine

    HELP! I have a zIndex following rotation problem, on dynamically created canvas elements. It works on Chrome, Firefox, Opera, and on my Android phone. It does NOT work on iPad or Safari on the desktop.
    Twist

    Note: this does work:
    Braiding.

    I’ve asked the question on stackoverflow.

    thanks to all in advance.

    Reply
    1. Jeanine

      I found a solution to my problem: it appears that some browsers don’t work well with rotate and zindex. So instead, the suggestion is to use translateZ. The following works:
      twist

      Reply
  4. Pingback: HTML5 Weekly No.140 | ENUE Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>