Find out more about past and upcoming POV films!

Did you know? Many POV films are available free to stream online and on mobile devices. Visit POV's Watch Video page or download the PBS mobile app for iPhone or iPad, and see which films are available today!

Your Browser Isn’t a VCR: Tips for Taking Control of Web Video Controls

by |

VCR

Don’t treat your web video like it’s a technology from the 1970s. (Image: Flickr user Nesster)

For most of its history, web video has looked like TV — with one video playing at a time, and simple controls — like those on a DVD player. The HTML video element and video services have implemented controls in the same way.

But interactive media have a more complex set of concerns. There may be multiple media elements playing at the same time, and they may not play in sync. And media will not necessarily progress linearly; it might loop, pause or skip around in response to code or user interactions. Video may be partially obscured by other elements on the page, making the use of existing control schemes difficult. As a result, new controls may need to be created to meet these criteria — and to match the style of the rest of the content.

It can be tempting to keep controls to a minimum, assuming that a viewer will fully submit to the author, like they would with a film in a theater or a broadcast TV show, but it’s worth considering the experience from a user’s point of view. A web or app experience is not like a theater, where the exhibitor has complete control and any external factors have been eliminated. Your viewers’ attention will likely be divided among multiple applications and browser tabs. (This is not always a bad thing. They may be taking notes, searching for related information or sharing your work with someone else.) Even the most dedicated user may be interrupted by factors beyond their control. They might be at work, on a mobile device or around kids and pets. To ignore these considerations not only disrespects your audience, it also makes it difficult for them to recover and get back to appreciating your work.

So let’s explore a few ways we can give some control back to an audience without sacrificing a full interactive experience.

Reactions to Visibility

Perhaps least controversially, it’s possible to pause all your media when your site is in a background tab or minimized window. Modern browsers make this easy with Javascript using the “visibilitychange” event and “document.hidden” property. This is especially useful for ambient audio or background video. There is little benefit to keeping media playing in the background when it’s invisible, and a user may be more likely to close your tab than hold onto it for later if it’s making noise. The effect can be made less abrupt by gradually fading audio in or out as the tab focus changes. However, an exception is if your media is podcast or music that should remain playing while it’s in the background.

Volume Controls

Manual volume control is a user interface component that is easy to ignore. Sometimes it’s better to play your media at full volume and allow the user to depend on system volume, but a user is likely to have multiple applications going at once. You may have multiple kinds of audio in one experience. Consider the convention in video games of providing separate volume settings for background music vs. sound effects and dialogue.

Media Seeking

The ability to seek within media is also useful but perhaps more complex. It might not even make sense if your site is truly non-linear. You may not want to allow skipping ahead past a reveal or other required interaction, but a viewer might want to rewind to review something they’ve already watched for clarification or deeper understanding. Consider that they may also want to skip ahead to resume from a previous play experience. Remember, seeking applies to both continuous media timelines and to skipping between discrete sections. You can store data with localStorage to have your site remember how far a user has progressed into your story and adjust seeking controls accordingly.

Pause Buttons

Finally, at the very least, please implement a pause button. Ideally, enable the spacebar for toggling play and pause, if you don’t otherwise need it for typing text.

Designing controls can be a challenge for a rich media experience, so think about the different levels of interaction. Media components can be active, passive or ambient, and each of these warrants different modes of control. There are many dimensions to consider, and they will vary for every scenario, but by working towards common conventions that are generous to an audience, we can collectively teach them to be more open to our work.

Get more documentary film news and features: Subscribe to POV’s documentary blog, like POV on Facebook or follow us on Twitter @povdocs!

Brian Chirls
Brian Chirls is the Digital Technology Fellow at POV, developing digital tools for documentary filmmakers, journalists and other nonfiction media-makers. The position is a first for POV and is funded as part of a $250,000 grant from John S. and James L. Knight Foundation. Follow him on Twitter @bchirls and GitHub.
  • Christopher Cook

    Interesting point about the “visibilitychange” event – that’s a nice feature that I hadn’t heard about…but I haven’t really worried about coding my own players (HTML or ActionScript) in about three years.

    Are you writing this towards more experimental content creators? My take is that – for most video/documentary storytellers, trying to code a self-designed player is just gonna cost WAY more time than would be worthwhile.

    Are there some interesting examples you can point to of some experimental doc project? I’m just getting up to speed with POV.

    -csc